尝试为前端vite应用添加docker图像

Question

所以我在我的容器内工作后端和db图像，我现在正试图与前端做同样的事情，但我有一个更加困难的时间能够查看我的应用程序。我的印象是，我不得不复制在运行vite构建后创建的dist文件夹。我从我的前端dockerfile创建了一个图像，并更新了我的docker-compose文件，以包括前端服务，但当我导航到3300时，我得到了一个404。我的服务器在3300上运行，当我通常运行vite时，它在3000上运行一个开发服务器。我也刚开始使用vite，这让我有点困惑。我试过搞乱端口和暴露，但没有运气。将后端和数据库容器化的时候轻松多了。非常感谢你的帮助!

Dockerfile:

FROM node:16-alpine
RUN mkdir -p /user/src/app 
WORKDIR /user/src/app
COPY ["package.json", "package-lock.json", "./"] /user/src/app/
RUN npm ci 
COPY . .
EXPOSE 3300
CMD [ "npm", "run", "server:run" ]

Dockerfile-frontend:

FROM node:16-alpine
WORKDIR /user/src/app
COPY . .
RUN npm ci
RUN npm run app:build
COPY dist /user/src/app
EXPOSE 3300
CMD ["npm", "run", "app:dev"]

Docker-compose:

version: '3.9'
services:
#mongo db service
mongodb:
container_name: db_container
image: mongo:latest
env_file:
- ./.env
restart: always
ports:
- $MONGODB_DOCKER_PORT:$MONGODB_DOCKER_PORT
volumes:
- ./mongodb:/data/db
#node app service
app:
container_name: node_container
image: sherlogs_app
build: .
env_file:
- ./.env
ports: 
- $NODE_LOCAL_PORT:$NODE_LOCAL_PORT
volumes:
- .:/user/src/app
stdin_open: true
tty: true
depends_on:
- mongodb
# frontend container
frontend:
container_name: frontend_container
image: sherlogs/frontend-container
build: .
env_file:
- ./.env
ports:
- $FRONTEND_LOCAL_PORT:$FRONTEND_LOCAL_PORT
volumes:
- .:/user/src/app
depends_on:
- mongodb
- app

volumes:
mongodb: {}

Answer 1

在vite.config.js文件中，确保添加了host: true。查看https://vitejs.dev/config/server-options.html