NestJS を Azure App Service にデプロイする
はじめに
最近NestJSを触り始めたのですが、プロジェクトをデプロイする方法を説明してくれてる記事があまりなかったです。
なので、Azure App ServiceにGitHub Actionsで自動デプロイする方法を書きます。
前提知識
特にないですが、
- NestJSの雛形の作成
- Azure App Serviceになんらかのプロジェクトをデプロイ
上記2点を行ったことがあるとスムーズかと思います。
実際の手順
では、見ていきましょう
NestJSの雛形作成
当然ですが、まずはNestJSの雛形を作成します。
Nest CLIをインストール
npm i -g @nestjs/cli
yarnの人は
yarn global add @nestjs/cli
参考
- 公式ドキュメント: https://docs.nestjs.com/first-steps
- 和訳: https://zenn.dev/kisihara_c/books/nest-officialdoc-jp/viewer/introduction
インストールできたら、プロジェクトを作成したいディレクトリに移動し、
nest new sample-azure-app
これで、雛形作成。 sample-azure-app
のところはお好きな名前にしてください。
しばらく待つと、プロジェクトの雛形が作成されると思います。
作成後、src/main.ts
を少し編集します。
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(process.env.PORT || 3000);
}
bootstrap();
ポートを環境変数で指定することで、app serviceにデプロイした後はポート指定なしでアクセスできるようになるはずです。
雛形はこれで完成です。
あとはgithubで適当なリポジトリを作成して、作成したNestJSプロジェクトをコミットしてプッシュしておきましょう。
Azure App Serviceを新規作成
ここからはAzure ポータルに移動して作業をします。
App Service一覧ページで作成を選択
作成画面で必要事項を入力
こんな感じ。
確認および作成を押して、良さそうなら作成ボタンを押します。
作成が完了したら、作成したApp Serviceのページへ遷移してください。
App Serviceのページから、デプロイセンターを選択
ここで、ソースにGitHubを選択して、あとはさっき作成したリポジトリを指定してあげてください。
こんな感じ。
設定できたら保存を押してください。GitHubのリモートリポジトリにコミットされ、GitHub Actionsが走ります。(このGitHub Actionsは失敗します)
次に、構成から全般設定タブでスタートアップ コマンドを指定します。
自分はyarnでやってますが、npmの人は
npm run start:prod
だと思います。(多分)
設定できたら保存を押してください。
これで、Azureでの操作はひとまず終了です。
GitHub Actionsの設定
では、GitHubに移動して、今回作成したリポジトリのActionsタブを見てみましょう。
こんな感じで黄色いのがグルグルしてると思います
ただ、現状ではこのworkflowはうまくいかないので、cancel runで止めてあげましょう。
今からデプロイがうまく行くように.github/workflows/
ディレクトリ内のymlファイルを修正します。
github上で編集してもいいですし、ローカルにpullしてから編集してもいいですが、以下のようにしてください。
name: Build and deploy Node.js app to Azure Web App - sample-nestjs-azure-app
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: '14.x'
- name: yarn install, build
run: |
yarn install
yarn build
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: 'sample-nestjs-azure-app'
slot-name: 'Production'
publish-profile: ${{ secrets.PUBLISHPROFILE }}
package: .
sample-nestjs-azure-app
と、secrets.PUBLISHPROFILE
については、自分の環境のものを設定してください。元のymlファイルに書いてるやつそのままでいいです。
あと、自分の環境に合わせてyarnにしてますが、npmにしたりは適宜対応してください。
この変更をコミット&プッシュすると、GitHub Actionsが走ります。
node_modulesとかも全部送るんでかなり時間かかると思いますがお酒でも飲みながら気長に待ちましょう。
デプロイが成功したら、あとはAzureから発行されたURLにアクセスすると、"Hello World!"の文字が見れると思います。
やったぜ。
以降は変更をプッシュするたびに、GitHub Actionsが走り自動でデプロイされます。
失敗した時に考えること
NestJSのプロジェクトを色々変更してるときに動かなくなったことがあるので、共有します。
ローカルで
yarn build
して、dist/
直下にmain.js
があるか確認しましょう
もしなかった時は、package.json
のscriptsを編集して start:prod
コマンドが必ずdist内の main.js
を参照するようにパスを修正してデプロイし直してみてください。
まとめ
NestJSのプロジェクトをAzure App Service にデプロイしてみました。
あまりにもやってる人が見つからなかったので、試行錯誤しながらやってみました。
GitHub Actionsを自分でいじるのが人生で2回目とかだったので、もしかしたらもっといい方法があるかもしれません。(特にデプロイにめちゃくちゃ時間がかかるところとか)
それ以外にも気軽にコメントくれると喜びます。
では、さようなら〜
Author And Source
この問題について(NestJS を Azure App Service にデプロイする), 我々は、より多くの情報をここで見つけました https://qiita.com/ganja_tuber/items/944fcd6b584acb806cc5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .