Azure Static Web Apps で CI/CD をし隊

今回は Azure Static Web Apps で CI/CD の環境を作ってみたいと思います
題材は前回扱った Hugo です
Windows にHugo の実行環境をたて隊 | クラウドを勉強し隊

大まかな流れ

公開情報があったのでベースはこれを参考にします
チュートリアル:Hugo サイトを Azure Static Web Apps に発行する | Microsoft Learn

Hugo サイトの作成（ローカル）
GitHub にレポジトリの作成、プッシュ
Azure Static Web Apps の作成
レポジトリにさらにプッシュして更新されるかどうかを確認

Hugo サイトの作成（ローカル）

ローカル環境の整え方は前回の記事を見てください
実行したのは以下です

1
2
3
4
5
6
7
8
9


hugo new site my-static-app  #新しいアプリの作成
cd my-static-app  #作成したアプリのディレクトリへ移動
git init  #Git リポジトリの初期化
git branch -M main  #ブランチ名が main であることを確認
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke  #hugo のテーマをインストール
echo 'theme = "ananke"' >> config.toml  #テーマの有効化
# 自分の環境では文字化けをしていたので、 config.toml を少し修正します（詳細は前回の記事で
git add -A  #変更を add
git commit -m "initial commit"  #変更をコミット

GitHub にレポジトリの作成、プッシュ

GitHub に “my-hugo-site” という名前の新しいレポジトリを作成します

作成したレポジトリをリモートリポジトリとして追加し、プッシュします

1
2


git remote add origin https://github.com/NakayamaKento/my-hugo-site.git #自身のレポジトリの情報に置き換えてください
git push --set-upstream origin main #ローカル リポジトリを GitHub にプッシュ

Azure Static Web Apps の作成

Azure Portal にサインして作成します
パラメーターは画像の通りですが、ポイントとしてはデプロイのソースに GitHub を選択、リポジトリで作成したものを選択、ビルドのプリセットに Hugo を選択です

Static Web Apps のデプロイが完了すると自動的に GitHub Action の workflow が作成されます

1 つ目の方はこけてますが、2つ目の方は成功しています
Azure Portal で作成した Static Web Apps の概要ページを開きます
web アプリの URL が記載されているので、クリックしてアクセスすると無事に Hugo のサイトが表示されました

レポジトリにさらにプッシュして更新されるかどうかを確認

ローカルでページを1つ追加してみます

1

hugo new posts/my-first-post.md

を実行して、生成されたファイルをドラフトから変更しておきます

変更した内容を GitHub にプッシュしておきます
リモートと差分が生じていいるはずなので、プルしてから、プッシュします

1
2
3
4


git pull --rebase origin main #先にプルする
git add -A #変更を add
git commit -m "add page" #変更をコミット
git push # GitHub にプッシュ

そうすると自動的に workflow が実行され、完了すると Static Web Apps 側にページが追加されました

まとめ

Static Web Apps の作成時にリポジトリを選択しておくだけで、 CI/CD が簡単に構成できるように設計されいました
CI/CD 便利そうだけど難しそう。と思っていましたが想像以上に簡単に体験できました