はじめに
今回は著者がハッカソンで作成した ReactアプリをAzureにデプロイする手順となります。それに加え、ムームードメインで取得したカスタムドメインを登録するまでをご説明します。
目次
アプリの説明
https://osakana-nazono-katakana.takatoshiinaoka.com/
今回Auzreにデプロイするアプリです。アプリの詳細はこちら。
StaticWebAppsの作成
Azure portal に移動し、「静的Webアプリ」を作成する。
デプロイ状況確認
Githubからのデプロイを指定すると、自動でymlファイルが作られ、CI/CDが構築されます。GithubのActionsからデプロイの状況を確認できます。
アプリの動作確認
Azure portalのURLからアプリに移動できます。
アプリのTop画面はこんな感じです。
これで、アプリのデプロイができました。
が、このままではデータが無いので、データベースと接続しましょう。
CosmosDBの作成と接続
Azure portal に移動し、「CosmoDB」を作成する。
- API オプションの選択、「コア (SQL) - 推奨」
- 場所、「東日本」
- 容量モード、「Serverless」
CosmosDB アカウントの作成 コア（SQL）
以下のように入力し、作成します。
Service Unavailable エラーが出る場合
【CosmosDB】リソースを作成できない Service Unavailable エラーの解決方法
データベースの作成
CosmosDBのインスタンスの中に、データベース と コンテナ を作成します。
{プロジェクト名}/api/{API名}/function.json ファイルのDB情報と一致させてください
データのアップロード
すでに用意してあるJsonデータをDBにアプロードします。
データの確認
アップロードしたデータを確認することができました。
環境変数の設定
「キー」メニューから「プライマリ接続文字列」をメモします。
Azure Static Web Appsの「構成」画面を開きます。
「追加」ボタンを押し、下記内容で追加後、「保存」を押下します。
- 名前:
CosmosDBConnection - 値: 先程メモしたAzure Cosmos DB接続文字列
アプリの動作確認
データベースに繋いだので、問題と選択肢が表示されるようになりました。
ドメインの登録
ログイン|ムームードメイン
著者が使用しているムームードメインの例で説明します。
DNSの設定
ログイン後、ムームーDNSのドメイン処理、変更をクリック。
設定2のカスタムドメインでサブドメインを設定。
- サブドメイン：
osakana-nazono-katakana - 内容： azurestaticapps.netのURL（両端の「/」を除く）
アプリの設定
Azure portal のStaticWebAppsに移動、カスタムドメインをマップします。
ドメイン名を入力し、検証と追加をします。（この操作は時間がかかります）
- ドメイン名：サブドメイン+自分のドメインのURL（両端の「/」を除く）
カスタムドメインにアクセス
https://osakana-nazono-katakana.takatoshiinaoka.com/
少し時間を待つと「検証済み」となりドメインが反映されます。