ReactアプリをStatic Web AppsとCosmos DBにデプロイ(ドメイン登録まで)

# はじめに
今回は著者がハッカソンで作成した ReactアプリをAzureにデプロイする手順となります。それに加え、ムームードメインで取得したカスタムドメインを登録するまでをご説明します。

# 目次
- [アプリの説明](#アプリの説明)
- [StaticWebAppsの作成](#StaticWebAppsの作成)
- [CosmosDBの作成と接続](#CosmosDBの作成と接続)
- [ドメインの登録](#ドメインの登録)


# アプリの説明
[https://osakana-nazono-katakana.takatoshiinaoka.com/](https://osakana-nazono-katakana.takatoshiinaoka.com/)
今回Auzreにデプロイするアプリです。アプリの詳細は[こちら](https://topaz.dev/projects/8a75f0f1a40778afe31a)。

![スクリーンショット 2022-07-18 10.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/ba99632d-065a-a0cb-283d-f638ae6d8e36.png)


# StaticWebAppsの作成
[Azure portal](https://portal.azure.com/) に移動し、「静的Webアプリ」を作成する。

![スクリーンショット 2022-09-11 22.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/65ca8ef8-54b2-b0a2-50a4-f97cb2b19bd7.png)
![スクリーンショット 2022-09-11 22.35.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/2b0af70c-e989-3d57-48d4-fa267d235f35.png)

### デプロイ状況確認
Githubからのデプロイを指定すると、自動でymlファイルが作られ、CI/CDが構築されます。GithubのActionsからデプロイの状況を確認できます。
![スクリーンショット 2022-09-11 22.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/ff951bb6-9921-2ba7-46aa-234a23899bc1.png)

### アプリの動作確認
[Azure portal](https://portal.azure.com/)のURLからアプリに移動できます。
![スクリーンショット 2022-09-11 22.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/6bc597b7-823e-4f5b-0784-894145d240bc.png)

アプリのTop画面はこんな感じです。
![スクリーンショット 2022-09-11 22.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/12d5165f-7f89-3372-321a-503b74c3b7bd.png)

これで、アプリのデプロイができました。  
が、このままではデータが無いので、データベースと接続しましょう。


# CosmosDBの作成と接続
[Azure portal](https://portal.azure.com/) に移動し、「CosmoDB」を作成する。
- API オプションの選択、「コア (SQL) - 推奨」
- 場所、「東日本」
- 容量モード、「Serverless」

### CosmosDB アカウントの作成 コア（SQL）
以下のように入力し、作成します。
![スクリーンショット 2022-09-11 21.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/b413d3fb-5a86-e304-98f3-44ceb8a8aa4a.png)

> Service Unavailable エラーが出る場合
[【CosmosDB】リソースを作成できない Service Unavailable エラーの解決方法](https://qiita.com/takatoshiinaoka/items/5cc8ebe8a26cf3454ac0)


### データベースの作成
CosmosDBのインスタンスの中に、**データベース** と **コンテナ** を作成します。 
> {プロジェクト名}/api/{API名}/function.json ファイルのDB情報と一致させてください
 
![スクリーンショット 2022-09-11 21.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/b604d9ec-7831-1477-ca95-9fdaf1d9c2b8.png)

### データのアップロード
すでに用意してあるJsonデータをDBにアプロードします。
![スクリーンショット 2022-09-11 21.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/aa2092af-aed6-bed5-db4f-caa821d7054b.png)

### データの確認
アップロードしたデータを確認することができました。
![スクリーンショット 2022-09-11 21.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/8982c5ce-e5a7-aa52-37b8-f47962a07af4.png)

### 環境変数の設定
「キー」メニューから「プライマリ接続文字列」をメモします。
![スクリーンショット 2022-09-11 21.38.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/5f36530b-d2e3-addd-efba-bfa857113a6d.png)

Azure Static Web Appsの「構成」画面を開きます。
「追加」ボタンを押し、下記内容で追加後、「保存」を押下します。
- 名前: ```CosmosDBConnection```
- 値: 先程メモしたAzure Cosmos DB接続文字列

![スクリーンショット 2022-09-11 22.12.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/02c31be6-43b7-78f6-6eb2-b54fb3de70d1.png)

### アプリの動作確認
データベースに繋いだので、問題と選択肢が表示されるようになりました。
![スクリーンショット 2022-09-11 22.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/23114524-8859-9233-332c-ce02277b0f6e.png)


# ドメインの登録
[ログイン|ムームードメイン](https://muumuu-domain.com/checkout/login)
著者が使用しているムームードメインの例で説明します。  
### DNSの設定
ログイン後、ムームーDNSのドメイン処理、変更をクリック。
![スクリーンショット 2022-09-11 23.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/f71e5340-2c4d-8959-0d44-f08c87082324.png)
設定2のカスタムドメインでサブドメインを設定。
- サブドメイン：```osakana-nazono-katakana```
- 内容： azurestaticapps.netのURL（両端の「/」を除く）
![スクリーンショット 2022-09-11 23.24.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/2bcd759d-b56c-c34c-b791-0ac6bfc90fc6.png)

### アプリの設定
[Azure portal](https://portal.azure.com/#home) のStaticWebAppsに移動、カスタムドメインをマップします。
![スクリーンショット 2022-09-11 23.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/0c8991d4-3e22-0e57-fec9-8865ab70ba9f.png)
ドメイン名を入力し、検証と追加をします。（この操作は時間がかかります）
- ドメイン名：サブドメイン+自分のドメインのURL（両端の「/」を除く）
![スクリーンショット 2022-09-11 23.47.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520484/0e42b06a-2d2f-c5ce-4d26-432d406896bc.png)

### カスタムドメインにアクセス
[https://osakana-nazono-katakana.takatoshiinaoka.com/](https://osakana-nazono-katakana.takatoshiinaoka.com/)  
少し時間を待つと「検証済み」となりドメインが反映されます。





# 参考文献
[Svelte on Azure Static Web Apps with Azure Cosmos DB](https://aadojo.alterbooth.com/entry/2021/12/16/000000)