无法 Dockerize Vite React-Typescript 项目
Unable to Dockerize Vite React-Typescript Project
我正在尝试 docker 化 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
。
如果能帮助解决这个问题,我们将不胜感激!
事实证明,我需要将 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()],
})
问题已解决。
在package.json中使用脚本
"dev": "vite --host"
示例:
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"serve": "vite preview"
},
或运行与vite --host
我正在尝试 docker 化 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
。
如果能帮助解决这个问题,我们将不胜感激!
事实证明,我需要将 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()],
})
问题已解决。
在package.json中使用脚本
"dev": "vite --host"
示例:
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"serve": "vite preview"
},
或运行与vite --host