Vite+React+Docker：无法在容器中工作

Question

我正在使用 vite 和 YARN 编写一个标准的 React 应用程序。我是新来的...

包.json

{
  "name": "bpm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "vite": "^3.1.0"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  server: {host:'0.0.0.0', port:8080},
  plugins: [react()]
})

当我直接在 wsl (ubuntu) 中运行它时，使用yarn dev它效果很好。我可以将浏览器指向http://localhost:8080并且我的应用程序运行没有问题。

我还有一个以正常方式构建的基本 dockerfile：

from node:alpine3.15
workdir /app
copy package.json /app/package.json
run yarn
copy src /app/src
copy public /app/public
copy vite.config.js /app/
cmd ["yarn", "dev", "--debug"]

但是，当我在 wsl 中运行它时：

from node:alpine3.15
workdir /app
copy package.json /app/package.json
run yarn
copy src /app/src
copy public /app/public
copy vite.config.js /app/
cmd ["yarn", "dev", "--debug"]

该应用程序不再有效。

“不再有效”是什么意思？嗯，这就是有趣的地方。当应用程序启动时，调试输出显示 vite 已解决其所有依赖项，因此 vite 似乎正在工作，它在 stdout 上报告没有错误，并报告其端口绑定。但是，当我访问应用程序根目录时：http://localhost:8080我收到 404。

如果输入 URI，我就可以访问应用程序中的文件：curl http://localhost:8080/src/main.jsx返回适当的源代码。所以，这不是 docker 网络问题。

如果我导航到http://localhost:8080/index.html该页面，并且网络选项卡显示没有问题，但控制台报告错误：

@vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Toolbar.jsx:6:11

Toolbar.jsx我的组件文件在哪里。

以防万一，我阅读了文档并尝试添加：

docker run -it --rm -p 8080:8080 bpm

对于 vite 服务器配置，它没有帮助（令人惊讶）。

关于这个主题似乎还有一些其他问题（此处和此处），但这些问题和答案似乎并未涵盖我所看到的实际行为，尽管我已阅读它们并应用了它们的解决方案，但它们没有帮助。

我还尝试了不同的节点基础容器和不同版本的节点。似乎没有什么区别。

整个晚上我一直在努力反对这个问题，但现在越来越烦人了。任何见解将不胜感激。

笔记

我可以vite build在 nginx 中提供该应用程序并提供服务，并且它可以工作，但这在开发过程中确实没有帮助。

Answer 1

我重现了同样的错误。您必须在 vite 配置中将host 设置为 true，并且必须复制 dockerfile 中的所有文件，包括 src 文件夹内部和外部的文件，index.html 位于 src 文件夹外部，并且您不复制它

与使用 vite 的 CRA 相比，您的 index.html 必须位于开发模式下的根目录中。如果你想从公共目录提供服务，你必须为此添加一些中间件，但这更像是一种解决方法，我不建议你这样做，因为公共目录用于像 robots.txt 文件这样的资产......

https://vitejs.dev/guide/assets.html#the-public-directory

-vite配置文件

export default defineConfig({
 plugins: [react()],
 server: {
  watch: {
   usePolling: true,
  },
  host: true, // Here
  strictPort: true,
  port: 8080, 
}

-Dockerfile 文件

FROM node:alpine
WORKDIR /app
COPY package.json .
RUN yarn
# copy all files
COPY . .
cmd ["yarn", "dev", "--debug"]

如果您复制所有内容（COPY . .），请不要忘记添加 .dockerignore 文件

.git
.vscode
.dockerignore
.gitignore
.env
config
build
node_modules
docker-compose.yaml
Dockerfile
README.md

尝试再次构建您的映像并运行，让我知道它是否解决了您的问题