Deployment of a vue3 app from behind an nginx-proxy using docker compose

Question

I have small app with a Django backend and vue3 front end. I am managing it all with docker compose

I have both the backend and frontend services behind an nginx-proxy service exposed to the web. This has worked great during development but now I want to deploy it and I have run into issues.

I have a docker-compose file like this:

version: "3.9"

services:
  #django
  backend:
    container_name: backend
    build: ./backend
    command: gunicorn myapp.wsgi:application --bind 0.0.0.0:8000
    stdin_open: true # docker run -i
    restart: always

    volumes:
      - ./backend/:/code/
      - static_volume:/code/staticfiles
      - media_volume:/code/mediafiles
    expose:
      - 8000

    environment:
      - VIRTUAL_HOST=admin.mysite.com
      - VIRTUAL_PORT=8000
      - LETSENCRYPT_HOST=admin.mysite.com
    env_file:
      - ./env/.env.prod
  
  #vue3
  frontend:
    container_name: frontend
    build: 
      context: ./frontend
      dockerfile: dockerfiles/Prod.Dockerfile
    restart: always
    volumes:
      - ./frontend/:/dist/ #added this volume as yarn build was not creating the dir
      - ./frontend/:/code/
      - /code/node_modules
    environment:
      - VIRTUAL_HOST=mysite.com
      - VIRTUAL_PORT=8080
      - LETSENCRYPT_HOST=mysite.com  
    expose:
      - 8080

  nginx-proxy:
    container_name: nginx-proxy
    build: nginx
    restart: always
    dns: 
      - 8.8.8.8 # added due to docker resolver issues
    #network_mode: bridge
    ports:
      - 443:443
      - 80:80
    environment:
       - RESOLVERS=8.8.8.8 # added due to docker resolver issues
    volumes:
      - static_volume:/code/staticfiles
      - media_volume:/code/mediafiles
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
      - /var/run/docker.sock:/tmp/docker.sock:ro
    depends_on:
      - backend
      - frontend

  acme-companion:
    image: nginxproxy/acme-companion
    container_name: nginx-proxy-acme
    restart: always
    env_file:
      - ./env/.env.proxy-companion
    volumes_from:
      - nginx-proxy
    volumes:
      - certs:/etc/nginx/certs:rw
      - acme:/etc/acme.sh
      - /var/run/docker.sock:/var/run/docker.sock:ro

    depends_on:
      - nginx-proxy

volumes:
  static_volume:
  media_volume:
  certs:
  html:
  vhost:
  acme:

The proxy and django work great. But what I really don't understand how to deploy the vue3 app in this setup.

Do I need to create and entire seperate nginx service for my vue3 app? I thought it was a bad idea to run multple nginx services in a since docker network.
If not "1" how do I get my proxy to serve my dist?

My vue3 dockerfile is like this:

FROM node:lts-alpine

WORKDIR /code

COPY package*.json /code/

# global cli for managing the vue instance
RUN npm install -g @vue/cli

RUN yarn install

COPY . .

RUN yarn build

I realize this wont actually do anything other than build the image - in a dedicated setup, you would then build an Nginx service from the above.

My confusion is:

How do I pass this vue3 service to my nginx-proxy to serve the dist, or
If I create a second Nginx service how do I have it serve to my proxy (if that makes sense) so they dont get in each other's way or overright each other's configs.

Deployment of a vue3 app from behind an nginx-proxy using docker compose

0 Answers0