[英]Unable to Dockerize Vite React-Typescript Project
I am trying to dockerize a Vite React-Typescript boilerplate setup, but I unable to connect to the container.我正在尝试对 Vite React-Typescript 样板设置进行 dockerize,但我无法连接到容器。
Installed vite-react-typescript boilerplate:安装的 vite-react-typescript 样板文件:
npm init vite@latest vite-docker-demo -- --template react-ts
Dockerfile 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"]
Command to run docker container in detached mode and open local dev port 3000 on host: docker run -d -p 3000:3000 vite
在分离模式下运行 docker 容器并在主机上打开本地开发端口 3000 的命令:
docker run -d -p 3000:3000 vite
The vite instance seems to be running just fine within the container (docker logs output): 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.
However, when I navigate to http://localhost:3000/
within Chrome.但是,当我在 Chrome 中导航到
http://localhost:3000/
时。 I see an error indicating The connection was reset
.我看到一条错误消息,指示
The connection was reset
。
Any help resolving this issue would be greatly appreciated!解决此问题的任何帮助将不胜感激!
It turns out that I needed to configure host
to something other than localhost
.事实证明,我需要将
host
配置为localhost
以外的其他内容。
Within vite.config.ts
:在
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()],
})
Resolves the issue.解决问题。
in package.json use script在 package.json 中使用脚本
"dev": "vite --host"
To use hot reload, so the changes actually get reflected:要使用热重载,所以更改实际上得到反映:
export default (conf: any) => {
return defineConfig({
server: {
host: "0.0.0.0",
hmr: {
clientPort: ENV_VARIABLES.OUTER_PORT_FRONTEND,
},
port: ENV_VARIABLES.INNER_PORT_FRONTEND_DEV,
watch: {
usePolling: true,
},
},
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.