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

Question

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

package.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 中运行它时：

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

该应用程序不再工作。

“不再有效”是什么意思？嗯，这就是有趣的地方。当应用程序启动时，调试输出显示 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

位于我的组件文件中。

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

origin: 'http://127.0.0.1:8080'

对于 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

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

Answer 2

我从一些开源项目中学到的东西 从“vite”导入{defineConfig} 从'@vitejs/plugin-react'导入反应

 // https://vitejs.dev/config/
   export default defineConfig({
  plugins: [react()],
  server: {
    // watch: {
    //  usePolling: true,
    // },
    host: true, // Here
    // strictPort: true,
    // port: 5000
  }
})

如果你想在 vite 默认端口（5173）上运行你的应用程序，你必须设置 host:true 如果你想在其他端口上运行你的应用程序，你可以在服务器对象下提及，因为我已经给出了参考代码