无法 Dockerize Vite React-Typescript 项目答案

【问题标题】：Unable to Dockerize Vite React-Typescript Project无法 Dockerize Vite React-Typescript 项目
【发布时间】：2021-10-06 05:54:38
【问题描述】：

我正在尝试对接 Vite React-Typescript 样板设置，但我无法连接到容器。

已安装 vite-react-typescript 样板：

npm init vite@latest vite-docker-demo -- --template react-ts

Dockerfile

# Declare the base image
FROM node:lts-alpine3.14
# Build step
# 1. copy package.json and package-lock.json to /app dir
RUN mkdir /app
COPY package*.json /app
# 2. Change working directory to newly created app dir
WORKDIR /app
# 3 . Install dependencies
RUN npm ci
# 4. Copy the source code to /app dir
COPY . .
# 5. Expose port 3000 on the container
EXPOSE 3000
# 6. Run the app
CMD ["npm", "run", "dev"]

以分离模式运行 docker 容器并在主机上打开本地开发端口 3000 的命令： docker run -d -p 3000:3000 vite

vite 实例似乎在容器中运行良好（docker 日志输出）：

> vite-docker@0.0.0 dev /app
> vite

Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 244ms.

但是，当我在 Chrome 中导航到 http://localhost:3000/ 时。我看到一个错误提示 The connection was reset。

任何解决此问题的帮助将不胜感激！

【问题讨论】：

标签： node.js reactjs typescript docker vite

【解决方案1】：

在 package.json 中使用脚本

"dev": "vite --host"

示例：

  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },

或使用vite --host运行

【讨论】：

【解决方案2】：

事实证明，我需要将host 配置为localhost 以外的其他内容。

vite.config.ts内：

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: [reactRefresh()],
})

解决了问题。

【讨论】：