Estoy tratando de dockerizar una configuración repetitiva de Vite React-Typescript, pero no puedo conectarme al contenedor.
Instalado repetitivo 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"] Comando para ejecutar el contenedor docker en modo separado y abrir el puerto de desarrollo local 3000 en el host: docker run -d -p 3000:3000 vite
La instancia vite parece estar funcionando bien dentro del contenedor (salida de registros de la ventana acoplable):
> 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. Sin embargo, cuando navego a http://localhost:3000/ dentro de Chrome. Veo un error que indica The connection was reset .
¡Cualquier ayuda para resolver este problema sería muy apreciada!
Resulta que necesitaba configurar host para algo que no sea localhost .
Dentro 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()], })Resuelve el problema.
en script de uso de paquete.json
"dev": "vite --host"ejemplo:
"scripts": { "dev": "vite --host", "build": "tsc && vite build", "serve": "vite preview" }, o ejecutar con vite --host