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://docs.nestjs.com/first-steps)
- 和訳: [https://zenn.dev/kisihara_c/books/nest-officialdoc-jp/viewer/introduction](https://zenn.dev/kisihara_c/books/nest-officialdoc-jp/viewer/introduction)

インストールできたら、プロジェクトを作成したいディレクトリに移動し、

```
nest new sample-azure-app
```
これで、雛形作成。 `sample-azure-app` のところはお好きな名前にしてください。

しばらく待つと、プロジェクトの雛形が作成されると思います。

作成後、`src/main.ts`を少し編集します。

```typescript: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 ポータル](https://portal.azure.com/#home)に移動して作業をします。

Azure ポータルからApp Serviceを選択
![スクリーンショット 2021-11-28 12.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/0763f01b-1605-8d1f-f386-406c4cccdc38.png)

App Service一覧ページで作成を選択

![スクリーンショット 2021-11-28 12.53.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/ca628d67-0d5c-1c12-2015-4ff14b375b2c.png)

作成画面で必要事項を入力

![スクリーンショット 2021-11-28 12.57.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/83e49162-aa0e-f7d3-be37-967cb3c20de3.png)

こんな感じ。

確認および作成を押して、良さそうなら作成ボタンを押します。

作成が完了したら、作成したApp Serviceのページへ遷移してください。

App Serviceのページから、デプロイセンターを選択

![スクリーンショット 2021-11-28 13.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/944f0125-56f2-ec23-ee3b-0939a0c4b07a.png)

ここで、ソースにGitHubを選択して、あとはさっき作成したリポジトリを指定してあげてください。

![スクリーンショット 2021-11-28 13.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/a6f0d5de-849b-01c1-3c7b-2adaac2517a9.png)

こんな感じ。

設定できたら保存を押してください。GitHubのリモートリポジトリにコミットされ、GitHub    Actionsが走ります。(このGitHub Actionsは失敗します)

次に、構成から全般設定タブでスタートアップ コマンドを指定します。

![スクリーンショット 2021-11-28 13.48.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/e1ba1b33-1046-217e-99a4-ffae97da8db7.png)

自分はyarnでやってますが、npmの人は

```
npm run start:prod
```

だと思います。(多分)

設定できたら保存を押してください。

これで、Azureでの操作はひとまず終了です。

## GitHub Actionsの設定

では、GitHubに移動して、今回作成したリポジトリのActionsタブを見てみましょう。

こんな感じで黄色いのがグルグルしてると思います

![スクリーンショット 2021-11-28 13.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/e0a12fda-d737-95f1-f096-d269d0d57427.png)

ただ、現状ではこのworkflowはうまくいかないので、cancel runで止めてあげましょう。

今からデプロイがうまく行くように`.github/workflows/` ディレクトリ内のymlファイルを修正します。

github上で編集してもいいですし、ローカルにpullしてから編集してもいいですが、以下のようにしてください。

```yaml:.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!"の文字が見れると思います。

![スクリーンショット 2021-11-28 13.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088889/1518300c-34be-bea3-d978-830a1064f658.png)

やったぜ。

以降は変更をプッシュするたびに、GitHub Actionsが走り自動でデプロイされます。

## 失敗した時に考えること

NestJSのプロジェクトを色々変更してるときに動かなくなったことがあるので、共有します。

ローカルで

```
yarn build
```

して、`dist/`直下に`main.js`があるか確認しましょう

もしなかった時は、`package.json` のscriptsを編集して `start:prod` コマンドが必ずdist内の `main.js`を参照するようにパスを修正してデプロイし直してみてください。

# まとめ

NestJSのプロジェクトをAzure App Service にデプロイしてみました。

あまりにもやってる人が見つからなかったので、試行錯誤しながらやってみました。

GitHub Actionsを自分でいじるのが人生で2回目とかだったので、もしかしたらもっといい方法があるかもしれません。(特にデプロイにめちゃくちゃ時間がかかるところとか)

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

では、さようなら〜