簡単なサンプルアプリを作成してデプロイする手順のメモ。
※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)
を選んで「作成」。以下の順に入力していく。
- サブスクリプション、リソースグループ:任意のもの
- 名前:HelloStaticWebAppsSample
- 地域:任意
- GitHubアカウント:サインインする
- 組織:GitHubアカウント
- リポジトリ:hello-static-webapps-sample
- 分岐:main
- ビルドのプリセット:Custom
- アプリの場所:/hello-app
- APIの場所:/api
- アプリの成果物の場所:build
入力したら「確認および作成」をクリック。確認画面で内容を確認して「作成」をクリック。
しばらく待ってデプロイが完了したら、「リソースに移動」をクリック。
「GitHubアクションの実行」をクリックすると、別タブで Azure Static Web Apps CI/CD
のワークフローの進行状況が表示されるので、完了するまで待つ。
CIが通ったら、先ほどのAzureポータル画面で表示されたURLにアクセスすると、ローカルで動かしていた画面が開き、ちゃんと動作するはず!
お・わ・り。