Docker-Compose，NGINX和热重载配置 选项1 选项2 选项3 选项4

如何解决Docker-Compose，NGINX和热重载配置 选项1 选项2 选项3 选项4

我有一个功能齐全的全栈应用程序通过docker-compose运行。奇迹般有效。唯一的问题是团队必须重建整个应用程序以反映更改。这意味着使用docker-compose down将整个过程推倒。

我正在寻找更新以下文件的帮助，以允许热重载或仅启用浏览器刷新以更改用户界面

注意：

• 我有“ dev”和“ prod” npm脚本。两者的行为均与产品类似（当前会生成一个静态构建文件夹并指向它）

任何帮助将不胜感激：）

package.json

{
  "name": "politicore","version": "1.0.1","description": "Redacted","repository": "Redacted","author": "Redacted","license": "LicenseRef-LICENSE.MD","private": true,"engines": {
    "node": "10.16.3","yarn": "YARN NO LONGER USED - use npm instead."
  },"scripts": {
    "dev": "docker-compose up","dev-force": "docker-compose up --build --force-recreate","dev-force-d": "docker-compose up --build --force-recreate -d","prod-up": "docker-compose -f docker-compose-prod.yml up","prod-up-force": "docker-compose -f docker-compose-prod.yml up --build --force-recreate","prod-up-force-d": "docker-compose -f docker-compose-prod.yml up --build --force-recreate -d","dev-down": "docker-compose down","dev-down-remove": "docker-compose down --remove-orphans","prod-down": "docker-compose down","prod-down-remove": "docker-compose down --remove-orphans"
  }
}

Nginx开发配置文件

server {

  listen 80;
  listen 443;

  server_name MyUrl.com www.MyUrl.com;
  
  server_tokens off;
  proxy_hide_header X-Powered-By;
  proxy_hide_header Server;
  add_header X-XSS-Protection "1; mode=block";
  add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
  add_header x-frame-options DENY;
  add_header X-Content-Type-Options nosniff;
  add_header X-Permitted-Cross-Domain-Policies master-only;
  add_header Referrer-Policy same-origin;
  add_header Expect-CT 'max-age=60';
  add_header Feature-Policy "accelerometer none; ambient-light-sensor none; battery none; camera none; gyroscope none;";
  
  location / {
    root   /usr/share/Nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /graphql {
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
    proxy_pass        http://api:5000;
    proxy_redirect    default;
  }

}

docker-compose开发文件

version: '3.6'

services:
  api:
    build:
      context: ./services/api
      dockerfile: Dockerfile-dev
    restart: always
    volumes:
      - './services/api:/usr/src/app'
      - '/usr/src/app/node_modules'
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    env_file: 
      - common/.env

  client:
    build:
      context: ./services/client
      dockerfile: Dockerfile-dev
    restart: always
    volumes:
      - './services/client:/usr/src/app'
      - '/usr/src/app/node_modules' 
    ports:
     - 80:80
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - api
    stdin_open: true

客户服务dockerfile

FROM node:10 as builder
workdir /usr/src/app

copY package.json /usr/src/app/package.json

RUN npm install

copY . .

RUN npm run build

FROM Nginx:alpine

copY --from=builder /usr/src/app/build /usr/share/Nginx/html

copY Nginx/dev.conf /etc/Nginx/conf.d/default.conf

EXPOSE 80

CMD ["Nginx","-g","daemon off;"]

API dockerfile（开发和生产）

FROM node:10

workdir /usr/src/app

copY package.json /usr/src/app/package.json

RUN npm install

CMD ["npm","start"]

文件树图片

解决方法

据我了解，您的nginx文件定义了两个服务区域：location /和location /graphql。

第一个（location /）从容器内的/usr/share/nginx/html提供静态文件。这些文件是在docker构建期间创建的。由于这些是在多阶段docker构建中产生的，因此您需要更改策略。这里有一些选项可能会帮助您。

选项1

一种选择是在本地构建并挂载卷。

• 在您的机器上执行npm run build（甚至在* .js文件发生更改时，即使有文件监视者也可以执行构建
• 将- ./build:/usr/share/nginx/html添加到client服务的卷列表中

这里的权衡是，您必须放弃完全使用docker化的版本（如果这对您和您的团队而言很重要）。

选项2

使用热重载节点服务器进行本地开发，并为生产环境构建docker映像。很难从文件中判断出客户端是否是反应，有角度的，vuejs等，但是通常它们具有运行本地开发服务器的模式。

这里要权衡的是，本地运行与生产运行不同。

选项3

将nginx和nodejs合并为一个Docker映像，并在其中进行热重载。

• 构建一个包含nodejs和nginx的本地docker镜像
• （您已经将卷装载到应用程序src文件的client中）
• 设置映像，以便每次文件在该装入的卷中更改时在容器内部运行npm run build

这里的权衡是，您可能在docker容器中运行多个进程（一个很大的禁忌）。

选项4

选项3的一种变体，您可以在其中运行2个Docker容器。

• 声明顶级卷client_build

  • volumes:
      - client_build:
    

• 在docker-compose中创建2个卷的docker服务
  • - ./services/client:/usr/src/app
  • - client_build:/usr/src/app/build
• 将构建卷添加到您的client服务中：- client_build:/usr/share/nginx/html
• 确保该目录更改时nginx会重新加载