Dokku is good, and I wrote a blog for whole setup of Dokku + Node + React + MongoDB. This blog, we will address the issue where if you use the default
buildpack for building, it will download Node and NPM everytime, which will make it very long in some circumstance, in this blog, we will
Dockerfile to replace it, make it much more faster, because we will
multi-stage build with its cache mechanism.
1. What is the requirement
The environment is still the same:
- Node: back-end
- React.js: Front-end
- MongoDB: Database
- Dokku: Container
The folder structure looks like this:
- root: back-end code
- client: front-end code
- public: folder for holding all the static assets
React.js is powered by
create-react-app, for each deployment, we need to build the client, then it will yield a
build folder, we need to replace the top level
public with this
build folder, so we can serve it from our back-end. It is actually quite simple.
Create a dockerfile in the root folder.
# 1. build the front-end
2.1 build the front-end
This part is pretty easy to understand. We use
10-alpine here for the base, because it’s small and fast. Then We create a new folder
/temp-build in the container, then copy the
package-lock.json there, and
npm install, then we copy the whole folder over, and start building. The interesting part is
AS, we name our stage as
build-react, so we can refer to it later.
2.2 prepare the back-end
Here, we still use
10-alpine, we create a new folder, we still do the same steps, copy
install, copy folder, swap
build with this command:
COPY --from=build-react /temp-build/build/ /myApp/public/.
2.3 run this web-application
We expose 3030, then set the production, and run
npm run start at last.
It is just that easy. Hope it helps.
Thanks for reading!
Follow me (albertgao) on twitter, if you want to hear more about my interesting ideas.