Nest.jsをGitHubコンテナレジストリー経由でWeb Appsデプロイ

Nest.jsをGitHub Container Registory経由でWeb Appsにデプロイする
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

ども!今回は、GitHub ActionsでNest.jsの運用環境イメージをGitHub Container Regstory経由でAzure Web Apps(Docker)にデプロイしました。開発環境構築から運用環境まで作って、最終的なデプロイまで記事にすることができました。開発のスタートラインに立ったので、これからゴリゴリ開発します。

はじめも

ども!最近はブログに執筆する内容が多くてほくほく顔な龍ちゃんです。程よく新しいお仕事の話がちらついていることもうれしい限りですね。まだ本決定されているわけでもないので、検証→ブログの流れを崩さずにほそぼそと技術を磨いていこうと思います。

さて、Nest.jsの開発周りのお話になります。以下の2つの記事で、Nest.jsの開発環境と本番環境の構築を行いました。

今回は、上記の2つで開発したアプリケーションを実際にデプロイする部分を埋めていこうと思います。今回の記事でわかることは以下になります。

  • GitHub Container RegistoryにDockerイメージをPushする
  • GitHub Container Registory経由でWeb Appsにデプロイする

デプロイをするにあたって使用する技術としては、GitHub Actions・GitHub Container Registory・Azure Web Appsになります。

こちらの記事をベースにGitHub Actions寄りにカスタマイズした記事を書きました。併せて読んでみてください。

GitHub Actionsでnest.jsの軽量な運用イメージを作成しデプロイ
GitHub Actionsでnest.jsの軽量な運用イメージを作成しデプロイ

GitHub Actionsを使ってGitHub Container Registory経由でWeb Appsにデプロイ

前提として、こちらの記事で作成した、運用環境をデプロイすることを想定しています。

Nest.jsで運用環境用のDockerfileを作成する

内容としては、結構重めなので3つのパートに分けて実装していきます。

  • GitHub ActionsでContainer RegstoryにDockerイメージをPushする
  • Web Appsを作成・設定
  • GitHub ActionsでWeb Appsにデプロイする

各章でそれぞれ設定が必要になるので、見比べながら設定をしていってください。

GitHub ActionsでGitHub Container RegistoryにDockerイメージをPushする

まずは、GitHub ActionsでGitHub Container RegistoryにDockerイメージをPushするワークフローを作成していきます。事前にリポジトリに設定して、GitHub Actionsからの書き込みを許可する必要があります。GitHubの設定ページから、Developers Settingsにアクセスしてください。

GitHub Token設定

Classic Tokenを作成してください。必要な権限としては、write:packageがついていれば問題ありません。もしこの設定がミスっていればワークフローが落ちるので安心してください。

GitHub Token詳細

設定後、パスフレーズが表示されるのでコピーしてリポジトリの環境設定のシークレットとして保存します。今回は”production”で、TOKEN_CLASSICとして登録しました。このパスフレーズは、Azure Web Appsの設定のほうでも必要になるので設定するまではどこかに退避させておいてください。

この設定で、GitHub Actionsからの書き込みを行えます。以下のワークフローを設定すると、Dockerfile.prodがビルドされContainer RegstoryにイメージがPushされます。

name: Development CI

# Configures this workflow to run every time a change is pushed to the branch called `release`.
on:
  push:
    branches: ["main"]
env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-and-push-image:
    runs-on: ubuntu-latest

    environment: "production"

    outputs:
      image-name: ${{steps.build-name.outputs.container}}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Log in to the Container registry
        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.TOKEN_CLASSIC }}

      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: latest

      - name: Build and push Docker image
        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
        with:
          context: .
          file: ./Dockerfile.prod
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

      - name: build container name
        id: build-name
        run: |
          echo "container=${{steps.meta.outputs.tags}}" >> $GITHUB_OUTPUT

全体的な流れとしては、以下になります。

  • リポジトリからファイルの情報を取得
  • GitHub Container Registoryにログイン
  • docker/metadata-actionを使用してイメージ名を設定
  • Dockerfileを指定して、ビルド & プッシュ
  • ビルドしたイメージ名をoutputsとして保存

結果は、以下の画像の部分に上がっています。

GitHub Container Registoryにアクセスはどこでする?ここでする!

Web Appsの設定

次はデプロイ先を作成しましょう。デプロイ先は、Azure Web Appsを想定しています。ひとまず細かい設定は後からするので、検索してAzure Web Appsを作成します。以下の画像を参考にしてください。公開方法はDockerコンテナを指定してください。

Azure Web Apps選択Azure Web Apps名前・価格・インスタンスの設定  Azure Web Apps作成前確認

ここからは、詳細な設定をしていく必要があります。設定を追加する項目は、以下の画像を参考に設定ページを開いてください。赤枠で囲っている部分を指定する必要があります。

Azure Web Apps設定項目

ここで設定する内容としては、以下になります。先ほど取得したGitHubのTokenをここで使用します。

NameValue
DOCKER_REGISTRY_SERVER_PASSWORD先ほど取得したGitHub Token
DOCKER_REGISTRY_SERVER_URLhttps://ghcr.io/
DOCKER_REGISTRY_SERVER_USERNAMEGitHubのユーザー名
WEBSITES_PORTDockerの起動ポート(今回:3000)

以上で設定のほうはAzure Web Apps側で変更する箇所は終了です。

GitHub ActionsでWeb Appsにデプロイする

GitHub ActionsからWeb Appsにデプロイするために必要な「発行プロファイル」を取得します。取得方法は、Web Appsのトップページにあります。

Azure発行プロファイル発行

ダウンロードされたファイルは、どうにか頑張って開くと以下のように一文ですごく長いです。

Azure Web Apps発行プロファイル

これをすべてコピーして、リポジトリの環境設定のシークレットとして保存します。今回は”production”で、AZURE_WEBAPP_PUBLISH_PROFILEとして登録しました。

先ほどのワークフローに追記します。アクションとして、Azure公式が出しているアクションを使用します(azure/webapps-deploy)。引数として必要なのは、WEB Appsの名前と先ほど発行したプロファイル・Dockerのイメージのパスになります。先ほどのJobで設定したイメージ名はOutputsに保存しているので引っ張ってきています。各自で設定したWEB Appsの名前を挿入してください。

name: Development CI

# Configures this workflow to run every time a change is pushed to the branch called `release`.
on:
  push:
    branches: ["main"]
env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-and-push-image:
    runs-on: ubuntu-latest

    environment: "production"

    outputs:
      image-name: ${{steps.build-name.outputs.container}}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Log in to the Container registry
        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.TOKEN_CLASSIC }}

      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: latest

      - name: Build and push Docker image
        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
        with:
          context: .
          file: ./Dockerfile.prod
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

      - name: build container name
        id: build-name
        run: |
          echo "container=${{steps.meta.outputs.tags}}" >> $GITHUB_OUTPUT

  deploy-to-webapps:
    runs-on: ubuntu-latest
    needs: [build-and-push-image]
    environment: "production"
    steps:
      - uses: azure/webapps-deploy@v2
        with:
          app-name: "WEB Appsの設定したアプリ名にしてください"
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          images: "${{needs.build-and-push-image.outputs.image-name}}"

このワークフローを走らせることでデプロイが実行されます。

動作確認

デプロイが完了してから、WEB Appsの設定しているドメインにアクセスしてみてください。無事アクセスできれば問題ありません。おめでとうございます。

もし、アクセスができなければログを確認しましょう。

Azure Web Appsログ確認

 

これでDockerのログを確認することができます。

もし、GitHub Actionsは成功して、UnauthorizedのエラーでDockerイメージをpullできていない場合は、WEB Apps側で設定したユーザー名の設定がうまくいっていない可能性があります。設定して何度か再起動をしてみてください。

おわりも

ども!この執筆で、Nest.jsの開発環境から運用環境・デプロイまでの執筆が終了しました。やっとで開発のスタートラインという気分です。これからLINE Front-end Framework(LIFF)アプリの開発を進めていきたいと思います。やはり、実際にデプロイまでしておくとアプリを共有することができるので、モチベが上がりますね。初心者の方はぜひ、小さなアプリでもいいのでデプロイをしてみましょう。

やはり楽しいです!今回は、公式の記事がとても参考になりました。

Azureのトレーニングでも似たような講座が開かれていたので、やってみるのもアリかもしれません。

ではまた!

Twitterのほうもよろしくお願いします。

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる