Docker multistage build for React and Nginx

Original text: progressivecoder.com/docker-mult…

Docker multi-stage build is an excellent way to create Docker images in production environment.

If you are a novice Docker, strongly recommend that you read the article on “understanding Docker” (progressivecoder.com/understandi…). . Another “from the beginning for application of NodeJS create Dockerfile” (progressivecoder.com/creating-a-…). It’s also interesting.

If you already know the basics of Docker, you can continue to read along with detailed explanations of each step.

1. Why Docker multi-stage build?

Docker multi-phase builds are a relatively new feature that has only been available since Docker 17.05. Multi-phase builds allow us to put multiple FROM statements in the same Dockerfile.

Each FROM directive can use its own different base image. Each FROM statement also marks the beginning of a new phase in the Docker build process. We can copy what is produced in one stage to another, or we can discard what is not needed.

Basically, this is a very useful feature in cases where we don’t want build process dependencies copied to the final image. In other words, Docker multi-phase builds help us make the image smaller.

2. The difference between development and production processes

To demonstrate Docker multi-phase builds, we’ll use a React application as an example

The following figure shows what you need to do to successfully build and run a React application.

As shown above, the entire process is divided into a construction phase and an operational phase.

In the construction phase, we start with the Node: Alpine base image. Basically, all we need to do is install the dependencies using NodeJS. Finally, build the application using NPM Run Build for production purposes.

As of this point, the construction phase is over. For the subsequent run phase, nginx is used as the base image. We then copy the results of the NPM run build command from the build phase, which is the build artifacts (files such as index.html and main.js), into the nginx server directory. At this point, all files and directories generated during the build phase are discarded and not included in the final image, except for the build artifacts we copied.

In the last step, we can start nginx to serve the React application.

3. Create the React application

Mr. React into a simple application.

To get started quickly, install the create-React-app package, which quickly generates a ReactJS application. The following commands are installed globally:

npm install -g create-react-app
Copy the code

Once the installation is complete, you can use it to generate projects. In terminal, go to the directory where you want to create the project and execute the following command.

create-react-app docker-react-app
Copy the code

This will create an application called Docker-react-app for our example.

4. Create a multistage Dockerfile

We are now ready to create our Dockerfile to support the multi-stage Docker build process. Note that this file is placed in the project root directory.

Next, add the following to the Dockerfile:

# Construction phase
FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# Run phase
FROM nginx
COPY --from=builder /app/build /usr/share/nginx/html
Copy the code

These two phases are explained in detail below.

The construction phase

Step 1 – Use Node: Alpine as the base image. We also named this stage Builder. This will help us refer to this stage later.

Step 2 – Next, specify a working directory for the application. This is where the build artifacts will be created.

Step 3 – Copy the package.json file to the working directory. NPM needs this file to install the required dependencies. Note that we only copied the package.json file to ensure that subsequent builds due to code changes do not invalidate the Docker image cache. If only SRC files are changed but dependencies remain unchanged, this layer of caching can be used to speed up builds.

Step 4 – In the next step, install the dependencies using the NPM install command. That is, node_modules is installed which is ignored by.dockerignore.

Step 5 – Then, copy the other files to your working directory, the ones that contain the real application code.

Step 6 – Next, run the NPM run build command. This command will prepare the React application’s production environment build artifacts. In other words, this command generates index.html and main.js files for the server client.

Operation phase

Step 1 – Start the run phase with the nginx base image. Nginx is a very popular Web-server that is ideal for serving static files.

Step 2 – Next, we copy the build artifacts from the Builder stage to the desired location for Nginx. Note that we referenced the build phase with — from= Builder tag and copied /app/build from the build phase’s working directory.

In this way, we have completed the Docker multi-stage construction of Dockerfile.

An important point here is that no explicit RUN command is required for Nginx. The nginx base image itself starts web-server on port 80.

5. Test the React application

To test the React application, build an image based on the multistage Dockerfile with the following command:

docker build -t docker-react-app .
Copy the code

This takes a little time on the first execution because all the underlying images and dependencies will be downloaded.

Once the build is complete, run the following command to run it:

docker run -p 8080:80 docker-react-app
Copy the code

This is basically mirroring and mapping port 80 of Nginx to port 8080 of our own machine.

We don’t see much visual output in the command line window. However, when we open a browser and visit http://localhost:8080, we should see the following React app runtime screen:

conclusion

In this article, we used the Docker multi-stage build process to successfully run a React application on Nginx Server.

We divide the build process into the build phase and the run phase. After an application is created during the build process, its output is copied to the run phase and unused parts are discarded. This greatly reduces the total volume of the mirror image.

–End–

View more front-end good article please search fewelife concern public number reprint please indicate the source