🧐 개요
활동하고 있는 카페에서 참여하는 사설 대회가 있는데,
문득 웹으로 대회 참여 인원을 관리한다던가 하는 시스템이 있으면 좋겠다 싶어
간단한 웹앱을 작성하여 heroku로 배포했습니다.
그 과정을 간략하게 정리합니다.
이 Post에서는 Heroku 가입 과정은 생략합니다.
🙄 Heroku
Heroku는 여러 프로그래밍 언어를 지원하는 PaaS 입니다.
후술할 ClearDB나 Redis, Postgres 등등 다양한 애드온을 지원하며
사용자의 앱을 빌드하여 웹에 배포시켜줍니다.
무료 버전은 30분 동안 접속 요청이 없으면 수면 상태가 되어 초기 접속이 느려지지만
그것을 방지해주는 cron-job.org 또는 Kaffeine 서비스가 있습니다.
관련 설명 링크를 아래에 남깁니다.
https://ichi.pro/ko/mulyolo-herokue-fastapi-aeb-eul-baepohaneun-bangbeob-9707282123449
📋 Heroku에 카드 등록하기
Heroku에 무료 계정으로 가입하면 매달 550시간의 앱 구동 시간을 받습니다.
더불어 카드를 등록하면 추가로 450시간이 주어져 1000시간 이용이 가능합니다.
1. 우측 상단의 프로필 사진을 클릭
2. Account settings 버튼 클릭
3. Billing 탭 클릭
4. Credit card 추가
만약 배포해야될 앱이 실시간으로 구동되어야하는 경우
꼭 카드 등록을 하시는 것이 이득입니다!
아마 VISA 또는 Master 카드면 가능했던 것으로 기억합니다.
📋 Heroku에 앱 배포하기
Heroku는 git을 이용합니다.
git repository를 원격 저장소로 코드를 올리는 것과 굉장히 비슷합니다.
먼저 코드를 올릴 공간을 만들어야합니다.
먼저 첫 화면의 New 버튼을 눌러 Create new app을 선택합니다.
그 다음 나오는 화면에서 App 이름을 입력하고 Create app을 클릭합니다.
지역은 미국 또는 영국인데, 뭘 선택하든 속도가 별반 다를게 없습니다 ㅡ.ㅡ;
다음 화면에서 App을 배포하는 방법이 기술되어 있습니다.
Heroku CLI를 설치하신 뒤, cmd창을 열고 위의 설명대로 진행하면 됩니다.
마지막 git push heroku master에서 오류가 발생하는 경우가 있습니다.
error: src refspec master does not match any$ git checkout위의 명령어를 입력하셔서 브랜치 이름을 확인하시고 시도하세요.
$ git push heroku `branch_name`만약 따로 master branch를 생성하지 않으셨다면
$ git checkout -b <branch>위의 명령어를 통해 생성 및 체크아웃하신 뒤, 2번째 명령어를 사용하시면 됩니다.
$ git push heroku HEAD:master위의 과정 필요없이 마지막 명령어를 사용해도 되긴 합니다.
🎯 유의사항
앱을 배포하면
https://<appname>.herokuapp.com/위의 URL로 접속할 수 있습니다.
이상하다... 앱을 정상적으로 배포했는데 막상 접속해보니 오류가 발생합니다.
이 경우
$ heroku logs --tail명령어를 입력하여 무슨 문제가 발생했는지 확인할 수 있습니다.
위의 이미지에서 주목할 것은 다음과 같습니다.
at=error code=<errCode> desc="<content>" // 가장 흔한 에러 코드는 'H10' 입니다.에러코드와 에러 메세지를 확인하여 추적하시면 됩니다.
해당 이미지의 경우, Port를 Heroku에서 감지하지 못하는 경우입니다.
다음은 제가 겪은 증상들을 모은 것입니다.
😡 접속 포트 변경하기
배포 전에는 local 환경에서 임의의 포트를 사용하고 계셨을 것입니다.
위처럼 변경하셔야 local에서 접속하든, URL로 접속하든 정상적으로 접속됩니다.
변경하지 않으셨다면, 위에 예시로 올린 이미지처럼 에러가 발생합니다.
😡 package.json 파일 확인
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"engines": {
"node": "14.17.0",
"npm": "6.10.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.6",
"express-mysql-session": "^2.1.6",
"express-session": "^1.17.2",
"mysql": "^2.18.1",
"path": "^0.12.7",
"express": "^4.16.1"
}
}Heroku는 deploy된 앱의 package.json 파일 정보를 보고
프로그래밍 언어와 추가된 dependency들을 확인하여 빌드합니다.
또한 start 명령어로 App 실행을 제어합니다.
따라서 사용하는 실행 기반 Engine의 버전을 명시해야하고
start scripts를 작성해주어야 합니다.
위 예시는 js에 해당합니다.
😡 Database 연결 오류
미처 소스 코드에서 DB 연결을 heroku add-on으로 변경하지 않았을 때
App 구동 중, DB 연동 작업에서 발생하는 오류입니다.
DB 연동은 길어질 것 같아 다음 포스트에서 정리합니다.
