Azure完結でGatsbyサイトをデプロイする方法

弊社は Azure によるクラウド開発を得意としております。 ということで、ホームページも Azure 完結で Gatsby.js で構築してみました。

全体の構成

(1) ブラウザーから AzureCDN エンドポイントにアクセス
Gatsby 公式のキャッシュ設定に従って AzureCDN のキャッシュを構成します。

(2) AzrueCDN の配信元は AzureBlobStorage の静的 Web サイト
Gataby で生成した静的ファイルを AzureBlobStorage に配置し、AzureCDN の配信元に設定します。

(3) お問い合わせフォームは AzureLogicApps の API へ
AzureLogicApps で HTTP トリガーを作成し、お問い合わせフォームから呼び出します。

(4) AzureLogicApps から Outlook に接続してメール送信
AzureLogicApps のアクションで Outlook に接続し、メールを配信します。 Microsoft365 の共有メールボックスから配信するとお問い合わせメールが届かないこともなく安全です。

(5) AzureLogicApps から SharePoint に接続してお問い合わせログを記録
AzureLogicApps のアクションで SharePoint リストに接続し、お問い合わせログを記録します。 過去のお問い合わせを簡単に一覧できます。

(6) AzureDevOps から継続的デプロイ
AzureDevOps の Pipline を使って継続的デプロイします。 master ブランチが更新されると Pipline がトリガーされ、新しいリリースが作成された後、AzureBlobStorage にアップロードされます。

感想

一度デプロイがうまくいってしまえばパフォーマンス的には理想的な構成です。ただ、WordPress に比べると一般的なユーザーにはあまりやさしくない気がします‥。

AzureCDN のルールエンジンの設定は、Gatsby プラグインが用意されている Netlify などと違い自分で構成する必要があり、ハマりポイントです。

Gatsby で会社ホームページをつくるときに不便なのがお問い合わせフォームですが、AzureLogicApps を使えば安全に Outlook と接続できてメールが届かないこともなくなります。 WordPress だとアップグレードのたびにお問い合わせメールの確認をしていましたが、これなら安心ですね。