Shulou(Shulou.com)06/02 Report--

From development to deployment, do it yourself

When we develop a single-page application, after performing the build

Npm run build

An index.html is generated in the dist directory, so how do you deploy the index.html to the server?

Directory structure

Configuration files required for docker/: images of static files built by dist/: frontend

Configure Nginx

Choose a few configuration points to talk about. First, Gzip compresses resources to save bandwidth and improve browser loading speed.

Although Webpack already supports the generation of .gz compression package at build time, you can also enable gzip on;gzip_disable "msie6" through Nginx; level # 0-9, the higher the level, the smaller the compression package, but also high server performance requirements. Gzip_comp_level 9 is not supported for compression of images. # Gzip does not support compression of images. We only need to compress the front-end resource gzip_types text/css application/javascript.

Then there is the configuration of the service port, which proxies API in reverse to the back-end 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; # prohibits caching of HTML to ensure references to the latest CSS and JS resources expires-1;} location / api/v1 {proxy_pass http://backend.com;}}

The full configuration looks like this.

Worker_processes 1 leading 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

To make it simple here, based on the basic image, copy the nginx.conf and index.html we have written into the image.

FROM nginx:alpineCOPY nginx.conf / etc/nginx/nginx.confCOPY dist / usr/share/nginx/html

Write Makefile

With the above preparation completed, you can write a command to perform the packaging of the image

First give the image a name and port number

APP_NAME = spa_nginx_dockerPORT = 8080

Package the image through build

Build: cp docker/Dockerfile. Cp docker/nginx.conf. Docker build-t $(APP_NAME). Rm Dockerfile rm nginx.conf

Start mirroring through deploy

Deploy: docker run-d-it-paired $(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 full configuration looks like this.

APP_NAME = spa_nginx_dockerPORT = 8080build: cp docker/Dockerfile. Cp docker/nginx.conf. Docker build-t $(APP_NAME). Rm Dockerfile rm nginx.confdeploy: docker run-d-it-paired $(PORT): $(PORT)-name= "$(APP_NAME)" $(APP_NAME) stop: docker stop $(APP_NAME) docker rm $(APP_NAME) docker rmi $(APP_NAME)

The full command looks like this

# static resource construction npm run build# image packaging make build# stops and deletes old image (ignored for the first time) make stop# image starts make deploy

Summary

The current deployment method is relatively simple. The use of basic images and image repositories will be added later. Go to the front to explore the way.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.