Dockerize Nestjs/VueJS Application

Question

We are trying to dockerize a NestJS REST API and a VueJS application.

For this there is a docker-compose.yaml and two Dockerfiles:

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"]

In the VueJS application there is a reverse proxy that redirects all requests against /api to the API. The VueJS application is served via nginx. Therefore, there is also an nginx.config here:

default.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;
    }
}

Both containers also start, but the requests against /api/login, for example, are not redirected correctly and you get a 404 error. There have already been various attempts to make adjustments to the nginx.config, the reverse proxy of VueJS, URLs, but so far we have not found a solution.

The complete changes can also be found on GitHub: https://github.com/Foxdeck/fox-deck/pull/47

Answer 1

You need to put location /api above location / in your nginx conf.