はじめに

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

目次

https://osakana-nazono-katakana.takatoshiinaoka.com/
今回Auzreにデプロイするアプリです。アプリの詳細はこちら。

Azure portal に移動し、「静的Webアプリ」を作成する。

Githubからのデプロイを指定すると、自動でymlファイルが作られ、CI/CDが構築されます。GithubのActionsからデプロイの状況を確認できます。

Azure portalのURLからアプリに移動できます。

アプリのTop画面はこんな感じです。

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

Azure portal に移動し、「CosmoDB」を作成する。

Service Unavailable エラーが出る場合
【CosmosDB】リソースを作成できない Service Unavailable エラーの解決方法

CosmosDBのインスタンスの中に、データベース と コンテナ を作成します。

{プロジェクト名}/api/{API名}/function.json ファイルのDB情報と一致させてください

すでに用意してあるJsonデータをDBにアプロードします。

アップロードしたデータを確認することができました。

「キー」メニューから「プライマリ接続文字列」をメモします。

Azure Static Web Appsの「構成」画面を開きます。
「追加」ボタンを押し、下記内容で追加後、「保存」を押下します。

データベースに繋いだので、問題と選択肢が表示されるようになりました。

ログイン|ムームードメイン
著者が使用しているムームードメインの例で説明します。

ログイン後、ムームーDNSのドメイン処理、変更をクリック。

設定2のカスタムドメインでサブドメインを設定。

Azure portal のStaticWebAppsに移動、カスタムドメインをマップします。

ドメイン名を入力し、検証と追加をします。（この操作は時間がかかります）