无法将 docker 端口从 vite 应用映射到本地

Question

我正在尝试 dockerize 一个 scrapy vite React ts 应用程序。

\n

FROM node:15.12.0\n\nWORKDIR /app\n\nCOPY entrypoint.sh /entrypoint.sh\nRUN chmod +x /entrypoint.sh\n\nENTRYPOINT ["/entrypoint.sh"]\n\nADD . .\n\nRUN npm install\nEXPOSE 3000\nCMD ["npm", "run", "dev"]\n

\n

Docker 组成：

\n

version: '3.8'\n\nservices:\n  dev:\n    build: \n      context: ./\n      dockerfile: Dockerfile\n    volumes:\n      - ./:/app\n    ports:\n      - '3000:3000'\n

\n

我正在使用 docker up --build\nApp 启动并移植，因为 docker ps 显示：\nf5e840a7fec3 leoapp/leo "docker-entrypoint.s\xe2\x80\xa6" 4 分钟前 Up 4 分钟 0.0.0.0 ：3000->3000/tcp Sad_gates

\n

但我无法在浏览器上访问端口 3000。我在这里做错了什么。\nVite 在内部使用 esbuild。我们需要在启动时重建容器架构的esbuild，使其正常运行。

\n

Contents of: entrypoint.sh\n\n#!/bin/sh\n\nnpm rebuild esbuild\n\nexec "$@"\nDockerfile\n\n# ...\n\nCOPY entrypoint.sh /entrypoint.sh\nRUN chmod +x /entrypoint.sh\n\nENTRYPOINT ["/entrypoint.sh"]\n\n# ...\n

\n

当我访问端口 3000 时，我发现无法访问此站点，但是如果正常运行，我可以运行该应用程序，即npm run dev

\n

Answer 1

在您的 vite.config 文件中，您需要设置host: true. 因此，您的文件应类似于以下内容：

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the Docker Container port mapping to work
    strictPort: true,
    port: 3000, // replace this port with any number you want
  }, 
})