[Part 4 of front-end deployment] using docker to build cache and multi-stage construction to optimize single page applications

Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 4 God , Click to see the event details .

Hello everyone , I am Shanyue , This is my latest column ： Front end deployment series . Include Docker、CICD The content such as , The outline diagram is as follows ：

Open source sample code , in Github in , Demonstrate how to deploy a real project .

• simple-deploy: Understand the simplest deployment , It doesn't involve packaging and so on .
• cra-deploy: Learn how to deploy single page applications , Here we use create-react-app For example , But in fact, the story is similar to React irrelevant , Only related to single page applications .

Front end deployment The series is being updated : 4/20

After deploying a simple page , At this time, for Docker And service deployment .

Finally, a project with complexity close to the real project , With CRA Deployment as an example :

Deploy a Creact React APP A single page application .

actually , Even if your technology stack is Vue It doesn't matter. , This series rarely covers React Related content , As long as your project is a single page application .

PS: This project cra-deploy Warehouse as a practice , The profile is located in simple.Dockerfile

Static resources for single page applications

All front-end single page applications are important for deployment , The most important thing is two points :

1. How static resources are built : Most projects are npm run build.
2. Where is the static resource directory : Some projects are /dist, Some projects are /build.CRA yes /build Catalog .

following , It is in cra Command to obtain static resources in .

#  Create a  cra  application 
$ npx create-react-app cra-deploy

#  Get into  cra  Catalog 
$ cd cra-deploy

#  Do dependency installation 
$ yarn

#  Build resources 
$ npm run build

# ./build  The directory is a static resource directory , You can use  tree  Command to print 
$ tree build -L 2
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    ├── js
    └── media

4 directories, 7 files
 Copy code 

Dockerfile

Local CRA The app runs , The following steps can be used :

$ yarn
$ npm run build
$ npx serve -s build
 Copy code 

Translate the command into a Dockerfile:

1. Choose a basic image . Because of the need to build , need node Operating environment , So choose node.
2. Put the above script commands in RUN In the instruction .
3. The start service command is placed in CMD In the instruction .

FROM node:14-alpine

WORKDIR /code

ADD . /code
RUN yarn && npm run build

CMD npx serve -s build
EXPOSE 3000
 Copy code 

Build complete . However, it can also be optimized for the following two points .

1. Too long to build the image , Optimize build time
2. The build image size is too large , Optimize mirror volume

Build time optimization : Build cache

We noticed that , The time-consuming of a front-end project mainly focuses on two commands :

1. npm install (yarn)
2. npm run build

In a local environment , If there's no new npm package Need to download , There's no need to... Again npm i.

that Docker It is impossible to do this in ？

stay Dockerfile in , about ADD In terms of instructions , If Add the contents of the file checksum Nothing has changed , You can use to build a cache .

For front-end projects , If package.json/yarn.lock The content of the document has not been changed , Then there is no need to npm i.

take package.json/yarn.lock Put it in the mirror in advance , Installing dependencies will result in cache optimization , The optimization is as follows .

FROM node:14-alpine as builder

WORKDIR /code

#  Separate  package.json, Is to install dependencies to maximize cache utilization 
ADD package.json yarn.lock /code/
#  here ,yarn  You can take advantage of caching , If  yarn.lock  The content has not changed , Will not re rely on the installation 
RUN yarn

ADD . /code
RUN npm run build

CMD npx serve -s build
EXPOSE 3000
 Copy code 

When building , If cache is available , You can see CACHED Mark .

$ docker-compose up --build
...
 => CACHED [builder 2/6] WORKDIR /code                                                                            0.0s
 => CACHED [builder 3/6] ADD package.json yarn.lock /code/                                                        0.0s
 => CACHED [builder 4/6] RUN yarn                                                                                 0.0s
...
 Copy code 

Build volume optimization : Multistage construction

Our goal is static resources , There is no need to rely on node.js Environmental services , and node.js The environment will cause a great waste of resources .

We can use multi-stage build to optimize , End use nginx Service oriented .

1. The first stage Node Mirror image : Use node Image is used to build a single page application , Generating static resources
2. The second stage Nginx Mirror image : Use nginx The image serves the static resources of a single page application

The Dockerfile Configuration is located in the cra-deploy/simple.Dockerfile

FROM node:14-alpine as builder

WORKDIR /code

#  Separate  package.json, Is to install dependencies to maximize cache utilization 
ADD package.json yarn.lock /code/
RUN yarn

ADD . /code
RUN npm run build

#  Choose a smaller base image 
FROM nginx:alpine
COPY --from=builder code/build /usr/share/nginx/html
 Copy code 

Start the container

We will Dockerfile Name it simple.Dockerfile

The docker compose Configuration is located in the cra-deploy/simple.Dockerfile

version: "3"
services:
  simple:
    build:
      context: .
      dockerfile: simple.Dockerfile
    ports:
      - 4000:80
 Copy code 

Use docker-compose up --build simple Start the container .

visit http://localhost:4000 Page success .

Summary

This article , Optimize volume and time by building cache and multi-stage building , However, there are two small problems to be solved :

1. Routing configuration of single page application
2. Cache policy for single page application