docker 无法停靠Vite React-Typescript项目

tct7dpnv 于 2022-11-22 发布在 Docker

关注(0)|答案(3)|浏览(154)

我正在尝试停靠Vite React-Typescript样板设置，但无法连接到容器。
已安装的vite-react-typescript样板文件：
npm init vite@latest vite-docker-demo -- --template react-ts

停靠文件

# 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容器并打开主机上的本地dev端口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。
任何帮助解决这个问题将不胜感激！

docker

来源：https://stackoverflow.com/questions/68595151/unable-to-dockerize-vite-react-typescript-project

3条答案

按热度按时间

xkrw2x1b1#

原来我需要将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()],
})

解决问题。

赞(0）回复(0）举报 2022-11-22

iqxoj9l92#

在package.json中使用脚本

"dev": "vite --host"

例如：

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

或使用vite --host运行

赞(0）回复(0）举报 2022-11-22

myss37ts3#

要使用热重新加载，以便实际反映更改，请执行以下操作：

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,
      },
    },
  });
};

赞(0）回复(0）举报 2022-11-22

我来回答

docker 无法停靠Vite React-Typescript项目

3条答案

相关问题

热门标签

最新问答