Docker：Browsersync 无法正常工作

Question

我在使用 Gulp、Browsersync 和 Docker 的 Node.js 应用程序中遇到问题。

使用

gulp watch

在本地运行时，一切正常。但是，当使用

docker-compose up

时，我收到“

Cannot GET /

”错误。端口 3001 上的 Browsersync UI 按预期工作。

本地运行应用程序：

咕咕手表

运行docker容器：

docker-compose up

我明白了

Cannot GET /

网络浏览器控制台中的错误消息：

拒绝执行内联脚本，因为它违反了以下规定 内容安全策略指令：“default-src 'self'”。要么是 'unsafe-inline' 关键字，哈希值 ('sha256-ZfFIHrd9MzirQdadZrM3hznhYlx+PRQo8+OCWjaPDaY=')，或随机数 ('nonce-...') 需要启用内联执行。另请注意 'script-src' 没有明确设置，因此 'default-src' 被用作 后备

Docker 撰写日志。它不会产生任何错误，只是记录与我使用

gulp watch

在本地运行它时相同的输出。

 docker-compose up

[+] Building 0.0s (0/0)                                                                                                                                  docker:desktop-linux
WARN[0000] Found orphan containers ([boilerplate-app-1]) for this project. If you removed or renamed this service in your compose file, you can run this command with the --remove-orphans flag to clean it up.
[+] Running 1/0
 ✔ Container boilerplate-node-1  Created                                                                                                                                 0.0s
Attaching to boilerplate-node-1
boilerplate-node-1  | [07:52:39] Using gulpfile /Users/filiphuhta/Documents/Projects/Bitbucket/boilerplate/gulpfile.js
boilerplate-node-1  | [07:52:39] Starting 'watch'...
boilerplate-node-1  | [07:52:39] Starting 'cleanDist'...
boilerplate-node-1  | [07:52:39] Finished 'cleanDist' after 1.61 ms
boilerplate-node-1  | [07:52:39] Starting 'buildScripts'...
boilerplate-node-1  | [07:52:39] Starting 'lintScripts'...
boilerplate-node-1  | [07:52:39] Starting 'buildStyles'...
boilerplate-node-1  | [07:52:39] Starting 'copyFiles'...
boilerplate-node-1  | Browserslist: caniuse-lite is outdated. Please run:
boilerplate-node-1  |   npx update-browserslist-db@latest
boilerplate-node-1  |   Why you should do it regularly: https://github.com/browserslist/update-db#readme
boilerplate-node-1  | [07:52:40] Finished 'copyFiles' after 413 ms
boilerplate-node-1  | [07:52:40] Finished 'buildScripts' after 417 ms
boilerplate-node-1  | [07:52:40] Finished 'lintScripts' after 417 ms
boilerplate-node-1  | [07:52:40] Finished 'buildStyles' after 419 ms
boilerplate-node-1  | [07:52:40] Starting 'startServer'...
boilerplate-node-1  | [07:52:40] Finished 'startServer' after 28 ms
boilerplate-node-1  | [07:52:40] Starting 'watchSource'...
boilerplate-node-1  | [07:52:40] Finished 'watchSource' after 1.43 ms
boilerplate-node-1  | [07:52:40] Finished 'watch' after 454 ms
boilerplate-node-1  | [Browsersync] Access URLs:
boilerplate-node-1  |  -----------------------------------
boilerplate-node-1  |        Local: http://localhost:3000
boilerplate-node-1  |     External: http://172.18.0.2:3000
boilerplate-node-1  |  -----------------------------------
boilerplate-node-1  |           UI: http://localhost:3001
boilerplate-node-1  |  UI External: http://localhost:3001
boilerplate-node-1  |  -----------------------------------
boilerplate-node-1  | [Browsersync] Serving files from: assets/
boilerplate-node-1  | [Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

gulpfile.js:

let startServer = function (done) {
    if (!settings.reload) return done();

    // Initialize BrowserSync
    browserSync.init({
        server: {
            baseDir: paths.reload,
            directory: true
        },
        proxy: "node:3000",
    });
    done();
};

Dockerfile：

FROM node:20

WORKDIR /usr/src/app
COPY gulpfile*.js ./
COPY package*.json ./
RUN npm install --global gulp-cli
RUN npm install

EXPOSE 3000 3001

CMD ["gulp watch"]

docker-compose.yml：

version: "1"
services:
  node:
    build: .
    command: gulp watch
    ports:
      - "3000:3000"
      - "3001:3001"

browsersync UI 在端口

3001

上运行良好：

我不太擅长配置 Docker 容器，所以它肯定是我错过的东西。当我在我的机器上使用

docker 容器

而不是

locally

时，什么可能会导致端口 Cannot GET / 上可用的文件出现 3000 问题？

谢谢您的帮助！

Answer 1

使用 BrowserSync 运行 Node.js 应用程序的 Docker 设置遇到“

Cannot GET /

”错误。

Local Machine:
Browser ─> Gulp Watch ─> BrowserSync ─> Node.js App

Docker Container:
Browser ─> Docker ─> Gulp Watch ─> BrowserSync ─> Node.js App

在 Docker 中运行时，BrowserSync 服务器 无法正确提供文件服务。

---

您可能需要更改 BrowserSync 配置中的代理设置。

node:3000

代理似乎不正确，因为 Docker 可能需要来自

docker-compose.yml

文件的服务名称。如果

node

是您的服务名称，这没问题，但请确保 Node.js 应用程序正在容器内的端口 3000 上运行并可访问。

确保您的文件已正确复制到 Docker 容器中。您可能需要在 docker-compose.yml 中定义一个

volume

以确保提供本地文件：

services:
 | node:
 | volumes:
 | - .:/usr/src/app

您的 Dockerfile 仅复制

gulpfile.js

和

package.json

。确保将整个项目目录（或至少运行应用程序所需的文件）复制到 Docker 容器中。

# Add this line to your Dockerfile
COPY . .

但请确保排除

node_modules

目录被复制到容器中。您可以通过将

.dockerignore

文件添加到项目目录来完成此操作：

node_modules/
npm-debug.log
.git/
.gitignore
.env
Dockerfile
docker-compose.yml
**/.DS_Store
**/Thumbs.db

Web 浏览器控制台中的错误消息表明存在内容安全策略 (CSP) 问题。如果您设置了 CSP，请确保它允许运行必要的脚本。

您的

docker-compose.yml

将是：

version: "1"
services:
  node:
    build: .
    command: gulp watch
    ports:
      - "3000:3000"
      - "3001:3001"
    volumes:
      - .:/usr/src/app

和

Dockerfile

：

FROM node:20

WORKDIR /usr/src/app
COPY . .
RUN npm install --global gulp-cli
RUN npm install

EXPOSE 3000 3001

CMD ["gulp watch"]