Vite + React Docker答案

【问题标题】：Vite + React DockerVite + React Docker
【发布时间】：2022-10-20 20:30:27
【问题描述】：

我正在尝试使用 docker 容器运行我的 vite+react 应用程序，代码运行良好，但不幸的是，它没有在 localhost 3000 中打开

DockerFile

FROM node:18-alpine

EXPOSE 3000

WORKDIR /react-vite-app

COPY package.json .

RUN yarn install

COPY . .

CMD [ "yarn","build"]

码头工人-compose.yml

version: "3.8"
services:
    reactapp:
      build: ./dir
      container_name: react_vite_app
      ports:
        - '3000:3000'

是否缺少某些东西，如果有问题，请帮助我解决此问题

【问题讨论】：

您要连接到哪个 URL，遇到什么错误？应用程序如何设置其网络监听器；你能edit这个问题也包括所需的应用程序代码吗？（胡乱猜测：它只监听 127.0.0.1 容器私有 localhost 接口，您需要将其设置为监听 0.0.0.0。）
vite 默认监听 localhost:5173。如果您在 docker 中运行它，您可能还需要 --host 选项以使其侦听 localhost 之外的连接。
完全相同的问题，我在这里找到解决方案：stackoverflow.com/a/68595302/16795034

标签： javascript reactjs docker docker-compose vite

【解决方案1】：

我的设置

Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY . /app

ENV NODE_ENV=production

RUN npm install serve -g

RUN npm install

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "serve"]

包.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite -p 3000",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "serve": "serve -s dist -p 3000"
  },
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  }
}

【讨论】：

不要在生产中使用 preview 命令，因为显然不推荐，它仅用于预览。我最好推荐使用 vercel 创建的 serve 包。

【解决方案2】：

我在相同的配置中遇到了完全相同的问题，我在这里找到了解决方案：

https://stackoverflow.com/a/68595302/16795034

【讨论】：