Azure Static Web Apps で静的ページをDeployするまで

# Azure Static Web Apps（SWA）
この記事は、ReactやSPAを簡単に公開・管理できるAzureの機能「Static Web Apps」を使用して、空のHtmlページを公開する記事です。
> Azure Static Web Appsは、Microsoft Azureが提供するサービスで、静的なWebページやアプリケーションを簡単にデプロイし、ホストするためのものです。このサービスは特に、モダンなWeb開発のアプローチを取るアプリケーションに適しており、React、Vue、Angular、およびSvelteなどのJavaScriptフレームワークを使用したSPA（シングルページアプリケーション）や、静的サイトジェネレーター（例：Gatsby、Hugo、Jekyll）を使用したサイトのデプロイメントをサポートしています。（By GPT4）

# 手順
## 1. GitHub に空のリポジトリを用意する
参照: 

https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository

### リポジトリを作成

GitHubに、デプロイに使用するための新しいリポジトリを作成します。
私の場合は、`azureTest1`という名前の Private リポジトリとしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/8a361419-b731-f5a9-b28e-430b1eeb3ec4.png)

### mainブランチを作成

後で使用するので、新しく作ったブランチに最初のコミットを行っておきます。

...or create a new repository on the command lineの部分のコードを使うと手軽に済むと思います。

:::note warn
コマンドは新しく作成したフォルダの中で実行してください。
コマンドを見ればわかりますが、`.`ディレクトリが`git init`の対象になります。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/37f4ee3d-9100-bcf3-b34c-a36b80a339b6.png)

first commitが行われていることを確認したらOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/f846f222-70cb-237f-751d-2207a8bcdc6a.png)

## 2. Azure の権限周りを構成する

Azureにはサブスクリプションやリソースグループという仕組みがあり、それらを使って、いい感じに権限の付与が行えるようです。

参考:

https://qiita.com/Shoma0210/items/49da4a87c70411ffd1e6

今回は単純に、Static Web Apps のリソース（各アプリの使用権限のようなもの。たぶん）を作成します。Azureにログインして、ポータルから今回使用する権限を構成します。

Azureのポータル:

https://portal.azure.com/#home

### 1.リソースの作成を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/92d4ba50-4e2b-acc4-bd70-8ab400b15859.png)

### 2. Static Web Apps （静的Webアプリ）を探し出して、静的 Web アプリの作成を開く

### 3. 設定し、リソースを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/0db555b4-0328-5d74-d86a-92bf2fa69c58.png)

いい感じに設定を入力していきます。

- いい感じのサブスクリプションを選択
- いい感じのリソースグループを選択または作成（「新規作成」リンクから作成できます）
- 名前の設定
    - 今回は`test-myapp`としました

「デプロイの詳細」から、GitHubとの連携を行い、連携するリポジトリを設定します。

:::note warn
ここで「分岐」からデプロイに使用するブランチを選ぶのですが、前もってmainブランチを作成|pushしておかないと、ここに何も表示されず、先に進めなくなります。
:::

:::note info
リポジトリの選択ボックスが空になり、自分のリポジトリが出てこなくなることがありました。
「組織」ボックスから自分の名前をもう一度選択することで出てきました。
:::

「ビルドの詳細」から、これから作成するリポジトリにおいて、どこに動かしたいファイルを置くのか指定します。今回はHTMLファイルを置くだけなので、「ビルドのプリセット[^1]」から「HTML」を使用します。
[^1]: ここの「ビルドのプリセット」ですが、最初はここを選択することで勝手に追加されるファイルが増えたりするのかと思っていました。単に下の3つの欄を自動設定してくれるだけっぽいです。

設定が終わったら、確認と作成をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/4459a57d-7e17-730c-e1cb-a151a86a1c02.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/ed86b328-00b0-5251-b78a-d86fb711e44b.png)

自分のリポジトリを確認し、GitHub ActionsがコミットされていればOKです。まだHTMLファイルを置いていないので、ビルドは失敗していて問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/4e20e6ef-fede-d657-5d8f-bb8d3f82fefc.png)

## 4. リポジトリにページを作成し、pushする

これからファイルを追加していくのですが、先ほどAzureがGitHub上のリポジトリを更新した[^2]ため、ローカルとGitHub上に差分が生まれています。

ですので、本記事の手順に従ってすでにGitHubリポジトリをクローンしている場合、クローンしたローカルフォルダ内で`git pull`を実行して、Azureが行った変更[^2]をローカルに反映しておきます。
[^2]: `.github/workflows`フォルダ内に、GitHub Actionsの設定ファイルが追加されているはずです。
。

```
git pull
```

自分が作成したGitHubリポジトリをクローンし、ローカルで開きます。私はwsl上のvscodeで開きました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/2b694dec-f57f-5d7e-193c-95e82f58904b.png)

この直下に`index.html`ファイルを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/8333007d-86d2-9a8b-3e9f-c18e132f7a9e.png)

今回使用したコードはこちらです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>SamplePage</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
</body>
</html>
```

コミットしてプッシュし、リポジトリのページを確認します。
GitHub Actions が動いていれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/ade6074b-964d-54ad-a4e6-0ee90fc64315.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/3783329f-19be-f356-da74-b4eff5896ec5.png)

Actions タブから詳細を確認しても良いでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/c212c8f8-f213-3e03-44e4-842d0e3687f6.png)

## 5. ページを確認する

ページを確認しに行きます。Azureトップページのサブスクリプションから、→リソースグループ→リソース（静的Webアプリ）→URLとたどってページを確認することもできますが、面倒です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/55785ed1-df1c-d223-e461-d19b07ef24b5.png)

検索バーにアプリの名前を入れて、検索するのが早そうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/8efe50da-482b-c9f0-c246-88c60dd4f515.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/94cbde4e-24ae-05d5-ff37-99a988f772b7.png)

ここの「URL」からデプロイ先に飛べます。必要なさそうな情報は一応隠しておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743934/9ea88af3-8065-3939-3fe7-2934a5a51c05.png)

自分が作成した通りのHTMLファイルが表示されたらOKです。

# 展望

- SWAを使用した、Reactなどのフレームワークを用いたページのホスト
- SWAを使用した、APIの公開と使用、さらに外部APIへのアクセス
- Cosmos DBなどのデータベース機能やストレージ機能との接続
- Azure AD B2Cを使用したユーザーの登録・認証