はじめに

最近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を少し編集します。

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 ポータルに移動して作業をします。

Azure ポータルからApp Serviceを選択

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してから編集してもいいですが、以下のようにしてください。

.github/workflows/master_sample-nestjs-azure-app.yml

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回目とかだったので、もしかしたらもっといい方法があるかもしれません。(特にデプロイにめちゃくちゃ時間がかかるところとか)

それ以外にも気軽にコメントくれると喜びます。

では、さようなら〜