GitHub를 사용하여 Heroku에 Node.js 앱 배포

이 튜토리얼에서는 Node.js 애플리케이션을 Heroku에 무료로 배포하는 과정을 살펴보겠습니다. 애플리케이션 배포는 지루한 작업이 될 수 있지만 단계를 제대로 따르면 케이크 워크입니다.

첫 번째 앱을 배포할 때 전체 단계를 알기 위해 많은 문서를 검색해야 했습니다. 여기서 시간을 절약하기 위해 앱을 배포하는 단계별 절차를 나열했습니다.

To get started you will require a heroku account that you can easily create

여기에서는 배포를 시연하기 위해 간단한 데모 프로젝트를 수행했습니다.



이것이 우리 Node.js 프로젝트의 모습입니다. 웹 사이트의 홈페이지에 렌더링될 index.html 파일만 포함되어 있습니다.

1. 프로젝트에서 git 저장소를 초기화합니다.

git 리포지토리를 초기화하려면 프로젝트 디렉터리에서 터미널을 열고 다음 명령을 실행합니다.

또는 프로젝트에 이미 git repo가 ​​있는 경우 이 부분을 건너뛸 수 있습니다 :)

git init

2. 환경 변수를 사용하여 앱 구성

환경 변수를 사용하면 애플리케이션을 다시 빌드하지 않고도 구성할 수 있습니다. 애플리케이션의 환경별 측면을 외부화합니다.

환경 변수는 다음과 같은 매개변수를 구성하는 데 유용합니다.

응용 프로그램이 실행 중인 포트입니다.

프로젝트에서 민감한 정보가 포함된 API 또는 기타 항목을 사용하는 경우.

먼저 터미널에서 수행할 수 있는 'dotenv' 패키지를 설치해야 합니다.

npm install dotenv

index.js 파일에 추가해야 합니다.

require('dotenv).config();

이제 프로젝트 디렉터리에 .env 파일을 만들고 외부에서 구성하려는 매개 변수를 추가합니다.



마찬가지로 다른 매개변수를 추가할 수 있습니다.

앱에서 이러한 변수를 사용하려면 다음을 사용하여 액세스할 수 있습니다.

“process.env.” in your index file.

위의 예에서는 위에서 언급한 구문을 사용하여 포트를 추가했습니다.

IMPORTANT!
Do not forget to add your .env file to .gitignore because if you don't do that when you push your project to GitHub your API keys and sensitive data will be exposed. Also add node_modules folder to .gitignore.

위의 단계를 따른 후 .gitignore 파일에는 최소한 .env 및 node_modules가 있어야 합니다.

3. 프로필 생성

Procfile은 시작 시 앱에서 실행되는 명령을 지정하는 파일입니다.

프로젝트 디렉터리에 Procfile이라는 파일을 만들고 아래 명령을 추가합니다.

web: node index.js

프로젝트를 변경한 후 변경 사항을 커밋하기에 좋은 시기입니다. 리포지토리를 GitHub에 푸시하려면 this 문서를 따르십시오.

4. Heroku CLI 다운로드 및 로그인

The Heroku CLI

위 링크에서 CLI를 다운로드하여 설치합니다.

명령을 실행하여 CLI에 로그인하면 Heroku 로그인 페이지로 이동하고 여기에서 자격 증명을 채울 수 있습니다.

heroku login

Heroku에서 새 앱 만들기

새 앱을 만들면 앱 이름을 입력하라는 메시지가 표시됩니다.



애플리케이션에서 API 키를 사용하고 이를 .env 파일에 추가한 경우:

설정으로 이동

config vars 섹션에서 키-값 입력에 API 키 또는 비밀 키를 추가합니다.

Note: the inputs in key, values should match with the names of the variables you have given in .env file

6. Heroku와 GitHub 리포지토리 연결 및 애플리케이션 배포

글쎄, 그것은 꽤 많은 일이었습니다;)

이제 배포 섹션의 애플리케이션 대시보드에서 배포 방법을 GitHub로 선택합니다.



리포지토리가 연결된 후 아래로 스크롤하여 앱을 배포하면 1~2분의 처리 후 배포된 애플리케이션을 방문하라는 메시지가 표시됩니다.

우리의 경우 이것이 xD로 보이는 방식입니다.



Node.js 애플리케이션을 성공적으로 배포한 것을 축하합니다. 이제 전 세계에 프로젝트를 선보일 수 있습니다 :)

이 튜토리얼이 마음에 드셨다면 아래에 댓글을 남겨주세요. 피드백을 받습니다.

, GitHub , , 에서 저와 연결할 수 있습니다. 질문이 있으시면 언제든지 답변해 드리겠습니다!