So stellen Sie eine Single-Page-Anwendung mit Docker+Nginx bereit

Von der Entwicklung bis zur Bereitstellung, praktisch

Wenn wir eine Single-Page-Anwendung entwickeln, generiert

npm run build

nach der Ausführung des Builds eine index.html im dist-Verzeichnis, also wie diese index.html auf dem Server bereitgestellt wird ?

Verzeichnisstruktur

• dist/: Vom Frontend erstellte statische Dateien

• docker/: Für die Spiegelung erforderliche Konfigurationsdateien

Nginx konfigurieren

Wählen Sie zunächst einige Konfigurationspunkte aus , gzip komprimiert Ressourcen, um Bandbreite zu sparen und die Ladegeschwindigkeit des Browsers zu verbessern

Obwohl Webpack bereits die Generierung komprimierter .gz-Pakete während des Builds unterstützt, kann es auch über nginx

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

Dann gibt es die Konfiguration des Service-Ports Der API-Reverse-Proxy zum Backend-Dienst

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

Die vollständige Konfiguration sieht so aus

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

Docker konfigurieren

Hier ist es etwas einfacher. Kopieren Sie die nginx.conf und die index.html, die wir in das Image geschrieben haben, auf der Grundlage des Grundbilds

Schreiben Sie das Makefile

Nachdem Sie die oben genannten Vorbereitungen abgeschlossen haben, können Sie Befehle schreiben, um das Image-Packen durchzuführen

Geben Sie dem Image zunächst einen Namen und eine Portnummer

from nginx:alpine

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

Packen Sie das Image über Build

app_name = spa_nginx_docker
port = 8080

Starten Sie das Image über Deployment

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

Zum Abschluss gibt es einen Stopp, um das Bild anzuhalten und zu bereinigen

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

Die komplette Konfiguration sieht so aus

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

Der komplette Befehl sieht so aus

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)

Das obige ist der detaillierte Inhalt vonSo stellen Sie eine Single-Page-Anwendung mit Docker+Nginx bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!