docker-compose 編排 vue + nginx

採用 npm run 的模式啓動 vue 項目 端口 8080
nginx 8089 做代理轉發到 vue 8080

1. 準備 vue 項目的 Dockerfile

比較簡單將vue項目做成 docker鏡像 直接啓動即可。

FROM node:12
MAINTAINER user "[email protected]"

EXPOSE 8080

WORKDIR /usr/share/workpath  #替換成自己的目錄
COPY . /usr/share/workpath   #替換成自己的目錄
RUN  npm install

CMD ["npm", "run", "dev"]

編譯鏡像：

docker build -t test-vue .

啓動測試：

docker run --name=test-vue -d \
-p 8080:8080 \
test-vue

2. 準備 nginx.conf

#user  nobody;
worker_processes  1;
events {
  worker_connections  1024;
}

http {
  include 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  logs/access.log  main;

  sendfile        on;
  #tcp_nopush     on;

  #keepalive_timeout  0;
  keepalive_timeout  65;

  #gzip  on;

  upstream test-vue {
    server diss-ui:8080; # 該處爲docker-compose 容器的名稱
  }

  #api服務配置
  server {
    listen 8089;
    server_name localhost;
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    charset utf-8;

    location / {
      proxy_pass http://test-vue;
        proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }

  }
}

3. 準備 Docker-Compose

version: '3'
services:
  diss-ui:
    restart: always
    container_name: test-vue
    image: test-vue
    ports:
      - "8080:8080"
    env_file:
      - ./test.env  # 需要的話可以指定環境變量傳入做動態參數
    command: ["npm", "run", "dev"]

  diss-nginx:
    restart: always
    container_name: nginx
    image: nginx:1.17
    env_file:
      - test.env # 需要的話可以指定環境變量傳入做動態參數
    depends_on:
      - diss-ui
    links:
      - diss-ui
    ports:
      - "8089:8089"
    volumes:
      - './nginx.conf:/etc/nginx/nginx.conf:ro'
    command: [nginx, '-g', 'daemon off;']

啓動：

docker-compose up -d

停止：

docker-compose down -v