一般公開されたAzure Static Web Appsで、静的サイトを公開しよう
こんにちは。システムソリューション営業本部の吾妻です。
これまでプレビュー版の位置付けで提供されていた Azure Static Web Apps が、この度ようやく無事に GA (一般公開)されました。
Azure Static Web Apps とは、 GitHub や Azure DevOps といったコードリポジトリ(ソースコード置き場)にコミットしたソースコードを基に、自動的に静的サイトを公開することができるサービスです。
ここでいう静的サイトとは、PHPやPythonといったプログラミング言語を利用することなく、HTMLやCSS、クライアントJavaScript、画像や動画のファイルのみで構成されたWebサイトのことを指します。静的サイトでは、いったんファイル群をコンパイル・デプロイした後は、リレーショナルデータベースや他のアプリケーションサーバーに対して(Webサーバーから)アクセスすることがないため、パフォーマンスやスケーラビリティ、セキュリティ面でのメリットがあります。また、Azureのサービスらしく、簡単にAzure ADによる認証を掛けることが可能になっています。その一方で、検索機能やコメント投稿機能といった動的な機能は静的サイトだけでは実装することができないので、外部のWebサービスを埋め込んだり、 Static Web Apps 内で Azure Functions と連携させる機能を利用したりすることで実現します。
このように、従来のCMSを利用した情報発信とは、開発、デプロイ、記事投稿の手順が若干異なってくるため、本記事を参考に実践してみていただければと思います。
さっそくデプロイしてみましょう！
ローカル開発環境の準備
(1) WSLのコンソールを開いて、以下のコマンドを実行し、ローカルに Node.js やnpm がインストールされていることとバージョン情報を確認します。直接 Windows 上で実行しても構わないのですが、ビルド用の環境が揃っていないとエラーが発生しがちなので今回は WSL から実行しています。
| 実行するコマンド | node -v |
| 実行結果 | v14.15.3 |
| 実行するコマンド | npm -v |
| ②の実行結果 | 7.12.1 |
Gatsby 静的サイトジェネレーターの準備
今回は、 GitHub にコミットした Markdown ファイルをコンパイルして静的サイトとしてデプロイするために、 Gatsby という静的サイトジェネレーター (Static Site Generator) を利用します。(2) Gatsby 公式サイトの Starter Library にアクセスして、デプロイしたい静的サイトのイメージに近いテンプレート (Starter) を探します。今回は、 gatsby-starter-papan01 というものを選びました。
(3) 選択したテンプレートのページを開いて、 Install this starter locally: という項目に書かれているコマンドをクリップボードにコピーします。今回は、 gatsby new gatsby-starter-papan01 https://github.com/papan01/gatsby-starter-papan01 という文字列になります。
(4) ローカルで以下のようなコマンドを実行します。必要な依存パッケージがある場合は確認メッセージが表示されるので、 y と入力して先へ進めます。
| 内容 | npx (5)でコピーしたコマンド |
| 実際に実行するコマンド | npx gatsby new gatsby-starter-papan01 https://github.com/papan01/gatsby-starter-papan01 |
(5) gatsby-starter-papan01 というフォルダの中に必要なファイルが用意されるので、以下のコマンドを実行してコンパイルを実行します。
| ① npm install ② npx gatsby develop |
(6) コンパイルが完了すると、「Compiled successfully」とメッセージが表示されるので、ブラウザから http://localhost:8000 を開き、動作確認を行います。
(7) https://github.com/new にアクセスして、GitHub 上でソースコード類を格納するためのリポジトリを用意しておきます。ページ上では README.md や .gitignore といったファイルは追加せず、空のリポジトリのままにしておきます。今回は azure-static-web-apps-publish-gatsby としました。
(8) (5)と同じフォルダの中で、以下のコマンドを実行して、 git リポジトリを初期化・ GitHub 上 (リモート) のリポジトリの準備を行います。
| ① git init ② git add -A ③ git commit -m "initial commit" ④ git remote add origin https://github.com/＜GitHubユーザー名＞/＜リポジトリ名＞.git ⑤ git push -u origin master |
Azure Static Web Apps の作成
ローカルで用意してGitHubにコミットしたソースコードをもとに、コンパイルとデプロイを行う Azure Static Web Apps を用意していきます。1点だけ注意事項があり、普段 Azure Portal App から Azure ポータルにアクセスしている方も、以下の手順はブラウザで実行するようにしてください( GitHub アカウントを認証する際に別窓が開かず、先に進めなくなります)。
(9) Azure ポータルを開いて、左側のパネルにある「リソースの作成」をクリックします。
(10) 検索用のテキストボックスに「Static Web Apps」と入力すると、直下にサジェスト項目が表示されるのでクリックします。
(11) 「作成」をクリックします。
(12) リソースグループ名などの設定事項に入力してから、「GitHub アカウントでサインイン」をクリックして GitHub アカウントの認証を実行します。
(ブラウザではなく Azure Portal App でやろうとすると、ここでうんともすんとも言わなくなります)
(13) ブラウザの別ウィンドウが開き、認証画面が表示されるので、(Organization のリポジトリの場合は該当するものを「Grant」してから)、 Authorize ボタンをクリックします。
(14) 「Organization」「リポジトリ」「ブランチ」の各項目には、コンパイル対象となる GitHub リポジトリの情報を、「ビルドの詳細」の各項目には、 GitHub Actions によるコンパイルで必要となる情報を図のように設定して、「確認および作成」をクリックします。
(15) 「作成」をクリックします。
(16) デプロイが完了したら、「リソースに移動」します。
(17) 「 URL 」にアクセスしたい気持ちを抑えつつ、「デプロイ履歴」の下にある「 GitHub アクションの実行」をクリックします。
(いきなりURLにアクセスしても、デプロイしていないためコンテンツがアップロードされていない旨のメッセージが表示されます)
(18) GitHub Actions のページへ遷移するので、進捗状況を確認しつつ、ジョブが完了するのを待ちます。
Microsoft Docs によればデプロイが数分で完了するように書かれていますが、今回は 8 分弱掛かりました( Starter の種類やコンテンツの量などに依存すると思います)。
(19) (17) で表示されていた URL をブラウザで開くと、ローカルで実行した際と同様のページが表示されることが確認できます。
(20) ちなみに、 GitHub で main (master) ブランチ以外のブランチを作成して、プルリクエストを作成すると、GitHub Actions のアクションが自動的に実行され、ステージング環境の作成およびデプロイが行われます。現行環境をそのまま保持したまま動作確認を行うことができます。
 |
 |
まとめ
本記事では、Azure Static Web Apps を利用して、 GitHub にコミットしたソースコードを基に、静的サイトを Azure 上に公開する手順を駆け足でご紹介しました。裏側で GitHub Actions が活用されていることで、環境構築で悩むことなく、とても簡単にデプロイできることがこのサービスのメリットだと思います。
今回は枠の部分の作り方だけとなってしまったので、次回以降もう少し「デプロイされる中身」「動的なパーツの置き換え」の詳細について追いかけて記事を書ければと考えています。
関連記事はこちら
このブログで参照されている、 Git は、米国およびその他の国における Software Freedom Conservancy, Inc. の商標または登録商標です。
このブログで参照されている、 GitHub は、米国およびその他の国における GitHub Inc. の商標または登録商標です。
このブログで参照されている、Azure、Microsoft、Windows、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。
