배포하기(AWS 비용이 겁난다면?)

김준영·2021년 2월 17일

React와 Django로 만드는 블로그

목록 보기

9/9

프로젝트 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 하실 수 있습니다.

프론트, 백엔드 배포하기

우리는 로컬에서 개발완료된 작업물들을 실제 사용자에게 배포해야 합니다.
배포는 특정 회사의 Cloud로 이루어지게 되는데 내 프로젝트에 맞게 Cloud를 선정해야합니다.
React는 Netlify로 배포하며 MySQL은 AWS RDS를 이용해 배포하겠습니다
Django의 배포는 다음 세가지 중 하나를 골라야 합니다.

Django 배포

1. AWS Cloud
우리는 이전에 실시간 이미지 Preview 기능을 위해 AWS S3 기능을 이용했지만 이번에 해야 할 작업은 24시간 구동되는 서버 입니다. 그렇기에 비용이 많이 들겠죠? 배포는 보통 AWS EC2 와 AWS ElasticBeanstalk 를 이용 하게 되는데 예상비용은 t3a medium 이라는 옵션을 선택 했을 때 월 22.816원 이라는 돈이 출금되게 됩니다.
2. pythonanywhere
3. Heroku
AWS 제외하고 나머지 두가지 중 특별한 이유는 없지만 Heroku를 이용해 배포를 하겠습니다
Heroku는 깃과 연동되어 배포가 되기 때문에 Heroku를 vscode와 연동하거나 Heroku 사이트에서 Git과 연동하면 됩니다.

공식 홈페이지에서 Heroku cli를 다운받아줍니다.
https://devcenter.heroku.com/articles/heroku-cli

그 후 터미널에서 heroku login을 입력하면 Heroku 사이트에서 로그인을 확인하겠다는
메세지가 나오게 됩니다.

이제 Heroku에 배포하기 전 Django를 준비시켜놓아야 합니다.
Heroku와 Django의 통신을 위한 패키지를 설치해줍니다.
1. gunicon

pip install gunicorn

2. requirements.txt
manage.py 파일이 있는 위치에서 pip freeze> requirements.txt 를 입력해줍니다.
이는 우리 가상환경에 설치된 모듈들을 heroku서버에 설치하기 위한 목록들을 적어놓은
파일입니다. 여기 명시되어있는 파일을 보면서 Heroku는 설치를 진행합니다.

pip freeze>requirements.txt

3. Procfile
Procfile은 기존에 설치한 gunicorn을 통해 실제 통신할 프로젝트 이름을 명시합니다.
똑같이 manage.py 파일이 있는 위치에 Procfile 파일을 생성합니다.

web: gunicorn 내프로젝트이름.wsgi

이제 모든 작업이 끝났습니다. Heroku에 배포를 하라는 명령만 입력하면 됩니다.
그 전에 모든 작업 내용들은 commit push 를 해주어야 합니다

heroku git:remote -a 헤루쿠앱이름
git push heroku master

배포하는 사람마다 한번에 배포가 완료되는 분들도 있을테고 한번에 안되는 분들도 있을겁니다. 이유는 많지만 MySQL을 이용 하는 분들이라면 배포작업이 완료가 안됬을 수도 있고 혹은 배포가 됬더라도 연동이 안됬을 확률이 높습니다.
이유는 Heroku에서는 PostgreDB방식의 데이터베이스를 사용하는데요 우리가 MySQL로 변경시켜주었다면 Heroku에도 맞는 DB를 선택해주어야 합니다.
우리는 Heroku의 기본데이터베이스를 ClearDB로 바꿔줄겁니다.

이제 DB가 정상 작동 되는걸 볼수 있습니다.

React 배포

React 배포는 Netlify를 이용해서 배포를 하겠습니다.
저는 django를 배포하는 것보다 React를 배포하는 부분이 더 어렵더라구요.
우리는 이전에 localhost:3000과 localhost:8000을 Proxy를 사용해서 연결시켜주었습니다.
먼저 Netlify 에 가입하고 로그인을 합니다. 역시나 Git과 연동되기에 여기선 홈페이지에서 바로 작업해줍니다.
레파지토리 연동 후 Setting을 변경하겠습니다

아래 사진처럼 npm run build 명령어는 package.json에 명시되어 있는 명령어겠죠
하지만 앞에 CI는 왜 붙었을까요?? 에러나서 수정한거긴 한데.. 저도 잘 모르겠어요.
보통은 npm run build만 적어도 된다고 합니다.