[삽질로그] Heroku로 Strapi(with PostgreSQL) 배포하기 2/2

이 글은 Heroku Free tier를 사용하여 호스팅하기 위한 튜토리얼인데 2022년 11월 28일자로 Heroku에서 Free tier를 제공하지 않기 때문에 무료 배포를 하기 원하는 분들은 다른 튜토리얼들을 참고해보길 바란다. 

(이 글은 2021년 4월 14일 기준 글이다.)

지난 편에 Heroku에 배포까지 완료했는데 Github에 올려서 자동 배포가 되도록 설정을 계속해보겠다. 

[삽질로그] Heroku로 Strapi(with PostgreSQL) 배포하기

 

🚀 시작

1. Github에 리포지토리 생성하기

리포지토리 이름만 적고 설명 부분이나 Public/Private은 원하는 대로 설정 후 리포지토리 초기화 부분은 아무것도 체크하지 않고 생성해주었다. 

 

2. 로컬 리포지토리와 생성한 Github 리포지토리 연결

Create repository를 클릭하면 다음 화면에서 명령어들이 나온다. 하단에 있는 …or push an existing repository from the command line의 명령어들을 복사 후 터미널에서 Strapi 프로젝트 경로에 붙여 넣어준다. 

git remote add origin <자신이-생성한-Github-리포지토리> # 적혀있는 그대로 놔두면됨
git branch -M main
git push -u origin main

제대로 연결이 되었으면 Github 리포지토리에 로컬 저장소에서 커밋한 파일들이 모두 뜬다. 

 

3. Heroku에서 배포 설정하기

Heroku 웹사이트에 들어가면 로그인이 되어 있는 경우 Heroku 앱 대시보드로 리다이렉트 될 것이다. 
본인이 생성한 프로젝트를 클릭하면 앱과 관련된 대시보드가 뜬다. 

세 번째 탭 Deploy를 선택해주면 아래와 같은 화면이 보인다. 

Deployment method는 GitHub을 선택하면 하단에 Connect to GitHub이 보인다. 
Github 계정과 연결해주면 자신의 리포지토리를 선택할 수 있다. Github에 생성한 리포지토리를 검색하면 하단에 Connect라는 버튼이 뜨면 클릭하여 연결한다. 

하단의 Deploy Branch 버튼은 직접 수동 배포하는 것이고 Enable Automatic Deploys 버튼은 자동 배포를 활성화하는 버튼이다.
Deploy Branch 버튼을 클릭하면 로그를 확인해볼 수 있다. 수동 배포해보고 자동 배포를 활성화 시킬 수도 있다.  

 

아래와 같은 화면이 보이면 문제없이 잘 배포가 된 것이다. 

하단에 View 버튼을 클릭하면 지난 편 마지막에서도 확인할 수 있었던 웰컴 페이지가 뜬다.

 

4. Strapi admin 등록하기

웰컴 페이지 주소 뒤에 /admin을 입력하면 아래와 같은 화면이 보인다.

등록을 누르고 아래와 같이 보인다면 완료이다!

Production(운영환경)에서는 보안상의 이유로 Content-Types Builder가 비활성화되어 있다고 한다. Collection을 생성하거나 구조를 변경하고 싶다면 로컬에서 변경하고 Github에 푸시해주면 자동 배포가 되어 Production에서도 확인 가능하다. 

이곳저곳 찾아가며 하다보니 더 쉽게 할 수 있는 방법을 더 복잡하게 했을 수도 있고 설정해주어야 하는 부분을 빠뜨렸을 수도 있지만.... 이렇게라도 삽질 내용을 기록하고자 적어보았다. 누군가에게 작은 도움이라도 되면 좋겠다. 댓글 피드백은 언제나 환영이다! 👐

사실 진정한 삽질은 이 다음부터 시작이었지만... 기존에 관리하던 csv 데이터를 Heroku에서 제공하는 PostgresDB에 올려야 했는데 하아... 근래에 꼽는 삽질 of 삽질이었다. Postgres에 대한 이해 부족과 처음 사용해보는 툴로 아주 🍠 x 10000 먹은 것 같았지만 그래도 어떻게 올렸다ㅎ 끝.

 

📝 참조

youtu.be/vbh3-G1jIUg?t=666
strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html