Azure Static Web Apps + Gatsbyでサイト公開をしてみる

# はじめに
普段は主にC#でレガシー寄りなサーバーサイドの開発をしています。
最近気になるReactとC#技術者としては外せないAzureから、Static Web Apps(プレビュー版) + Gatsbyで両方の技術に触れてみるのがこの記事の目標です。
初めて触れる技術にしては詰まることなく公開まで行けたので、モダンな技術を手軽に**無料**で体験したい人にはお勧めです。
進め方は[Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/modules/create-deploy-static-webapp-gatsby-app-service/)を参考にしています。

# 事前準備
* [Git](https://git-scm.com/)と[Node.js](https://nodejs.org/en/)がインストール済み
* [GitHub](https://github.com/)のアカウント作成済み
* [Azureサブスクリプション](https://azure.microsoft.com/ja-jp/)が利用できる環境  
AzureのアカウントはGithubアカウントが利用できます。  

# GitHubで環境構築
さっそくMicrosoftLearnとは違う手順ですが、こちらのの方が手軽だと思ったのでGitHubからGatsbyの環境を構築します。
まず、[Gatsbyスターターライブラリ](https://www.gatsbyjs.com/starters/?v=2)から作成したいサイトの雛形を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/596d45f9-f0b5-e9ac-c75a-17ed26adf276.png)
このページにはブログ形式の構成やポートフォリオ向けのシングルページなど、様々なスターターがあります。今回は公開が目標なので、[Gatsby Default Starter](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-default/)を選択しました。宇宙服を着たおじさんが目印です。
スターターの個別ページには要件やインストールコマンドなどが記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/e3270ba3-a436-e56b-d024-98c0fe34b1f2.png)
今回はGitHubから環境を構築するので、[:octocat:Souse](https://github.com/gatsbyjs/gatsby-starter-default)からGitHubへ飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/be837679-a4d0-abe9-f104-8ddff775429c.png)

そこからページ上部の**Use this Template**ボタンでこのリポジトリをテンプレートとして自分のリポジトリを作成します。
以上で、GitHubでGatsbyの環境構築ができました。
後はローカルにクローンすれば、開発が可能になります。


# ローカルでの開発
開発サーバーの起動は先ほどクローンしてきたプロジェクトディレクトリに移動して以下のコマンドで起動できます。

```
gatsby develop
```

すると、以下のようなメッセージが出力されます。

```
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
```

メッセージに従って、ブラウザでアクセスしてスターターと同じ**おじさん**がいるページが表示されれば、成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/7414556e-f25e-a46e-c76d-d35687c6493d.png)
下のアドレスはGraphiQLを開くことができ、GraphQLApiを簡単に作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/a1927c2a-8cde-1c7c-08f8-cb3027d0ad42.png)
以上でローカルで開発する準備は整いました。
今回はとりあえず公開を目指すので、GraphQLの取得方法を少し触りつつ次のStaticWebAppsでの公開を目指します。

# Azure Static Web Appsで公開する
公開の手順は以下の通りに行います。
1. ローカルでビルドして確認
2. 開発内容をGitHubにプッシュ
3. Azure Static Web Appsからビルド

## 1. ローカルでビルドして確認
サイトを公開する前に必ずローカルでビルドが出来るか確認をします。

```
gatsby build
```

上記のコマンドでローカルの`/public`フォルダに公開用のビルドファイルが生成されます。
`/public`に移動して以下のコマンドでビルドしたファイルでサーバーが起動されます。

```
npx http-server -p 5000
```

ブラウザで`http://localhost:5000`にアクセスして、例のおじさんと開発した内容が表示できているか確認できれば次の手順に移ります。

## 2. 開発内容をGitHubにプッシュ
最初にGitHubで自分のリポジトリを作成していれば、そのままプッシュすれば完了です。
Gatsby-cliから作成した場合は、Gitを初期化して自分のリポジトリにプッシュし直す必要があるのでその分手軽になったと思います。

## 3. Azure Static Web Appsからビルド
Azureにログイン後、ポータルのサービスの検索から**静的 Web アプリ**を検索して、ページに遷移します。
![新規追加画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/5640de55-ad7c-7389-2111-afdce52184d4.png)
遷移後、追加リンクから静的Webアプリの作成を行います。
![基本入力画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/1fccfce0-8381-b609-19f7-c7ae08da42df.png)
基本入力画面では、名前・地域を任意で入力して、先ほどプッシュしたGitHubのリポジトリを指定します。
今回はAzureのアカウントがGitHubのアカウントから作成したので、GitHubアカウントの指定は必要ありませんでした。
各項目が入力出来たら、下部の**次：ビルド>**をクリックします。
![ビルド画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/fd40da93-1eae-be0f-1ad2-b6e6104d8a7c.png)
ビルド入力画面ではアプリの成果物の場所を**public**と入力すれば完了です。
そのまま、**確認および作成**をクリックすると、検証が開始されます。
検証が完了後、作成ボタンをクリックするとデプロイが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/c237a536-b07e-3eee-756c-662f8166b195.png)
しばらく待つとデプロイが完了します。
しかし、この段階ではまだサイトは公開されていません。表示されたURLをアクセスしても開発したおじさんは表示されません。
作成したGitHubリポジトリのActionsページを見ると、Azure Static Web Apps CI/CDが追加されBuild and Deploy Jobが走っているはずです。
このJobが完了すれば、Azureで発行されたURLに開発した内容が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379491/4e120e5f-3efc-df47-5496-147c639600b2.png)

# まとめ
最近のモダンな開発手法を知らない自分でも特に詰まることなくデプロイすることが出来ました。
AzureからGitHubActionsにCDが自動で追加されているのは、マイクロソフト傘下になった恩恵を感じます。
これを機会に、バックエンドとも特に関係がありそうなGraphQLを中心に手を動かしていきたいです。