使用 Vite 发布 Docker 化 React 应用程序

Question

我创建了一个 React 应用程序，并且在我的计算机上正常运行。 然后我对它进行了 Docker 化以在服务器上运行它。但是，我在这方面遇到了问题：

(!) 无法从 rollupOptions 或 html 文件自动确定入口点，并且没有显式的 OptimizeDeps.include 模式。跳过依赖预捆绑。

这是 docker 文件： # 使用官方 Node.js 镜像作为基础镜像 来自节点：18-alpine

# Set the working directory inside the container
WORKDIR /app

# Add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

     # Install and cache app dependencies
    COPY package.json /app/package.json
    RUN npm install
    RUN npm install @vue/[email protected] -g

    # Start app
    CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
    here is the vite.config.js file :
    export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
         build: {
            rollupOptions: {
              input: {
                main: resolve(__dirname, 'index.html'),
               }
           }
         }
         })

我创建了一个 React 应用程序，并且在我的计算机上正常运行。 然后我对它进行了 Docker 化以在服务器上运行它。但是，我在这方面遇到了问题：

(!) 无法从 rollupOptions 或 html 文件自动确定入口点，并且没有显式的 OptimizeDeps.include 模式。跳过依赖预捆绑。

Answer 1

在进行 Docker 化时，包含 React（或任何前端）应用程序的构建步骤通常是一个很好的做法。

FROM node:21-slim
WORKDIR /react-app
COPY package.json .
RUN npm install
COPY src/ .
COPY . .
RUN npm install -g live-server
RUN npm run build
EXPOSE 8080
CMD ["live-server", "dist"]

您可以为您的 Vite + React 应用程序尝试这个 Dockerfile 并尝试重建镜像吗？另请确保将不相关的文件和目录添加到您的

.dockerignore

文件中。

构建形象：

docker build . -t react-app

运行容器：

docker run --name react-app-c -p 9000:8080 react-app

请告诉我更多详情。