Nginx 를 이용한 Django 배포 (feat. Docker)

runserver로만 장고 서버를 구동하고 있었는데, 성능이나 안정성 이슈가 있다고 한다. django의 runserver 커맨드는 주로 테스트용으로 사용되며, production 용도로는 WAS(Nginx, gunicorn)과 연동하여 배포하는 것이 일반적인 방법이다. 따라서 프로젝트를 진행하면서 django에 웹 서버인 nginx를 연동하는 과정이 있었다.

Docker를 이용하여 nginx를 쉽게 연동하는 방법이 있어 소개해보자 한다.

기존 장고 프로젝트가 있는 상태를 가정하고 진행하겠다. 우분투 기준으로 설명하려한다.

1. 가상환경으로 들어가서 gunicorn을 설치한다. (무거운 uWSGI 대신 gunicorn으로 nginx와 연결하였다)

   • 참고로 uWSGI나 gunicorn같은 웹서버를 쓸 때, static file을 모으지 않으면 css가 적용되지 않은 상태로 나온다. 해결을 위해서,

     1. settings.py에 아래 코드 추가

        STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

     2. collectstatic 명령어를 통해 static file을 모아줌

        python manage.py collectstatic

2. source venv/bin/activate pip install gunicorn

3. 도커 설치

   • 설치에 필요한 패키지들 설치
   • sudo apt-get update && sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ software-properties-common
   • ppa관련 에러가 뜬다면 아래 스크립트 실행
   • sudo add-apt-repository -r ppa:jonathonf/python-3.6 sudo apt update
   • 도커 설치
   • curl -fsSL https://get.docker.com/ | sudo sh
   • 설치된 도커는 아래 스크립트로 확인할 수 있다.permission denied가 난다면, /var/run/docker.sock 파일의 권한을 변경
   • sudo chmod 666 /var/run/docker.sock
   • docker version

4. 프로젝트의 루트 디렉토리에 Dockerfile 이라는 파일을 추가해준다. 내용은 아래와 같다.

   • 파이썬 버전에 맞게 첫 줄을 작성해주고
   • 도커 내에서 /code 라는 이름의 폴더를 생성
   • 로컬의 requirements.txt 파일을 mount하고 패키지를 설치하는 과정
   • 현재 로컬의 모든 파일, 폴더를 /code/ 로 마운트

5. FROM python:3.6 RUN mkdir /code WORKDIR /code ADD requirements.txt /code/ RUN pip install -r requirements.txt ADD . /code/

6. nginx 폴더를 만들고, nginx.conf 파일 생성server_name에는 도메인 주소를 넣으면 된다. (ex> ec2-54-180-94-185.ap-northeast-2.compute.amazonaws.com)

7. server { location / { proxy_pass http://web:8000/; } location /static/ { alias /static/; } listen 80; server_name <도메인 주소>; }

8. 프로젝트의 루트 디렉토리에 docker-compose.yml 파일 생성<프로젝트이름> 는 wsgi.py가 속한 폴더의 이름 (커스텀하지 않는다면 프로젝트 이름)

9. depends_on을 통해 순서가 있게 서비스가 실행될 것이다. (web -> nginx)

10. version: '3' services: nginx: image: nginx:latest ports: - '80:80' volumes: - .:/code - ./nginx:/etc/nginx/conf.d - ./staticfiles:/static depends_on: - web web: build: context: . dockerfile: Dockerfile command: gunicorn <프로젝트이름>.wsgi:application --bind 0.0.0.0:8000 volumes: - .:/code - ./staticfiles:/staticfiles expose: - '8000'

11. settings.py의 ALLOWED_HOSTS에 'web'을 추가

12. ALLOWED_HOSTS = ['web']

13. 도커를 실행하고, 브라우저에서 도메인명을 입력하여 정상 작동하는지 확인

    • docker-compose 설치

    sudo pip install docker-compose

    docker-compose up --build

    shell을 꺼도 작동을 하도록 백그라운드 실행을 원한다면 -d 옵션을 추가하면 된다.

14. docker-compose up --build -d

캐싱 전략

• cacheFirst (캐시를 네트워크 보다 먼저 요청할 것인지)

  • offline 페이지가 먼저 보여질 때 유리

    

• cacheOnly (캐시만 볼 것인지)

  • static file가 해당

    

• networkFirst (캐시보다 네트워크를 먼저 요청할 것인지)

  • UX에 좋지 않음

    

• networkOnly (네트워크만 요청할 것인지)

  • 캐시가 필요없는 GET 메소드가 아닌 method

    

• staleWhileRevalidate (캐시 먼저, 그 다음 네트워크에서 요청된 캐시 반환)

  • 주로 사용되는 방식

    

• Cache then network (캐시, 네트워크에 요청을 동시에 하고, 캐시 data 먼저 표시, 이후 네트워크 data 표시)

  • workbox에는 없는 전략, networkFirst보다는 UX에 좋음

    

나는 PWA 웹앱 개발을 할 때 크롬 카나리아를 유용하게 사용하는데 모르는 사람들이 많을 것 같아 포스팅한다.

https://www.google.com/intl/ko/chrome/canary/

Chrome 카나리아는 개발자용 크롬 브라우저라고 생각하면 좋다. 

구글에서는 웹의 최첨단 기능을 포함한 브라우저라고 광고하고 있다..
실제로 Portals( https://web.dev/hands-on-portals/ ) 등 구글에서 새롭게 나오는 기술을 테스트해볼 수 있는 유일한 브라우저이긴 하다. 

PWA 개발에 Chrome 카나리아를 쓰면 좋은 이유는,

다른 브라우저와 달리 일반적인 검색 용도 등으로 쓰일 일이 없어서

다른 도메인 사이트들의 service worker와 헷갈릴 일이 없다는 게 장점이다. 그뿐인 것 같긴한데.. 나름 유용. 

workbox를 이용하여 PWA의 캐싱 방식을 직접 조작하려고 하다가 마주친 에러이다.

workbox wizard --injectManifest

위 명령어를 이용하여 workbox-config.js 파일을 생성한 후,

서비스 워커 파일을 생성하기 위해

workbox injectManifest workbox-config.js

위 명령어를 실행하려고 할 때, 잘못된 swSrc 주소나, 해당 주소의 파일에 제대로 된 값이 입력되어 있지 않으면 에러가 뜬다.

해결법

1. workbox-config.js 중 swSrc를 적당한 주소의 파일로 수정

module.exports = {
    globDirectory: 'dist/',
    globPatterns: ['**/*.{css,ico,png,html,js,json,txt}'],
    swDest: 'dist/sw.js',
    swSrc: 'sw-base.js',
};

2. sw-base.js 파일 수정

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
);

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

precacheAndRoute 안에 self.__WB_MANIFEST 이 들어가는 것을 확인하면 제대로 명령어가 실행된다.

node.js, npm 설치

apt 패키지 매니저를 이용하여 설치할 수 있다.

sudo apt-get update
sudo apt-get install nodejs

npm을 설치하려면

sudo apt-get install npm

node.js 업데이트

1. node -v
   • node.js 버전 확인
2. sudo npm install -g n
   • n 은 node.js 버전관리 플러그인이다.
3. sudo n lts
   • n latest (최신 버전)
   • n stable (안정화 버전)
   • n lts (lts 버전)

npm 최신 버전 설치

sudo npm i -g npm

Linux에서 파일 실행

name라는 이름의 파일이라면

./name

이렇게 치면 실행된다...

허무하니까 리눅스에서 현재 작업 중인 작업 리스트 확인하는 방법도 같이 적어 놓겠다.

Linux 작업 리스트 확인

ps -ef | grep (파일 이름)

예시

ps -ef | grep manage.py

백그라운드로 돌아가고 있는 프로세스를 확인하는 데에 유용하게 쓰인다.