Dockerize Nestjs/VueJS 应用程序

Question

我们正在尝试对 NestJS REST API 和 VueJS 应用程序进行 docker 化。

为此，有一个 docker-compose.yaml 和两个 Dockerfile：

docker-compose.yml：

version: '3.8'

services:
  fox-deck-app:
    build:
      context: .
      dockerfile: app.Dockerfile
    ports:
      - "80:80"
    networks:
      - fox-deck-network
    depends_on:
      - fox-deck-api

  fox-deck-api:
    build:
      context: .
      dockerfile: api.Dockerfile
    ports:
      - "3000:3000"
    networks:
      - fox-deck-network

networks:
  fox-deck-network:
    driver: bridge

app.Dockerfile：

FROM node:20.11.1-alpine3.19 as build-stage
WORKDIR /app
COPY apps/fox-deck-app/package*.json ./
RUN npm install --prefer-offline --no-audit --progress=false
COPY apps/fox-deck-app/ .
RUN npm run build
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY apps/fox-deck-app/default.conf /etc/nginx/conf.d/
EXPOSE 80

api.Dockerfile：

FROM node:20.11.1-alpine3.19 as api-stage
WORKDIR /usr/src/app
COPY apps/fox-deck-api/package*.json ./
RUN npm ci --prefer-offline --no-audit --progress=false
COPY apps/fox-deck-api/ .
COPY apps/fox-deck-api/.env.example /usr/src/app/.env
RUN npm rebuild  # Rebuilds all native dependencies, used because we use c++ libraries
RUN npm run prisma:migrate
EXPOSE 3000
CMD ["npm", "run", "start:dev"]

在 VueJS 应用程序中，有一个反向代理，它将针对

/api

的所有请求重定向到 API。 VueJS 应用程序通过 nginx 提供服务。因此，这里还有一个nginx.config：

默认.conf：

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://fox-deck-api:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

两个容器也会启动，但例如针对

/api/login

的请求未正确重定向，您会收到 404 错误。已经有各种尝试对VueJS的反向代理nginx.config、URL进行调整，但到目前为止我们还没有找到解决方案。

完整的更改也可以在 GitHub 上找到：https://github.com/Foxdeck/fox-deck/pull/47

Answer 1

您需要将 location /api 放在 nginx 配置中的 location / 之上。