1. 環境構成について

Azure Static Web Apps を利用すると、SPAを簡単にホスティングする事ができます。実際にReact, Material-UIを用いて動作させた際の備忘録です。

Azure Static Web Appsを利用しなくてもいままでのApp Serviceで対応できる内容なのですが、Azure FunctionsやGithub等を用いたCI/CDがより連携し易くなっています。

構築は基本的に以下URLのチュートリアル通り進めればReactベースSPAのデプロイを実施できます。

Azure Static Web Apps を使用して Angular、React、Svelte、または Vue の JavaScript アプリを発行する

今回は上記に加え、コンテンツデータはCosmosDB から取得しました。 ※以降の手順ではローカルでVSCode, NodeJSが利用できる環境を利用しています。

2. 構築順序について

Microsoft learnのシナリオではJSライブラリのデフォルトプロジェクトをデプロイしますので、バックエンド側のサービスが含まれていません。

バックエンド側の準備は先行して行う必要がありますので、今回は以下の順序で準備しました。(先にフロントエンドを準備してからでも問題ありません。)

[バックエンドDBの準備(Cosmos DB)](#3-1. Cosmos DB )
[データ取得APIの準備(Azure Functions)](#3-2. Azure Functions)
[フロントエンドの準備(Azure Static Web Apps)](#3-3. Azure Static Web Apps)

3. 構築

記事作成時点ではAzure Static Web AppsもPreview段階である為、無料、Azure Functions も一定量まではAlways Freeに含まれますので、Azure/Githubアカウントさえ準備できれば、コストをかけることなくテスト利用する事ができます。

3-1. Cosmos DB

Cosmos DBでは、Webアプリを作成する際に利用するデータをJSON形式で格納します。

Cosmos DBはVS Codeからも操作できますが、今回はAzure Portalから操作しました。Cosmos DBの画面から「追加」と進めれば、GUI操作のみでDocument DBを作成できます。Always Freeの範囲内で利用する場合は、Azure Cosmos DBアカウントの作成のステップで「Free レベル割引の適用」を適用します。以下を参考にDBを作成します。

Cosmos DBチュートリアル

データはJSON形式でサンプルデータを追加します。特に何もなければ、Cosmos DBの「クイックスタート」メニューからプラットフォームを選択し、Itemsコンテナーの作成を実施しましょう。

SAMPLE DATA

{
  id: 001,
  name: taro
}

{
  id: 002,
  name: hanako
}

3-2. Azure Functions

Azure FunctionsではWebページが閲覧された際に読み込まれるAPIを作成します。APIが呼び出されたら、Cosmos DBからJSONを取得し、Webクライアントに返します。

VSCode Azure Static Web Apps拡張機能の中からFunctionsを作成しても、Azure Functionsのどちらから作成しても問題ありません。以下を参考にプロジェクトを作成します。

関数を作成する Javascript

テストだけであれば、数行のJS初期コードでもJSONデータを返すことができす。

test.js

module.exports = async function (context, req) {
    const id = (req.query.id || (req.body && req.body.id));
    const responseMessage = id;
    
    var documents = context.bindings.inputCosmosdb;

    context.res = {
        body: documents,
        status: 200
    };
    context.done();
}

Functions側の設定として、in,outの設定と、cosmosDB接続設定を追加しておきます。

cosmos DB接続設定のdatabaseName,collectionNameはcosmosDBで作成時に指定した文字列を指定します。connectionStringSettingはAzure Functionsの設定->構成->アプリケーション設定->「新しいアプリケーション設定」で作成した名前を指定します。新しいアプリケーション設定には、cosmosDBのエンドポイントを指定します。

test.json

{
    "bindings": [
        {
            "authLevel": "anonymous",
            "type": "httpTrigger",
            "direction": "in",
            "name": "req",
            "methods": [
                "get",
                "post"
            ]
        },
        {
            "type": "http",
            "direction": "out",
            "name": "res"
        },
        {
            "type": "cosmosDB",
            "direction": "in",
            "name": "inputCosmosdb",
            "databaseName": "cosmosdb",
            "collectionName": "collection001",
            "connectionStringSetting": "cosmosdb_String",
            "Host": {
                "CORS": "*"
            }
        }
    ]
}

環境変数

変数名	値
cosmosdb_String	AccountEndpoint=https://cosmosDB-URL:443/;AccountKey=accountKeyString;

3-3. Azure Static Web Apps

先ずは以下のページを参考に、Webアプリを作成します。VSCodeでReactプロジェクトを作成、起動するには、以下コマンドを実行します。(npm start以降は任意)

npm init react-app my-app
cd my-app
npm start

ここまでで、React アプリが起動します。Ctrl+Cで終了できます。次にReactでよく利用するライブラリを追加していきます。axiosだけあれば今回のサンプルアプリは起動できます。

npm install --save react-router-dom
npm install node-sass
npm install axios
npm install normalize.css
npm i linkify
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

Webアプリを作成する

次にmaterial-ui を導入します。

npm install @material-ui/core

※material-uiを利用するのに必要なStylesheetの読み込み等は、`ProjectDirectory\public` 配下のindex.htmlに記載します。

Material UI Installation

実際にAPIからデータを取得するにはaxiosを利用します。

npm install axios
App.js (SAMPLE)

import './App.css';
import React, { useEffect,useState } from 'react'
import axios from 'axios'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
  root: {
    marginTop: 10,
  },
}));

function App() {
  const [data, setData] = useState({keyValues: []});
  const classes = useStyles();

  useEffect(() => {
    axios.create({baseURL: 'https://[sample].azurewebsites.net/api/[sample]'}).get().then((res) =>{
       //useContext等に取得したデータを保存し利用する
       console.log(res.data)
       setData({keyValues: res.data})
    })
  },[])

  return (
    
      This program print API datas.
      
      {
        {
          data.keyValues && data.keyValues.map((apidata) => {
            return {apidata.id} , {apidata.name}
          })
        }
      }
      
    
  );
}

export default App;

最後にgitにpushし、github Actionsによりビルドされ、デプロイすれば、Azure Static Web Appsで作成したリソースのURLから確認する事ができます。

4. その他

CORS

ブラウザからAzure Functions のURLを開くとJSONデータを取り出せるのに、React プログラムからはデータを取得できない場合、Azure FunctionsにCORSの設定が漏れている可能性があります。

独自ドメインの設定

デフォルトではAzure Static Web AppsはMicrosoft所有のドメイン上で展開されます。これに独自ドメイン名でアクセスしたい場合、有料プランに切り替えた上で、設定を行う必要があります。

カスタムドメインの設定