Heroku에 Nx workspace 기반 Angular 및 NestJS 어플리케이션 배포

이전 글에서 Angular와NestJS 프로그램을 포함하는 Nx 작업 영역을 만드는 방법을 보여 드렸습니다.응용 프로그램이 준비된 후에, 우리는 어느 곳에서 그것들을 위탁 관리해야 한다.Heroku는 어플리케이션을 쉽게 배포할 수 있는 서비스 중 하나입니다.본 논문에서, 나는 Nx monorepo를 사용하여 개발한 Angular와NestJS 응용 프로그램을 어떻게 배치하는지 보여줄 것이다.my GitHub repository 에서 상기 프로그램의 예시 코드를 찾을 수 있습니다.본문을 읽으려면 이 환매 협의를 이체하여 현지에서 복제하고 결산하십시오nxDeployHeroku_entryPoint.

git clone [email protected]:<your_username>/nx-photos.git

# Or using Https
git clone https://github.com/<your_username>/nx-photos.git

cd nx-photos

git checkout nxDeployHeroku_entryPoint

Heroku CLI 설치

이 문서를 읽으려면 Heroku CLI를 설치해야 합니다.Heroku 문서 페이지here의 공식 설치 지침을 따르십시오.
CLI를 설치한 후 다음 명령을 입력하여 Heroku에 로그인합니다.

heroku login

NestJS 어플리케이션 배포

NestJS 어플리케이션 배포부터 시작하겠습니다.우리가 해야 할 첫 번째 일은 Heroku 프로그램을 만드는 것이다.모든 예시에서 유일한 프로그램 이름을 제공해야 하기 때문에, 나는 ktrz- 접두사를 프로그램 이름으로 사용할 것입니다.프로그램 이름이 서로 충돌하지 않도록 접두사로 바꾸십시오.
Heroku 응용 프로그램을 만들려면 다음 명령을 사용할 수 있습니다.

heroku create -a ktrz-nx-photos-api

이제 Node를 사용하여 애플리케이션을 구축하도록 애플리케이션을 구성해야 합니다.이것이 바로 패키지를 구축하는 용도다.빌드 패키지를 추가하려면 heroku buildpacks:add 명령을 사용합니다.

heroku buildpacks:add -a ktrz-nx-photos-api heroku/nodejs

Heroku는 Procfile 파일을 사용하여 응용 프로그램이 시작될 때 실행할 명령을 지정합니다.기본 구성은 Procfile만 허용하며 저장소 루트 디렉토리에 있어야 합니다.여러 응용 프로그램을 가진monorepo와 협동하여 작업을 하기 위해서는 저장소에 여러 개의 ProcFile을 설정하는 방법이 필요합니다.이를 위해 multi-procfile 구축 패키지를 사용할 수 있습니다.이전 명령과 유사한 명령을 사용하여 추가할 수 있습니다.

heroku buildpacks:add -a ktrz-nx-photos-api heroku-community/multi-procfile

현재, 우리는Procfile을 만들어monorepo에 의미 있는 디렉터리에 놓을 수 있습니다.다음 파일을 만듭니다.

web: node dist/apps/photo/api/main.js

apps/photo/api/Procfilebuildpack에서Procfile의 위치를 알 수 있도록 Heroku 프로그램에 PROCFILE env 변수를 설정해야 합니다.다음 명령을 사용하여 이 작업을 수행할 수 있습니다.

heroku config:set -a ktrz-nx-photos-api PROCFILE=apps/photo/api/Procfile

기본적으로 Heroku는 build 파일의 package.json 스크립트를 사용하여 프로그램을 구축합니다.우리는 더욱 맞춤형 방식으로 응용 프로그램을 구축해야 한다. 이렇게 하면monorepo에서 구축할 응용 프로그램을 설정할 수 있다.정의heroku-postbuild 스크립트를 통해 Heroku에게 기본build 스크립트를 사용하지 말고 사용자 정의 스크립트를 사용하라고 알려 줍니다.다음 스크립트를 만듭니다.

scripts: {
  "heroku-postbuild": "nx build $PROJECT_NAME --prod"
}

package.json보시다시피, PROJECT_NAME env 변수는 어떤 프로그램을 구축할 것인지 확인하는 데 사용됩니다.Heroku 환경에서 구성해야 합니다.

heroku config:set -a ktrz-nx-photos-api PROJECT_NAME=photo-api

나머지는 변경 사항을 분기로 밀어넣고 저장소를 배포 소스로 사용하도록 Heroku 애플리케이션을 구성하는 것입니다.

git checkout -b nx-photo-deploy

git push -u origin photo-api-deploy

Heroku 응용 프로그램을 구성하려면 dashboard로 이동하여 이전에 만든 응용 프로그램을 선택합니다.

그런 다음 Deploy 탭으로 이동하여 GitHub 메서드를 선택하고 저장소를 검색한 다음 Connect를 클릭합니다.

마지막으로 아래쪽에서는 방금 만든 분기에서 수동으로 배포할 수 있습니다.

포장 내.json 스크립트 추가:

scripts: {
  "heroku-postbuild": "nx build $PROJECT_NAME --prod"
}

package.json

heroku create -a ktrz-nx-photos-api
heroku config:set -a ktrz-nx-photos-api PROJECT_NAME=photo-api

heroku buildpacks:add -a ktrz-nx-photos-api heroku/nodejs
heroku buildpacks:add -a ktrz-nx-photos-api heroku-community/multi-procfile

# create `apps/photo/api/Procfile` file
heroku config:set -a ktrz-nx-photos-api PROCFILE=apps/photo/api/Procfile

heroku buildpack nodejs와 heroku buildpack multi-procfile 구성에 대한 자세한 내용은 공식 문서를 참조하십시오.

heroku-buildpack-nodejs

heroku-buildpack-multi-procfile

Angular 어플리케이션 배포

Angular 애플리케이션을 배포하는 데는 여러 가지 비슷한 절차가 있습니다.

# create another Heroku app
heroku create -a ktrz-nx-photos-fe

# add same buildpacks
heroku buildpacks:add -a ktrz-nx-photos-fe heroku/nodejs
heroku buildpacks:add -a ktrz-nx-photos-fe heroku-community/multi-procfile

# configure Procfile
heroku config:set -a ktrz-nx-photos-fe PROCFILE=apps/photo/fe/Procfile

# set PROJECT_NAME env variable
heroku config:set -a ktrz-nx-photos-fe PROJECT_NAME=photo-fe

Angular 응용 프로그램은 루트가 항상 루트index.html로 구성되고 나머지 부분은 Angular가 처리하도록 정적 파일로 사용할 수 있습니다.우리는 이 점을 실현하기 위해 다른 구축 패키지를 사용할 수 있다.

heroku buildpacks:add -a ktrz-nx-photos-fe heroku-community/static

heroku buildpack static은 static.json 파일을 통해 구성됩니다.다음과 같은 기본 구성을 수행할 수 있습니다.

{
  "root": "dist/apps/photo/fe/",
  "routes": {
    "/**/*.html": "index.html"
  }
}

static.json예제 Angular 애플리케이션은 백엔드에서 /api 프록시를 사용하도록 구성되었습니다.이것도 static에서 설정할 수 있습니다.json 파일:

{
  "proxies": {
    "/api/": {
      "origin": "https://ktrz-nx-photos-api.herokuapp.com/api/"
    }
  }
}

static.json마지막으로 Procfile을 통해 Heroku가 정적 빌드 패키지를 사용하도록 구성하는 것이 좋습니다.

web: bin/boot

apps/photo/fe/Procfileherokubuildpack 정적 설정에 대한 더 많은 정보를 알고 싶으면 공식 문서here를 방문하십시오.
변경 사항을 제출하고 동일한 GitHub 저장소를 사용하도록 두 번째 애플리케이션을 구성합니다.

로 이동하여 이전에 만든 프런트엔드 애플리케이션을 선택합니다.

다음에 Deploy 옵션 카드로 이동하여 GitHub 방법을 선택하고 저장소를 검색한 다음Connect을 클릭합니다.

마지막으로, 밑에 있는 지점에서 수동으로 배치할 수 있습니다.

이러한 모든 단계를 완료하면 배치된 애플리케이션으로 이동할 수 있습니다.
dashboard

요약

결과 코드를 보려면 my 에서 찾을 수 있습니다.
만약 당신에게 문제가 있다면 언제든지 저에게 트위터나 DM을 보낼 수 있습니다.기꺼이 도와드리겠습니다!
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소,GraphQL,Node,Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 방문GitHub repository하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdotlabs.com를 참조하십시오.