Comment déployer une application monopage avec Docker+Nginx

Du développement au déploiement, pratique

Lorsque nous développons une application monopage, après avoir exécuté le build

npm run build

générera un index.html dans le répertoire dist, alors comment déployer cet index.html sur le serveur ?

Structure des répertoires

• dist/ : Fichiers statiques construits par le front-end

• docker/ : Fichiers de configuration requis pour la mise en miroir

Configurer nginx

Choisissez d'abord quelques points de configuration , gzip compresse les ressources pour économiser la bande passante et améliorer la vitesse de chargement du navigateur

Bien que webpack prenne déjà en charge la génération de packages compressés .gz pendant la construction, il peut également être activé via nginx

gzip on;
gzip_disable "msie6";
# 0-9 等级，级别越高，压缩包越小，但对服务器性能要求也高
gzip_comp_level 9;
gzip_min_length 100;
# gzip 不支持压缩图片，我们只需要压缩前端资源
gzip_types text/css application/javascript;

Ensuite, il y a la configuration du port de service Le proxy inverse de l'API. au service backend

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;
 }
}

La configuration complète ressemble à ceci

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;
 }
 }
}

Configurer Docker

C'est un peu plus simple ici. Basé sur l'image de base, copiez le nginx.conf et l'index.html que nous avons écrits dans l'image

from nginx:alpine

copy nginx.conf /etc/nginx/nginx.conf
copy dist /usr/share/nginx/html

.

Écrivez le makefile

Après avoir terminé les préparations ci-dessus, vous pouvez écrire des commandes pour effectuer le packaging de l'image

Donnez d'abord un nom et un numéro de port à l'image

app_name = spa_nginx_docker
port = 8080

Emballez l'image via build

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

Démarrez l'image via déployer

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

Enfin, il y a un arrêt pour arrêter et nettoyer l'image

stop:
 docker stop $(app_name)
 docker rm $(app_name)
 docker rmi $(app_name)

La configuration complète ressemble à ceci

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)

La commande complète ressemble à ceci

# 静态资源构建
npm run build

# 镜像打包
make build

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

# 镜像启动
make deploy

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!