Docker Compose部署Node项目遇端口连接及webpack未找到问题

一、端口访问被拒问题 #

问题现象 #

本地连接容器8000端口被拒绝，docker run --network host能临时解决，但docker-compose中配置network_mode: "host"无效，nmap扫描不到8000端口；尝试端口映射和修改HOST为0.0.0.0初期无效果。

解决步骤 #

1. 修正服务绑定地址
   将.env文件中的HOST=127.0.0.1改为HOST=0.0.0.0。127.0.0.1仅让服务监听容器内部回环地址，外部无法通过端口映射访问；改为0.0.0.0后，服务会绑定容器所有网卡，端口映射8000:8000即可正常生效。

2. network_mode: host无效说明
   若使用host模式但服务仍绑定127.0.0.1，主机访问localhost:8000实际是访问自身回环地址，容器内服务监听的共享网络回环地址此时需确保服务已正常启动。但更推荐端口映射+0.0.0.0的组合，比host模式更灵活，也能避免网络隔离相关问题。

二、docker-compose up时webpack找不到问题 #

问题现象 #

执行docker compose up时提示/bin/sh: webpack: not found（退出码127），但手动进入容器执行yarn start可正常运行，项目能通过容器IP访问。

问题原因 #

docker-compose中配置的node_modules卷覆盖了镜像中已安装的依赖：

• Dockerfile里RUN yarn已将依赖安装到镜像的/app/node_modules，但docker-compose.yml中- node_modules:/app/node_modules/是一个空匿名卷，启动时会直接覆盖镜像中的node_modules目录，导致找不到本地安装的webpack。
• 手动docker run时未挂载该卷，使用的是镜像内预安装的依赖，因此yarn start能正常执行。

解决方法（二选一） #

1. 移除node_modules卷
   删掉docker-compose.yml中以下内容：

   # 服务内的volumes条目
   - node_modules:/app/node_modules/
   # 文件末尾的volumes定义
   volumes:
     node_modules:
   

   容器会直接使用镜像中已安装的依赖，启动时即可找到webpack。

2. 重新安装依赖到卷中
   若需要保留node_modules卷，先删除现有卷并修改启动命令：

   # 删除现有node_modules卷（卷名为项目目录名_node_modules）
   docker volume rm $(basename $(pwd))_node_modules
   

   修改docker-compose.yml的front服务，添加启动命令：

   services: 
     front: 
       # 其他配置不变
       command: sh -c "yarn install && yarn start"
   

   第一次启动时会自动安装依赖到卷中，后续启动无需重复执行安装。

用户提供的相关配置与日志 #

Nmap扫描结果（使用network_mode: host时） #

$ sudo nmap localhost
Starting Nmap 7.80 ( https://nmap.org ) at 2023-09-04 20:37 +09
Nmap scan report for localhost (127.0.0.1)
Host is up (0.0000030s latency).
Not shown: 998 closed ports
PORT     STATE SERVICE
631/tcp  open  ipp
5432/tcp open  postgresql

Nmap扫描结果（未配置network_mode时） #

sudo nmap localhost
Starting Nmap 7.80 ( https://nmap.org ) at 2023-09-04 20:39 +09
Nmap scan report for localhost (127.0.0.1)
Host is up (0.0000020s latency).
Not shown: 997 closed ports
PORT     STATE SERVICE
631/tcp  open  ipp
5432/tcp open  postgresql
8000/tcp open  http-alt

此时curl返回：curl: (56) Recv failure: Connection reset by peer

Dockerfile #

FROM node:16.17.0-alpine 

WORKDIR /app

COPY package.json .

RUN yarn 

COPY . .

ENV PORT 8000

EXPOSE $PORT

docker-compose.yml #

version: "3.8"

services: 
  front: 
    build: 
      context: .
      dockerfile: Dockerfile
      args:
        NODE_MAJOR: '16.17.0'
        YARN_VERSION: '1.22.19'
    image: front-dev:1.0.0
    container_name: front-dev
    volumes:
      - .:/app:cached
      - node_modules:/app/node_modules/
    stdin_open: true
    tty: true
    env_file:
      - .env
    ports:
      - "8000:8000"
    environment:
      - NODE_ENV=development
volumes:
  node_modules:

.env文件 #

HOST=127.0.0.1
PORT=8000

API_DOMAIN=

容器启动错误日志 #

front-dev  | /bin/sh: webpack: not found
front-dev  | error Command failed with exit code 127.

手动进入容器运行日志 #

user@user-MS-3B41:~/projects/app/front$ docker compose -f docker-compose.yml --env-file .env up
[+] Running 1/0
 ✔ Container front-dev  Created                                                                                                                                          0.0s 
Attaching to front-dev

yarn run v1.22.19
$ webpack serve --config webpack.config.dev.js
front-dev  | /bin/sh: webpack: not found

front-dev  | error Command failed with exit code 127.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
front-dev exited with code 127
user@user-MS-3B41:~/projects/app/front$ sudo docker images
REPOSITORY      TAG       IMAGE ID       CREATED         SIZE
front-dev   1.0.0     91fca72bf5b5   3 minutes ago   1.7GB
user@user-MS-3B41:~/projects/app/front$ sudo docker run -it 91fca72bf5b5 sh
/app # webpack --version
sh: webpack: not found
/app # yarn -v
1.22.19
/app # node -v
v16.17.0
/app # webpack -v
sh: webpack: not found
/app # yarn start
yarn run v1.22.19
$ webpack serve --config webpack.config.dev.js
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8000/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.17.0.2:8000/
<i> [webpack-dev-server] Content not from webpack is served from '/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
assets by info 29.1 MiB [immutable]
  assets by path *.js 29 MiB
    asset 4a270-vendors.js 26.5 MiB [emitted] [immutable] (name: vendors) (id hint: vendor)
    asset 1008a-front.js 2.37 MiB [emitted] [immutable] (name: front)
    asset 53bf9-runtime.js 53.1 KiB [emitted] [immutable] (name: runtime)
    + 4 assets
  assets by path static/*.otf 105 KiB
    asset static/75351-f314a..otf 32.2 KiB [emitted] [immutable] [from: assets/fonts/HelveticaNeue-Light.otf] (auxiliary name: front)
    asset static/94749-59734..otf 24.4 KiB [emitted] [immutable] [from: assets/fonts/HelveticaNeue-Bold.otf] (auxiliary name: front)
    asset static/68074-a99bc..otf 24.4 KiB [emitted] [immutable] [from: assets/fonts/HelveticaNeue-Medium.otf] (auxiliary name: front)
    asset static/74920-b18c0..otf 23.5 KiB [emitted] [immutable] [from: assets/fonts/HelveticaNeue-Roman.otf] (auxiliary name: front)
assets by path *.css 71.6 KiB
  asset front.css 69.4 KiB [emitted] (name: front)
  asset app_sections_OrgChart_index_tsx.css 2.23 KiB [emitted]
asset index.html 739 bytes [emitted]
Entrypoint front 29 MiB (105 KiB) = 53bf9-runtime.js 53.1 KiB 4a270-vendors.js 26.5 MiB front.css 69.4 KiB 1008a-front.js 2.37 MiB 4 auxiliary assets
webpack compiled successfully in 9613 ms

内容的提问来源于stack exchange，提问作者kvaizer999