React表情包生成器Docker部署后无法访问问题求助

本地环境下，React表情包生成器应用运行正常，但通过Docker容器部署后，访问localhost:3000无内容。

项目结构 #

-dist
 -assets
 -index.html
 -vite.svg

-Dockerfile
-index.html
-node_modules
-package.json
-public
 -vite.svg
-src
 -App.jsx
 -assets
 -components
 -index.css
 -main.jsx
-vite.config.js

package.json 内容 #

{
  "name": "meme-generator",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port=3000",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "html2canvas": "^1.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "use-react-screenshot": "^3.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

Dockerfile 内容 #

FROM node:18-alpine as builder

WORKDIR memegen

COPY ./ ./
 
RUN npm install --force

EXPOSE 3000

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

操作步骤与现象 #

• 构建镜像：docker build -t imagegene .（构建成功）
• 运行容器：docker run -p 3000:3000 imagegene
• 容器日志输出：

meme-generator@0.0.0 dev
vite --port=3000


VITE v4.3.9  ready in 546 ms

➜  Local:   http://localhost:3000/
➜  Network: use --host to expose

• 问题：访问localhost:3000时页面无内容

解决方案 #

问题根源是Vite开发服务器默认仅监听容器内的127.0.0.1，宿主机无法直接访问该地址。需配置Vite监听0.0.0.0，允许外部访问，以下三种方式任选其一：

方式1：修改package.json的dev脚本 #

将scripts中的dev命令改为：

"dev": "vite --port=3000 --host"

方式2：运行容器时传递参数 #

无需修改项目文件，直接在运行容器时追加参数：

docker run -p 3000:3000 imagegene npm run dev -- --host

方式3：修改Dockerfile的CMD命令 #

将Dockerfile中的CMD改为：

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

修改后重新构建镜像（方式1、3需要）或直接运行容器（方式2），即可通过localhost:3000正常访问应用。

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