代码运行良好，但在Local主机上没有打开：3000

Question

FROM node:18-alpine

EXPOSE 3000

WORKDIR /react-vite-app

COPY package.json .

RUN yarn install

COPY . .

CMD [ "yarn","build"]

docker-compose.yml

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

是缺少的东西，如果出了问题，请帮助我解决此问题。

vite配置中的set端口至3000

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [ your plugins here ],
})

也像这样的docker

FROM node:18-alpine

WORKDIR /react-vite-app

EXPOSE 3000

COPY package.json package-lock.json ./

RUN npm install --silent

COPY . ./

CMD ["npm", "run", "dev"]

Answer 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"]

package.json

Answer 2

{
  "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": {
   ...
  }
}

不要忘记在

host

文件中设置

vite.config.js

，因为打开浏览器时可能会遇到连接重置问题

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  preview: {
    host: '0.0.0.0',
    port: 8000,
  },
})

dev：

npm run dev

，听力端口：3000

Answer 3

npm run build

npm run preview

，听力端口：8000

默认情况下，React Vite应用程序仅在Docker容器的内部网络内提供。要将其暴露于我们本地计算机的端口，我们需要在vite.config.tsfile.

内部使用服务器配置。

host: true

我看到了很多答案，但我仍然分享了我为之使用的多种解决方案。

I选择使用

serve

和docker多阶段构建

Answer 4

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), svgr()],
    server: {
        host: true,
    },
    build: {
        outDir: 'build',
    },
});