From development to deployment, do it yourself When we develop a single-page application, after executing the build npm run build An index.html will be generated in the dist directory. How do you deploy this index.html to the server? Directory Structure
Configure Nginx Let me talk about a few configurations. First, Gzip compresses resources to save bandwidth and increase browser loading speed. Although Webpack already supports generating .gz compressed packages at build time, it can also be enabled through Nginx gzip on; gzip_disable "msie6"; # 0-9 levels, the higher the level, the smaller the compressed package, but the higher the server performance requirement gzip_comp_level 9; gzip_min_length 100; # Gzip does not support compressed images, we only need to compress front-end resources gzip_types text/css application/javascript; Then there is the configuration of the service port, which reverse proxies the API to the backend service server { listen 8080; server_name www.frontend.com; root /usr/share/nginx/html/; location / { index index.html index.htm; try_files $uri $uri/ /index.html; # Disable caching of HTML to ensure that the latest CSS and JS resources are referenced expires -1; } location /api/v1 { proxy_pass http://backend.com; } } The complete configuration looks like this worker_processes 1; events { worker_connections 1024; } http { ## # Basic Settings ## sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; ## # Logging Settings ## access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; ## # Gzip Settings ## gzip on; gzip_disable "msie6"; gzip_comp_level 9; gzip_min_length 100; gzip_types text/css application/javascript; server { listen 8080; server_name www.frontend.com; root /usr/share/nginx/html/; location / { index index.html index.htm; try_files $uri $uri/ /index.html; expires -1; } location /api/v1 { proxy_pass http://backend.com; } } } Configure Docker Here is a simple one. Based on the basic image, copy the nginx.conf and index.html we wrote into the image. FROM nginx:alpine COPY nginx.conf /etc/nginx/nginx.conf COPY dist /usr/share/nginx/html Writing a Makefile After completing the above preparations, you can write commands to execute the image packaging. First give the image a name and port number APP_NAME = spa_nginx_docker PORT = 8080 Packaging images through build build: cp docker/Dockerfile . cp docker/nginx.conf . docker build -t $(APP_NAME) . rm Dockerfile rm nginx.conf Start the image through deploy deploy: docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME) Finally, there is a stop to stop and clean up the image. stop: docker stop $(APP_NAME) docker rm $(APP_NAME) docker rmi $(APP_NAME) The complete configuration looks like this APP_NAME = spa_nginx_docker PORT = 8080 build: cp docker/Dockerfile . cp docker/nginx.conf . docker build -t $(APP_NAME) . rm Dockerfile rm nginx.conf deploy: docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME) stop: docker stop $(APP_NAME) docker rm $(APP_NAME) docker rmi $(APP_NAME) The complete command looks like this: # Static resource build npm run build # Image packaging make build # Stop and delete the old image (can be ignored for the first time) make stop # Image startup make deploy Summarize The current deployment method is relatively simple. The use of basic images and image repositories will be added later. Let's explore the way ahead first. You may also be interested in:
|
<<: Nodejs error handling process record
>>: Solution to the data asymmetry problem between MySQL and Elasticsearch
This article shares the installation and configur...
ngx_lua_module is an nginx http module that embed...
Table of contents Preparation Deployment process ...
Table of contents 1. Slow query configuration 1-1...
This article shares a sharing sidebar implemented...
Recently, I need to stress test the server again....
Preface: Partitioning is a table design pattern. ...
The company had a well-configured server that was...
I have seen some dynamic routing settings on the ...
Table of contents Foreign Key How to determine ta...
Effect (source code at the end): accomplish: 1. D...
This article shares the installation and configur...
In this article, I will explain in detail how to ...
This article will use Docker containers (orchestr...
Table of contents 1. Scene introduction 2 Code Op...