Django - Gitlab - Heroku CD/CI 배포 와 Freenorm DNS연결

Django앱을 Gitlab에 올리고, Heroku로 자동 배포하는 방법, 그리고 Freenorm의 무료 DNS를 적용하는 방법을 알아보겠습니다. 순서는 아래와 같습니다.

1. django 앱 생성 (본문은 Django의 사용법을 다루는 글이 아니므로, 기본적인 앱은 만들어져 있어야 합니다.)
2. Heroku repo 생성
3. Gitlab repo 생성
4. CD/CI설정 (Gitlab 추가설정 및 파일 추가 생성)
5. 추가 설정 (오류 점검)
6. 외부DNS(Freenom) 적용

1. Django 앱 생성

기본적인 앱이 구현되어있겠지만, 앱을 배포하기 위해서는 추가적인 라이브러리 설치가 필요합니다. 

pip install gunicorn whitenoise django-herok

# gunicorn: 위에서 설명한 파이썬 HTTP 서버(Python WSGI HTTP Server)입니다.
# whitenoise: 헤로쿠(Heroku)에서 정적 파일(Static files)을 사용하기 위해 필요한 모듈입니다.
# django-heroku: 헤로쿠(Heroku)에 배포하는 django 프로젝트의 각종 설정을 간단하게 해주는 모듈입니다.

 

settings.py에 아래의 내용을 추가해줍니다.

import django_heroku
import dj_database_url

# Add this line
PRODUCTION = os.environ.get('DATABASE_URL') != None

ALLOWED_HOSTS = ['wilky.ga','.herokuapp.com']

MIDDLEWARE = [
    ....중략....
    'whitenoise.middleware.WhiteNoiseMiddleware',
]


if PRODUCTION:
    DATABASES['default'] = dj_database_url.config()

django_heroku.settings(locals())

 

2. Heroku에 앱 생성

터미널에서 아래와 같이 입력하여 heroku에 로그인 후 새로운 앱을 생성합니다. (Heroku CLI는 설치되어 있어야 합니다.)

heroku login # Heroku 로그인
heroku create django-repo  # 앱 생성
heroku git:remote -a django-repo # 저장소를 등록해서 연결합니다.
git remote -v  # 원격 저장소 확인

이렇게 생성 및 연결이 되었다면, 이번엔 Heroku 사이트로 이동하여 몇가지 확인해놓아야 하는 부분을 체크합니다.

(1) App Name 확인: django-repo 라고 만들었습니다.

(2) App URL 확인 : django-repo.herokuapp.com이 됩니다. App의 settings하단에 Domains 섹션에 보시면 URL이 나와있습니다. 또는 Open App으로 직접 이동하여 URL을 확인할 수도 있습니다.

(3) API 키 확인 (내 계정 - Account Settings)

 

 

 

3. Gitlab에 Repository 생성 후 업로드

Gitlab에 Repository를 만들어줍니다. Repository 만드는 방법이나 Git 사용법은 다른 사이트를 참고하시기 바랍니다.

 

git을 이용해 소스코드를 저장해야 하는데, 저장하기전에 .gitignore파일을 아래의 사이트를 이용해 생성해 놓습니다. 

 

그런 다음 git을 시작하고, 코드를 Gitlab에 저장합니다.

# git 시작
git init  

# git 원격저장소 추가
git remote add origin https://gitlab.com/front42/django_blog.git

# 변경/추가/삭제
git add .

# git 커밋
git commit -m "initial commit"

# push
git push origin master
## 요즘은 main으로 되어있는데, 기본값을 설정에서 master로 바꿔서 진행합니다.

 

4. CI/CD를 위한 설정

(1) Gitlab - Heroku 연결

-Settings -> CI/CD에서 Variables를 Expand하여 변수를 추가합니다.

 

만들어야 되는 변수는 HEROKU_APPKEY, HEROKU_APP_HOST, HEROKU_APPNAME입니다. Heroku에서 App생성시 적어두었던 정보를 이용해 변수를 만듭니다. 단, Flags에 Protect variable을 해제해야 실행시 오류가 없습니다.이것으로 Gitlab과 Heroku가 연결이 되었습니다.

 

(2) 추가 파일 생성

라이브러리 설치 및 서비싱을 위한 설정파일들을 생성합니다.

<requirements.txt>

pip freeze > requirements.txt

 

<.gitlab-ci.yml>

stages:
  - test
  - deploy

# Uncomment these lines if you would use tdd using selenium in your project
# UnitTest:
#   image: python:3.6
#   stage: test
#   before_script:
#     - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
#     - echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
#     - pip install -r requirements.txt
#     - python manage.py makemigrations
#     - python manage.py migrate
#     - apt-get update -qq && apt-get install -y -qq unzip
#     - apt-get install -y google-chrome-stable
#     - apt-get install -y xvfb
#     - wget https://chromedriver.storage.googleapis.com/2.32/chromedriver_linux64.zip
#     - unzip chromedriver_linux64.zip
#     - python manage.py collectstatic --no-input
#     - python manage.py runserver 8000 &
#   when: on_success
#   script:
#     - coverage run manage.py test
#     - coverage report -m

Deployment:
  image: ruby:2.6
  stage: deploy
  before_script:
    - gem install dpl
    - wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh
  script:
    - dpl --provider=heroku --app=$HEROKU_APPNAME --api-key=$HEROKU_APIKEY
    - export HEROKU_API_KEY=$HEROKU_APIKEY
    - heroku run --app $HEROKU_APPNAME python manage.py migrate
  environment:
    name: production
    url: $HEROKU_APP_HOST

 

<Procfile>

migrate: bash python manage.py migrate
web: gunicorn my_app_name.wsgi  # my_app자리에 앱 이름을 넣는다.

추가파일을 생성 후 "git push origin master"를 수행하면, 해당 시점부터는 자동으로 Heroku로 배포가 되어, 사이트 확인이 가능해집니다.

 

5. Collectstatic 설정 변경

배포를 하는 과정을 보다보면 collectstatic 부분에서 에러가 나는 모습을 볼 수 있습니다.

이를 해결하기 위해서는 터미널에 아래와 같이 입력해줍니다.

heroku config:set DISABLE_COLLECTSTATIC=1

다른 방법도 여럿 보였지만, 위 방법이 제일 간단하고 정상작동됩니다.

참고로, Database(db.sqlite3)를 못읽어오는 경우도 있었는데, 혹시 다른 폴더 하위에 있다면(예: "db/db.sqlite3") 프로젝트폴더 내 바로 두고 실행하시기 바랍니다.

 

이렇게 하여 Heroku에 직접 소스코드를 push하여 올리지 않고 Gitlab만 관리하더라도 배포가 되는 것을 확인할 수 있습니다.

6. Freenom의 무료 DNS 적용하기

Heroku에서 제공하는 URL이 있긴 하지만, 좀더 우리가 원하는 URL을 적용하기 위해 DNS를 적용하는 방법을 알아보겠습니다. 우선 Freenom으로 가서 원하는 이름의 도메인을 만듭니다. (다른 사이트를 참조하시기 바랍니다.) 우선 만들기만 하고 추가적인 세팅은 잠시 뒤에 하겠습니다.

 

얼마전 Heroku 정책 변경으로 인해 DNS를 변경하기 위해서는 신용카드를 등록해야한다고 합니다. 돈이 나가는 것은 아니고 보안 목적이라고 하니 걱정은 안해도 될 것 같습니다. 우상단의 Account Setting > Billing 메뉴로 진입하여 개인의 신용카드를 등록합니다.

Settings > Domains 섹션에서 "Add domain"버튼을 클릭해줍니다.

그러면 우측에 아래와 같은 화면이 나타나는데, 위의 freenom에서 만들어준 주소를 적어주고, 하단의 Next버튼을 눌러줍니다. 그러면 DNS target이 나타납니다. 이 주소를 메모해서 Freenom에 적용시켜줘야 합니다.

Freenom에 로그인 후 Services > My Domains > Manage Domain > Manage Freenom DNS로 진입한 후,

 

Heroku에서 제공받은 DNS Target의 정보를 붙여넣습니다. 그리고 다른 정보는 아래와 같이 설정합니다.

Name: WWW

Type: CNAME

TTL: 144400

 

이렇게 하면 드디어 내 주소가 반영된 모습을 확인하실 수 있을겁니다.

 

※ 아직 데이터베이스(sqlite3)연결이 잘 안된는 것 같습니다. 블로그/로그인/사용자등록 기능이 제대로 나오지 않고 있는데, 좀 더 공부해봐야 겠습니다.