SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
ども！今回は、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を使ってGitHub Container Registory経由でWeb Appsにデプロイ
前提として、こちらの記事で作成した、運用環境をデプロイすることを想定しています。
内容としては、結構重めなので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にアクセスしてください。
Classic Tokenを作成してください。必要な権限としては、write:packageがついていれば問題ありません。もしこの設定がミスっていればワークフローが落ちるので安心してください。
設定後、パスフレーズが表示されるのでコピーしてリポジトリの環境設定のシークレットとして保存します。今回は”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として保存
結果は、以下の画像の部分に上がっています。
Web Appsの設定
次はデプロイ先を作成しましょう。デプロイ先は、Azure Web Appsを想定しています。ひとまず細かい設定は後からするので、検索してAzure Web Appsを作成します。以下の画像を参考にしてください。公開方法はDockerコンテナを指定してください。
ここからは、詳細な設定をしていく必要があります。設定を追加する項目は、以下の画像を参考に設定ページを開いてください。赤枠で囲っている部分を指定する必要があります。
ここで設定する内容としては、以下になります。先ほど取得したGitHubのTokenをここで使用します。
| Name | Value |
|---|---|
| DOCKER_REGISTRY_SERVER_PASSWORD | 先ほど取得したGitHub Token |
| DOCKER_REGISTRY_SERVER_URL | https://ghcr.io/ |
| DOCKER_REGISTRY_SERVER_USERNAME | GitHubのユーザー名 |
| WEBSITES_PORT | Dockerの起動ポート（今回：3000） |
以上で設定のほうはAzure Web Apps側で変更する箇所は終了です。
GitHub ActionsでWeb Appsにデプロイする
GitHub ActionsからWeb Appsにデプロイするために必要な「発行プロファイル」を取得します。取得方法は、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の設定しているドメインにアクセスしてみてください。無事アクセスできれば問題ありません。おめでとうございます。
もし、アクセスができなければログを確認しましょう。
これでDockerのログを確認することができます。
もし、GitHub Actionsは成功して、UnauthorizedのエラーでDockerイメージをpullできていない場合は、WEB Apps側で設定したユーザー名の設定がうまくいっていない可能性があります。設定して何度か再起動をしてみてください。
おわりも
ども！この執筆で、Nest.jsの開発環境から運用環境・デプロイまでの執筆が終了しました。やっとで開発のスタートラインという気分です。これからLINE Front-end Framework（LIFF）アプリの開発を進めていきたいと思います。やはり、実際にデプロイまでしておくとアプリを共有することができるので、モチベが上がりますね。初心者の方はぜひ、小さなアプリでもいいのでデプロイをしてみましょう。
やはり楽しいです！今回は、公式の記事がとても参考になりました。
Azureのトレーニングでも似たような講座が開かれていたので、やってみるのもアリかもしれません。
ではまた！
Twitterのほうもよろしくお願いします。
Be the first to comment