이 기사는 지난 번부터 계속

마지막: Django + Vue.js의 개발 환경을 docker-compose로 구축 (1)

지난번에는 Vue 컨테이너를 시작하여 프로젝트를 만들었고 GitHub의 리포지토리 관리를 프런트 엔드(Vue)와 백엔드(Django)로 나누었습니다.

이번에 하고 싶은 일

이번에는 nginx 리버스 프록시를 설정하고 Vue 시작 화면을 보는 곳까지 갑니다.

디렉토리 구조는 마지막 기사을 참조하십시오.

docker-compose.dev.yml의 전체 텍스트는 좀 더 이전 기사을 참조하십시오.

절차

Vue 프로젝트 빌드

docker-compose.dev.yml 편집

app_nginx.conf 편집

1. Vue 프로젝트 빌드

먼저 Vue 프로젝트를 빌드합니다. 아직 아무것도 만들지 않았지만.

$ docker-compose -f docker-compose.dev.yml run vue npm run build

올바르게 빌드되면 Vue 디렉토리에 dist라는 디렉토리가 있습니다.

2. docker-compose.dev.yml 편집

그런 다음 컨테이너의 /frontend에 ./src/frontend를 마운트하도록 docker-compose.dev.yml의 nginx 섹션을 편집합니다.

docker-compose.dev.yml(발췌)

nginx:
  image: nginx:1.17
  restart: unless-stopped
  container_name: nginx
  networks:
    - django_net
  ports:
    - "80:80"
  volumes:
    - ./nginx/conf:/etc/nginx/conf.d
    - ./nginx/uwsgi_params:/etc/nginx/uwsgi_params
    - ./static:/static
    - ./src/frontend:/frontend   # 追加
  depends_on:
    - python

3. app_nginx.conf 편집

마지막으로 nginx를 다음과 같이 설정합니다.

./nginx/conf/app_nginx.conf

upstream django {
  ip_hash;
  server python:8001;  # uWSGI で Django と nginx とが通信するためのポート
  server vue:3000;     # Vue と nginx とが通信するためのポート  # 追加
}

server {
  listen      80;      # 待ち受けポート
  server_name 127.0.0.1;
  charset     utf-8;

  location /static {
    alias /static;
  }

  client_max_body_size 75M;

  location / {            # 追加
    root /frontend/dist;  # 追加
  }                       # 追加

  location /apiv1/ {                      # 追加
    uwsgi_pass  django;                   # 追加
    include     /etc/nginx/uwsgi_params;  # 追加
  }

  location /admin/ {                      # 追加
    uwsgi_pass  django;                   # 追加
    include     /etc/nginx/uwsgi_params;  # 追加
  }                                       # 追加
}                                         # 追加

server_tokens off;

즉,
- /에 대한 액세스는 /frontend/dist로 라우팅
- /static에 대한 액세스는 ./static로 라우팅
- /apiv1 및 /admin에 대한 액세스는 uwsgi를 통해 Django로 라우팅
합니다.

덧붙여서, ngnix의 대기 포트가 80번으로 되어 있는 이유는 내가 Mac의 VirtualBox에서 Ubuntu Server를 실행하고 있고 호스트의 8081번과 게스트의 80번을 연결하고 있기 때문입니다. 그래서 Mac 브라우저에서 htp://127.0.0.1:8081/에 액세스하면 개발 중인 화면을 볼 수 있다는 이유.
관련: 이제 VirtualBox 설정으로 고민하지 않는다. 그래, Vagrant 그럼 😏

동작 확인

이상을 설정해, 컨테이너를 재기동해 톱 페이지에 액세스 하면, 무사히 Vue 의 스타트 화면을 볼 수 있었습니다.