Use Docker to complete front-end deployment

1. Package the front-end project

1. Through the package.json file in the project, find "build" to run and package

2. After the packaging is successful, the dist folder is generated, which is the packaged project

3. Create a Docker folder in the root directory to create nginx.conf configuration file, and create a Dockerfile in the root directory

legend:

1. nginx.conf

server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    
    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;
    location / {
        try_files $uri /index.html;
    
}

1) gzip on;- Enable Gzip compression.

2) gzip_min_length 1k;- Specify the minimum file size for compression. Only files larger than or equal to 1 kilobyte will be compressed.

3) gzip_comp_level 9;- Set the level of Gzip compression. The level is from 1 to 9, 9 is the highest compression ratio, but also consumes more CPU resources.

4) gzip_types- Specify the file types that need to be Gzip compressed. In this example, multiple types of files are configured, including plain text files (text/plain), CSS files (text/css), JavaScript files (text/javascript, application/json, application/javascript, application/x- javascript) and XML files (application/xml).

5) gzip_vary on;- Add the Vary header to the HTTP response header to inform the cache server to provide the correct compressed version according to the Accept-Encoding header.

6) gzip_disable "MSIE [1-6]\.”;- Disable specific browser compression. In this example, it disables Gzip compression for versions 1 through 6 of Internet Explorer. This is because earlier versions of IE may have compatibility issues when handling Gzip compression.

2. Dockerfile

FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

1) FROM nginx: install nginx

2) WORKDIR : working directory, the default location when executing commands in the container

3) COPY: Copy, copy the specified file from the execution directory to the specified directory in the container

4) EXPOSE: Declare the ports that the service in the container will listen to (the instruction is just a documented operation, it does not automatically open these ports or configure network connections when the container starts)

5) CMDInstructions to specify the default command or executable file to be executed when the container starts

4. Compress the file in order to upload to the server (according to the above picture as an example)

Compress the three red boxes into a compressed package.

2. The server project is online

1. docker installation

Reference documents:

2. Upload the compressed package to the server

Upload the packaged user-center-frontend.zip to the specified directory of the server, here we take /root/myappthe directory as an example

1. Create the myapp directory

mkdir /root/myapp 

2. Put the compressed package in the directory

3. Go to the myapp folder and unzip the file

unzip user-center-frontend.zip -d user-center-frontend

4. Enter the user-center-frontend folder to execute the command, followed by "." Do not ignore

docker build -t user-center-frontend:v0.0.1 .

docker build -t 镜像名称:版本号 .

5. Run the docker image

1.查看docker 镜像
docker images

2.根据打包好的镜像，并运行docker
docker run -d -p 80:80 user-center-frontend:v0.0.1 

3.查看容器运行状态
docker ps

Project deployed successfully