How to deploy single-page application with Docker+Nginx

WBOY
Release: 2023-05-15 19:40:19
forward
775 people have browsed it

Develop to deploy, do it yourself

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

npm run build
Copy after login

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

How to deploy single-page application with Docker+Nginx

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;
Copy after login

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;
 }
}
Copy after login

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;
 }
 }
}
Copy after login

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
Copy after login

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
Copy after login

Package the image through build

build:
 cp docker/dockerfile .
 cp docker/nginx.conf .
 docker build -t $(app_name) .
 rm dockerfile
 rm nginx.conf
Copy after login

Start the image through deploy

deploy:
 docker run -d -it -p=$(port):$(port) --name="$(app_name)" $(app_name)
Copy after login

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)
Copy after login

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)
Copy after login

The complete command looks like this

# 静态资源构建
npm run build

# 镜像打包
make build

# 停止并删除旧镜像(首次可忽略)
make stop

# 镜像启动
make deploy
Copy after login

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!

Related labels:
source:yisu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!