Docker-Compose、NGINX 和热重载配置

2024-03-26

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

我正在寻求帮助来更新下面的文件以允许热重载 OR 只需启用浏览器刷新即可获取 UI 更改

NOTES:

  • 我有“dev”和“prod”npm 脚本。两者的行为都与产品一样(当前生成一个静态构建文件夹并指向它)

任何帮助将不胜感激 :)

包.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 dev 文件

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 文件定义了 2 个服务区域:location / and location /graphql.

首先 (location /)正在提供静态文件/usr/share/nginx/html容器内。这些文件是在 docker 构建期间创建的。由于这些是在多阶段 docker 构建中生成的,因此您需要更改策略。以下是一些可以帮助指导您的选项。

Option 1

一种选择是构建本地并安装卷。

  • Perform npm run build在你的盒子上(也许甚至可以使用文件观察器在 *.js 文件更改时执行构建
  • Add - ./build:/usr/share/nginx/html到卷列表client service

这里的权衡是你必须放弃完全 Docker 化的构建(如果这对你和你的团队来说非常重要)。

Option 2

利用热重载节点服务器进行本地开发,并为生产环境构建docker镜像。从文件中很难判断客户端是否是 React、Angular、Vuejs 等,但通常它们具有运行本地开发服务器的模式。

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

Option 3

将 nginx 和 nodejs 合并到一个 docker 镜像中,并在其中进行热重载。

  • 构建包含nodejs和nginx的本地docker镜像
  • (您已经将卷安装到client您的应用程序 src 文件的数量)
  • 设置要运行的映像npm run build 容器内每当该已安装卷中的文件发生更改时

这里的权衡是,您可能有多个进程在 docker 容器中运行(这是一个很大的禁忌)。

Option 4

选项 3 的变体,您运行 2 个 docker 容器。

  • Declare a top-level volume client_build
    • volumes:
        - client_build:
      
  • Create a docker service in docker-compose with 2 volumes
    • - ./services/client:/usr/src/app
    • - client_build:/usr/src/app/build
  • 将构建体积添加到您的client服务:- client_build:/usr/share/nginx/html
  • 确保当目录更改时 nginx 热重载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Docker-Compose、NGINX 和热重载配置 的相关文章

随机推荐

  • 如果更改来源不是来自 html,则不会触发 Javascript 事件?

    我试图理解为什么以下示例中的更改事件没有被触发 我将准确显示在哪里 我有一个复选框 我们将其称为 主复选框 选中时 我想检查一些其他相关的复选框 到目前为止有效 此外 当我取消选中相关复选框之一 子复选框 时 我想取消选中 mainChec
  • Android 中流畅的视频擦除

    我正在尝试使用 Android 实现流畅的视频擦除VideoView The seekTo的方法MediaPlayer没有完全按照我想要的方式做 它并不完全寻求我在其中传递的毫秒 它实际上从 跳转到最近的位置 而不是我想要的确切位置 框架也
  • 如何按顺序循环 GET/POST 调用(等待上一个)返回?

    我正在为网页编写 Tampermonkey 脚本 并尝试从其他页面提取数据 我正在尝试创建一个内部有一个循环遍历列表的函数 llcList 并从 ajax 方法 GET 检索数据 但希望等待第一个请求完成后再转到第二个请求 如果我能让它多等
  • 如何找出 Android 中的 GMT 偏移值

    如何找出用户的 GMT 值 例如印度为 05 30 如何在 Android 中计算 05 30 值 我需要这个 因为我在我的应用程序中使用一个java库 它有一个带有这个 05 30字段的函数 我想通过计算生成这个字段 这样我就不必填写国家
  • Visual Studio 2008 中无法识别的标记前缀或设备筛选器

    我有一组 Web 控件 位于网站引用的程序集中 我可以毫无问题地构建和运行所有内容 但是当我查看正在使用控件的 aspx 页面时 我会在标签前缀下方看到一条绿色下划线
  • 删除字符串中多余的空格

    我想使用 VB net 删除多余的空格 ex The Quick Brown Fox 我要输出 The Quick Brown Fox 谢谢 英奇卡 您可以使用一个简单的正则表达式来实现 Dim cleaned As String Rege
  • 如何从传递到 scalatags 的事件处理程序访问“this”元素?

    我正在尝试访问当前的文本 this 元素来自使用 scalatags 创建的事件处理程序 这是我尝试过的 val onChange e HTMLElement gt number e textContent toInt js ThisFun
  • Rails/ActiveRecord 按月+年分组并计数

    我有一张桌子Albums有一个date列名为release date 我想获得所有月份 年份组合的列表以及该月份 年份发行的专辑数量 因此 输出可能类似于 2016 年 11 月 11 2016 年 10 月 4 2016 年 7 月 19
  • DropArea 不会通知有关 onEntered、onExited、onDropped 的操作

    I have Rectangle洋溢着MouseArea其中上onPressAndHold 处理程序透露第二个Rectangle和转账drag对此采取行动Rectangle 问题是当我移动那一秒时Rectangle over DropAre
  • Kendo UI 树视图父节点不带复选框

    什么方法可以实现显示带有复选框的 TreeView 但我不需要父节点的复选框 仅适用于没有子项的 项目 即 我正在显示文件夹结构 但不希望仅针对文件为任何文件夹设置复选框 Thanks 你应该使用使用复选框模板 http docs kend
  • 64 位 Windows 上的 32 位和 64 位互操作性

    是否有讨论 32 位和 64 位进程之间的互操作性的全面权威参考资料 根据谷歌搜索 我推断出 32位DLL只能驻留在32位进程中 64位DLL只能驻留在64位进程中 32位和64位进程只能使用松散耦合的消息系统进行通信 例如网络通信 这意味
  • 按属性名称对 JavaScript 对象进行排序

    我已经寻找了一段时间 想要一种对 Javascript 对象进行排序的方法 如下所示 method artist getInfo artist Green Day format json api key fa3af76b9396d0091c
  • Typescript 抽象属性

    几天前我开始学习打字稿 我知道所有主要的 OOP 概念 但我只是不理解抽象属性背后的概念 我知道您必须在子类中重写 实现基类的抽象成员 但是 它有什么用呢 我了解抽象方法背后的概念 但不是这个 如果您能为我提供一些很好的例子 我将非常感激
  • Scala 逐行调度流响应

    我正在尝试使用 Scala 调度 但既是 Scala 新手 又面对 Dispatch api 符号疯狂的问题 我对如何流式传输大型 http 响应并逐行处理它感到困惑 任何帮助 将不胜感激 干杯 克里斯 Note 这对我不起作用 Http
  • 散点图对数刻度

    在我的代码中 我取两个数据系列的对数并绘制它们 我想通过将 x 轴的每个刻度值提高到 e 次方 自然对数的反对数 来更改它 换句话说 我想绘制两个系列的对数 但 x 轴为水平 这是我正在使用的代码 from pylab import sca
  • 取决于特定项目的公共单元中的条件编译?

    在Delphi XE2中 我有一个单元MyUnit pas由两个不同的项目使用ProjectA and ProjectB MyUnit包含一个声明DoSomething 这是在其他单位实施的程序其他单位 pas 现在我想用条件编译包括DoS
  • vb6中动态两级或多级子菜单生成

    朋友们 告诉我怎么做生成1级以上的子菜单在VB6中运行时 简单解释一下 有什么具体的控制措施吗 但我不想使用外部控件 您可以使用API 函数创建多级子菜单 Private Declare Function CreatePopupMenu L
  • 将 jQuery 插件转换为 TypeScript

    好的 首先这是我非常基本的 jQuery 插件 function fn greenify function options var settings extend These are the defaults color 556b2f ba
  • Selenium WebDriver 测试失败并出现 System.Net.WebException 无法连接

    我正在开发一套 Selenium WebDriver 不是 Selenium RC 也不使用 Selenium Server 测试 这些测试是通过命令行调用 MSTest 来执行的 我已将它们分解为我们计划测试的每个浏览器 目前是 Chro
  • Docker-Compose、NGINX 和热重载配置

    我有一个通过 docker compose 运行的功能全栈应用程序 奇迹般有效 唯一的问题是团队必须重建整个应用程序以反映更改 这意味着把整个事情搞砸docker compose down 我正在寻求帮助来更新下面的文件以允许热重载 OR