在前端项目中新增docker相关文件进行前端项目的镜像构建。
    image.png
    dockerfile文件：

    1. FROM node:lts-alpine
    2. WORKDIR /build
    3. RUN npm config set sass_binary_site https://repo.huaweicloud.com/node-sass 
    4. RUN npm config set registry https://repo.huaweicloud.com/repository/npm/
    5. COPY package.json /build/package.json
    6. RUN npm install
    7. COPY ./ /build
    8. RUN npm run build
    10. FROM nginx
    11. RUN mkdir /app
    12. COPY --from=0 /build/dist /app
    13. COPY --from=0 /build/nginx.conf /etc/nginx/nginx.conf
    14. EXPOSE 80

    docker-compose.yml文件：

    1. version: "3"
    2. services: 
    3.     traffic:
    4.         build: .
    5.         image: traffic/web
    6.         ports: 
    7.             - 80:80

    nginx.conf文件：

    1. user  nginx;
    2. worker_processes  1;
    3. error_log  /var/log/nginx/error.log warn;
    4. pid        /var/run/nginx.pid;
    5. events {
    6.   worker_connections  1024;
    7. }
    8. http {
    9.   include       /etc/nginx/mime.types;
    10.   default_type  application/octet-stream;
    11.   log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    12.                     '$status $body_bytes_sent "$http_referer" '
    13.                     '"$http_user_agent" "$http_x_forwarded_for"';
    14.   access_log  /var/log/nginx/access.log  main;
    15.   sendfile        on;
    16.   keepalive_timeout  65;
    18.   server {
    19.     listen       80;
    20.     server_name  localhost;
    21.     location / {
    22.       root   /app;
    23.       index  index.html;
    24.       try_files $uri $uri/ /index.html;
    25.     }
    27.    location /traffic {
    28.         proxy_pass http://10.100.102.58:30886/traffic;
    29.         proxy_set_header Host $host;
    30.         proxy_set_header X-Real-IP $remote_addr;
    31.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    32.         proxy_set_header REMOTE-HOST $remote_addr;
    34.         #缓存相关配置
    35.         #proxy_cache cache_one;
    36.         #proxy_cache_key $host$request_uri$is_args$args;
    37.         #proxy_cache_valid 200 304 301 302 1h;
    39.         #持久化连接相关配置
    40.         proxy_connect_timeout 3000s;
    41.         proxy_read_timeout 86400s;
    42.         proxy_send_timeout 3000s;
    43.         #proxy_http_version 1.1;
    44.         #proxy_set_header Upgrade $http_upgrade;
    45.         #proxy_set_header Connection "upgrade";
    47.         add_header X-Cache $upstream_cache_status;
    49.         #expires 12h;
    50.     }
    52.     error_page   500 502 503 504  /50x.html;
    53.     location = /50x.html {
    54.       root   /usr/share/nginx/html;
    55.     }
    57.   }
    58. }

    有时可以新增一个build.sh文件：

    1. set -e
    2. docker-compose build
    3. docker-compose push