Develop to deploy, do it yourself
When we develop a single-page application, after executing the build
npm run build
will generate an index.html in the dist directory, So how to deploy this index.html to the server?
Directory structure
dist/: Static files built by the front end
docker/: Configuration files required for mirroring
Configuration nginx
Choose a few configuration points to talk about, first is gzip Compress resources to save bandwidth and improve browser loading speed
Although webpack already supports generating .gz compressed packages during build, it can also be enabled through nginx
gzip on; gzip_disable "msie6"; # 0-9 等级,级别越高,压缩包越小,但对服务器性能要求也高 gzip_comp_level 9; gzip_min_length 100; # gzip 不支持压缩图片,我们只需要压缩前端资源 gzip_types text/css application/javascript;
Then there is the service port Configuration, reverse proxy api to 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; # 禁止缓存 html,以保证引用最新的 css 和 js 资源 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; } } }
Configuring docker
This is simple, based on the basics Mirror, copy the nginx.conf and index.html we wrote into the mirror
from nginx:alpine copy nginx.conf /etc/nginx/nginx.conf copy dist /usr/share/nginx/html
Write makefile
After completing the above preparations, you can write commands to execute The image is packaged
First give the image a name and port number
app_name = spa_nginx_docker port = 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 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
# 静态资源构建 npm run build # 镜像打包 make build # 停止并删除旧镜像(首次可忽略) make stop # 镜像启动 make deploy
The above is the detailed content of How to deploy single-page application with Docker+Nginx. For more information, please follow other related articles on the PHP Chinese website!