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
MySQL is a relational database management system ...
Configuration Instructions Linux system: CentOS-7...
Effect: <div class="imgs"> <!-...
When newbies develop div+css, they need to name t...
WeChat Mini Program Component Design Specificatio...
Using iframes can easily call pages from other we...
Preface: For the implementation of digital additi...
SRIOV introduction, VF pass-through configuration...
definition Calcite can unify Sql by parsing Sql i...
1. Analytical thinking 1. Eliminate the machine&#...
Install MySQL and keep a note. I don’t know if it...
Preface In a recent project, we need to save a la...
Environment: (docker, k8s cluster), continue with...
As the data stored in the MySQL database graduall...
1. A container is an independently running applic...