簡単なサンプルアプリを作成してデプロイする手順のメモ。
※2020年11月時点で未だにプレビュー版なので、手順は大きく変わる可能性もあり

前提条件：

nodeがインストール済み
VS Codeがインストール済み
Azure Functions Core Toolsがインストール済み

Reactアプリの作成

プロジェクトのルートを作成。

$ mkdir hello-static-webapps-sample && cd hello-static-webapps-sample

create-react-appでサクッと作成。

$ npx create-react-app hello-app

VS Codeを開いてロゴとか使わないファイル消す。こんな感じで残った。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Hello</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.css

body {
  margin: 0 auto;
  text-align: center;
  font-family: "メイリオ", sans-serif;
  background-color: darkslategray;
  color: white;
}

App.js

function App() {
  return (
    <div>
      Hello!
    </div>
  );
}

export default App;

ここまでで一旦画面が表示されるか確認する。
hello-app フォルダにて

$ npm start

ブラウザで画面が表示されればOK。

次にHelloコンポーネントを作る。

import { useState } from 'react';

const Hello = () => {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('Hello!');

  const handleNameChange = (e) => setName(e.target.value);

  function getGreeting() {
      //TODO: APIコール
      return "Hi!";
  }

  const handleButtonClick = (e) => {
      setGreeting(getGreeting());
  };

  return (
      <>
          <div>
              <input type="text" value={name} onChange={handleNameChange} placeholder="Enter your name" />
              <input type="button" onClick={handleButtonClick} value="Greet" disabled={!name} />
          </div>
          <span>{ greeting }</span>
      </>
  );
}

export default Hello;

App.js を修正。

import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App

画面は以下のようになる。

APIの作成

プロジェクトルート直下に api ディレクトリを作成する（Azure Functionsのプログラムや設定ファイルを格納）。

以下のVS Code拡張をインストールしておく。

Azure Functions
~~Azure Static Web Apps (Preview)~~

※Azure Static Web Apps拡張を入れると、VS Code側からプロジェクトの作成が行えるようだが、今回の手順では不要。

VS CodeのAZUREタブの、フォルダのアイコン（Create new project）をクリック。

Azureのアカウント認証が求められたらブラウザでログイン後、以下の順に入力していく。

ディレクトリ：apiディレクトリを選択
言語：JavaScript
テンプレート：HTTP Trigger
ファンクション名：GetGreeting
認証レベル：Anonymous

api ディレクトリ配下に各種ファイルが生成される。

index.js

module.exports = async function (context, req) {
    const name = context.bindingData.name;
    const greeting = `Hello, ${name}`;

    context.res = {
        status: 200, /* Defaults to 200 */
        body: {greeting: greeting},
        headers: {
            'Content-Type': 'application/json'
        }
    };
}

function.json

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get"
      ],
      "route": "greeting/{name}"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

URLパスの一部で名前を受け取るため、 greeting/{name} というルート設定を行っている。

F5を押すと、Azure Functions Core Toolsによってローカルで関数が起動する。

ブラウザで http://localhost:7071/api/greeting/Taro にアクセスし、結果がJSONで取得できることを確認。

APIの呼び出し

Hello.js の実装を修正。fetch APIでGetGreetingをAjaxコールして、データを取得する。

  async function getGreeting() {
    const response = await fetch(`/api/greeting/${name}`, {
      method: 'GET'
    });
    const json = await response.json();
    return json.greeting;
  }

  const handleButtonClick = (e) => {
    getGreeting()
      .then(value => {
        setGreeting(value)
      })
      .catch(err => {
        console.log(err);
      });
  };

このままではローカルでAPI連携できないので、package.json (React側)に一行追加してプロキシ設定を行う。

"proxy": "http://localhost:7071",

ブラウザから名前を入力して「Greet」をクリックし、以下のように名前入りのメッセージが表示されればOK。

デプロイ

ルートディレクトリで git init する。
.gitignore は最低限以下を記述。

node_modules
build

コミットする。

$ git add .
$ git commit -m "first commit"

GitHubのWeb画面から、リポジトリを新しく作成する（リポジトリ名：hello-static-webapps-sample）
…or push an existing repository from the command line で画面に表示されるgitコマンドをローカルで叩いてpushする。

GitHubの画面から、正常にpushされたことを確認する。

次にAzureポータルにログインし、リソースの作成（＋）をクリックし、 Static Web App (preview) を選んで「作成」。以下の順に入力していく。