Deploy front-end Web project based on Docker and Nginx
First prepare a server (Tencent cloud or Ali cloud, etc.)
Environment deployment and preparation
1. Install the Linux system. Generally, you can choose CentOS or Ubuntu when purchasing
2. Install the Docker environment and the docker-compose command
For the introduction of Docker, please refer to ruan Yifeng’s big document
2.1 Docker installation Can be installed by referring to the Google search method on the official website, or the system with its own Docker operating environment can be installed when the system is selected
// Install docker-compose, for example: Can install 1.24.1 replace to Compose version sudo curl -l https://github.com/docker/compose/releases/download/1.24.1/docker-compose- ` uname -s' - 'uname -m' -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose Docker-compose --version docker-compose --versionCopy the code3. Package front-end projects. This section uses the project created by Vite as an example. Run Yarn build to generate the default package file dist folder
4. Create the docker-compose. Yaml file, which is the configuration file of Docker-composeThe document
Version: '2.0' services: website: # specifies a path containing the Dockerfile file. Usually the current directory. # Image image: WKQB -web:0.0.1 # Container name container_name: WKQB -web # Specify the configuration related to deploying and running the service (restart: Restart docker and restart the container.) restart: always # mount directory volumes: -. / dist: / WKQB - web/dist -. / nginxconf: / etc/nginx/conf. # d add environment variable environment: BACKENDURL: "Http://39.108.82.140:7001" port to port 1307 # mapping mapping to the host port 80 ports: - "1307-80" # covered container command in the default execution since the start of the command: "/bin/bash -c \"envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off; '\ ""Copy the code
5. Create the nginxconf file and create the default.conf.template file in this folder. This file is the nginx configuration
server { listen 80; server_name localhost; # GZIP compression, can improve the loading speed, but will lose a certain AMOUNT of CPU, for the site with large traffic should be closed, change to compile time compression gZIP on; gzip_min_length 1k; gzip_buffers 4 8k; Gzip_http_version 1.1; gzip_comp_level 5; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; #charset koi8-r; access_log /var/log/nginx/wkqb.access.log main; error_log /var/log/nginx/wkqb.error.log warn; App.html location / {root /wkqb-web/dist/; index index.html; } # proxy location/API {proxy_pass ${BACKENDURL}; }}Copy the codeCreate the file Dockerfile, which is a text document containing the commands used to combine images. You can use any command to invoke from the command line. Docker by readingDockerfileThe image is automatically generated by the instructions in For details about configuration, seeThe document
# FROM: specify the base image, must be the first command FROM nginx:1.17.5 # WORKDIR: the working directory, similar to the CD command WORKDIR /wkqb-webCopy the code6. Log on to the cloud server and add the file docker-compose. Yaml Dockerfile in the nginxconf folder of the Web project to the compressed package (or not compressed).
7. Create a folder for the package (preferably the name of your Web project)
Mkdir WKQB -web // Create a folderCopy the code8. Import files to the folder created above
You can use WinSCP, XFTP 6, or the rz command to import files
// centOS sudo apt-get install LRZSZ // centOS sudo apt-get install LRZSZ // centOS sudo apt-get install LRZSZCopy the code// Go to the folder CD wkqb-web/ // Upload the file rz -b // Unzip the file wkqb-web.zipCopy the codeDocker-compose up -d: docker-compose up -d: docker-compose up -d: docker-compose up -d: docker-compose up -d: docker-compose up -d: docker-compose up -d: docker-compose up -d
You are advised to enter http://${server IP address}:1307 to access the server
Project iteration and update
After encoding, repackage the code and replace the Web code file in the server
Docker stop ${CONTAINER ID} // Run docker-compose up -dCopy the code