使用docker-compose部署前端应用

公司测试服务器都使用docker compose 进行应用部署，之前没接触过，但是有不少项目在使用该方式，对相关的部署机制及命令做了简单了解后，开始尝试将近期开发的一个前端应用部署到测试服务器上

部署目录：/root/zhuzl/monthly-report-ui/,该目录下有两个目录：一个 dist 为打包后的前端工程文件；一个 nginx为部署相关的目录。

将打包后的文件上传到dist目录。在 nginx 目录添加如下文件：

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    #underscores_in_headers on;

    server {
        # listen               443 ssl;
        listen              80;
        server_name         localhost;
        # ssl_certificate      /usr/local/nginx/conf/server.crt;
        # ssl_certificate_key  /usr/local/nginx/conf/server.key;

        root /usr/share/nginx/html;
        
        location /api/ {
            proxy_pass http://xxx/api/;
            proxy_redirect             off;
            proxy_ignore_client_abort  on;
            proxy_connect_timeout      600;
            proxy_send_timeout         600;
            proxy_read_timeout         600;

            proxy_pass_request_headers on;
            proxy_set_header           Host $host;
            proxy_set_header           X-Real-IP $remote_addr;
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
        }

    }
}

monthly-report-ui-docker-compose.yml

version: '3'
services:
    monthly-report-ui:
        #build:
        #    context: .
        #    dockerfile: Dockerfile
        image: nginx
        #image: rookiezoe/nginx
        #image: crunchgeek/nginx-pagespeed
        volumes:
            #- ./server.key:/usr/local/nginx/conf/server.key
            #- ./server.crt:/usr/local/nginx/conf/server.crt
            - ./nginx.conf:/etc/nginx/nginx.conf
            - ../dist:/usr/share/nginx/html
            #- ../helper:/usr/share/nginx/html/helper
            #- ../api-doc:/usr/share/nginx/html/api-doc
        ports:
            - "40001:80"
        #links:
        #    - hydra
        #depends_on: 
        #    - hydra
        #environment:
        #  - CONSOLE_VERSION=1.2
        command:
          /bin/bash -c "exec nginx -g 'daemon off;'"

          
networks:
  default:
    external:
      name: dev_oauth

安装以上方式准备好后，进入 nginx 目录，使用如下命令启动或停止应用：

# 停止服务
docker-compose -f monthly-report-ui-docker-compose.yml down
# 启动服务
docker-compose -f monthly-report-ui-docker-compose.yml up &

服务启动后，即可使用http://<;SERVER-IP>:40001访问应用

本示例配置文件信息：
monthly-report-ui.zip