How to deploy single-page application with Docker+Nginx

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!