배포하면서 공부한 점

• 프론트엔드 Netlify 배포

• 백엔드 Heroku 배포

• 데이터베이스 awsRDS(mariaDB)

프론트엔드 Netlify 빌드&배포

1. netlify 회원가입

2. github에 코드 올리기

3. 업로드 할 github repository 연동

3-1.github을 사용했으므로 github 클릭

3-2. 빌드하고자 하는 repository 클릭

3-3. (의도하는 추가 세팅이 없는 경우) 별다른 세팅 없이 deploy site를 누르면 빌드가 시작된다.

4. 도메인 등 설정

4-1.Domain settings 클릭

4-2.커스텀 도메인 설정

5. 겪었던 버그와 해결책

• Treating warnings as errors beacause process.env.CI = true

  개발 시에는 에러라고 인식하지 않는 warnings(경고 들)을 빌드 할 때 에러로 인식하도록 설정이 되어있으니 그걸 해제하라고 불평하는 에러이다.

5-1. 내장된 환경변수중 CI 라는 변수가 true로 설정되어있어서 생기는 에러. 아래와 같이 해결하면 된다.

5-1-1. Deploy settings 누름

5-1-2. Edit settings 누르고 Build Command를 사진과 같이 정확하게

CI='' npm run build 라고 해야한다 (CI=''공백npm run build) 공백까지 정확하게 입력해야 한다!!

백엔드 Heroku 빌드&배포(heroku git 을 이용한 배포)

1. heroku 회원가입

이미지 생략

2. 새로운 App 만들기

2-1. new 누르고, create new app 누름

2-2. App name 입력 후, region 선택 후, Create App 클릭

3. heroku 로그인 및 빌드

3-1. 빨간색 동그라미 부분을 숙지한다. 3-2부터 써먹을 커맨드이다.

3-2. 물론, npm i -g heroku 커맨드로 heroku cli가 기본적으로 설치되어 있다는 가정 하에,

heroku login 을 입력하고 엔터(q를 제외한 아무 키)를 누른 뒤,

브라우저에서 켜지는 heroku 페이지에서 로그인을 한다.

3-3. 이제 heroku 페이지에서 안내했던 나머지 커맨드를 입력한다.

아마 처음 앱을 생성한 상태면 커맨드가 조금 다를 수 있다.

그럴 경우, 앞의 두 커맨드를 생략하고 $ git add . 부터 실행하면 된다.

$ heroku git:clone -a 본인Appname
$ cd 본인Appname
$ git add .
$ git commit -am "make it better"
$ git push heroku master

3-4. 입력하고 나면 무언가 로그들이 좌르륵 써지면서 빌드가 진행된다.

아마 한 번에 성공하진 않을 것이다. 4장에서는 내가 겪었던 헤로쿠의 버그와 해결책에 대해 알아본다.

아마 Open App을 클릭하면 아래와 같은 화면을 맞닥드릴 것이다.

vscode 터미널에 $ heroku logs --tail 을 입력하면, 무언가 불평을 하고 있을 것이다.

4. 겪었던 버그와 해결책

단일 Nodejs로 만들어진 앱이라면, 별다른 에러 없이 빌드가 완료되었을 수도 있다.

여기에선, 이번 프로젝트처럼, Nodejs와 Python 등 다양한 언어로 개발된 앱을 배포할 때 겪었던 에러와 해결책에 대해 써보고자 한다.

아마, Django(Python)앱을 빌드할 때 에러가 난 사람도 이 글로 디버깅에 도움이 되리라 생각한다.

4-1. 환경변수 설정 문제

4-1-1. Reveal Config Vars 를 누르고 백엔드 파일 속 .env 파일에 있던 환경변수를 기입하면 된다.

4-2. 빌드 팩(buildpacks) 추가

4-2-1. 이 프로젝트처럼 한 프로젝트 안에 nodejs와 python이라는 두 개의 언어가 혼재할 경우,

두 언어의 빌드 팩을 모두 설정해줘야 한다.

Add buildpack을 누른다.

Nodejs와 python을 선택해주고, save changes를 누른다.

이제 에러 없이 무사히 빌드가 된다면 좋겠지만 그렇지 않았다.

...새로운 에러(이)가 등장 했다.!!

4-3. App not compatible with buildpack 에러 해결

vscode를 열고
$ heroku buildpacks:clear
를 입력하면 된다.

진짜 끝일 줄 알았는데, heroku buildpacks 라는 커맨드에서 오류가 발생하고 만다...

Error: Cannot find module '@heroku/buildpack-registry'

4-4. Error: Cannot find module '@heroku/buildpack-registry'에러 해결

어떻게 해도 @heroku/buildpack-registry를 찾지 못하였기에, 공식문서를 뒤지다가 플러그인을 통해 다운 받는 법을 알아냈고, 아래 두 커맨드를 입력하면 된다.

$ heroku plugins:install buildpack-registry
$ heroku plugins:install buildpacks  

이제 다시 $ heroku buildpacks:clear를 입력하면 빌드가 깔끔하게 완료될..줄 알았지?? 아직 아니다..

4-5. Python 외부 라이브러리 module not found 에러 해결

heroku에서 파이썬계열 파일 업로드 시, nodejs의 package.json과 같은 dependencies파일이 필요하다.

그 파일이 바로 requirements.txt(철자 틀리면 안됨. 정확하게 이름이 저거여야 함)

이 파일안에 아래 사진 처럼 [임포트된 라이브러리 명]==[버전명] 과 같은 형태로 기재해야 한다.

버전은 생략가능하나, 되도록 본인이 작업한 ide에서 pip list 명령어로 확인하고 기입하는 게 좋다.

아래 사진은 내가 프로젝트에서 사용한 외부 라이브러리 이다.

4-6. H14 error in heroku - "no web processes running" 에러 해결

heroku에서 django와 같은 python 계열 파일을 빌드하려면 Procfile 이라는 파일이 필요하다.

첫 글자 P이고 Procfile이다. 틀리면 안된다. 확장자가 있어서도 안된다. 그냥 Procfile이다.

아무튼, 이 파일안에, 아래와 같이 기재한다.

이 프로젝트는 Python의 라이브러리를 설치 후, Web실행은 nodejs에서 하는 특수 케이스이므로, 저렇게 작성했다. 이제 정말 제대로 빌드가 된다. 눈물이 난다.

추가로 확인할 수 있는 방법은 앱 화면에서 Dyno formation에 위와 같이 나타난다면 성공이다.