【Azure App Service】静的Webアプリデプロイ(VSCode&GitHub使用)

Microsoft社のAzure App Service(静的Webアプリ)を使い、GitHubに登録したWebアプリを同社のクラウド基盤上にデプロイ(ユーザーが使用できるよう運用環境に導入)する方法を紹介します。

開発環境：

OS：Windows 11
Webブラウザー：Edge
開発ツール：VSCode(Windows版), Git for windows

Azure App Service：Freeプラン(静的Webアプリ)

使用Webアプリについて
Webアプリの開発環境整備
Webアプリ実装
- index.htmlの内容
- script.jsの内容
Webアプリのリポジトリ用意
Webアプリのデプロイ
Webアプリの動作確認
おわりに

使用Webアプリについて

今回はMicrosoft社のクラウド環境上への静的Webアプリのデプロイ方法の紹介ということで、HTML画面とクライアント側の処理だけで完結する、簡単なWebアプリを用意します。
と言っても、動作が全くないWeb画面では寂しいので、ランダムにきつねの画像のURLを取得する「Random FOX API」を使用し、Web画面上のボタンを押すと画像が切り替わるようにします。また、WebデザインはCDNのサイトにあるBootstrapのテンプレートを参照する形とします。

以下の通り、非常に簡単な処理となります。

Webアプリの開発環境整備

Webアプリの開発環境としてVSCodeとGitを使用します。大まかな手順は以下の通りとなります。

VSCodeインストール
VSCode日本語化
Git for Windowsインストール
GitHubアカウント作成
アプリ作成(工程3)
ローカルリポジトリ作成(工程4)
リモートリポジトリ作成(GitHubと連携)(工程4)

環境構築に関しては紹介記事が多数あります。よく纏まっていて分かりやすいサイト様のリンクを以下に掲載します。

Webアプリ実装

VSCode上で[random_fox_api]フォルダーを作成し、その下に[index.html]ファイルと[script.js]ファイルを作成します。

index.htmlの内容

[画像を表示]ボタン押下時の処理は別ファイルscript.jsで実行している
Webデザイン用のCSSとJavaScriptはCDNのサイトにあるBootstrapのファイルを参照して使用している
id="res_image"の要素がAPI実行結果から得た画像、id="res_url"の要素がその画像のあるURLとなる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Fox API</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container">
    <h1 class="p-3 mb-2 bg-success text-white">Random Fox API</h1>
    <BR>
    <h6>ボタンを押すときつねの画像をランダムに表示します。</h6>
    <p><button id="fetchButton" class="btn btn-success" data-bs-toggle="collapse">画像を表示</button><pre id="res_url"></pre></p>
    <p><img id="res_img" src="" alt="" width="640"></p>
    </div>
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

script.jsの内容

[画像を表示]ボタン押下時にfetchData()を実行している
fetchData()内ではAPIから画像データのURLを取得し、index.htmlのid=“res_image”とid=“res_url”の要素に設定している
API実行時にエラーが発生した場合は、エラー内容をid=“res_url”の要素に設定している

document.getElementById('fetchButton').addEventListener('click', fetchData);

async function fetchData() {
    const apiUrl = 'https://randomfox.ca/floof';

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error('ネットワークが応答しません'); 
        }
        const data = await response.json();
        document.getElementById('res_img').src = data.image;
        document.getElementById('res_img').alt = data.image;
        document.getElementById('res_url').textContent = data.image;
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('res_url').textContent = 'Error: ' + error.message;
    }
}

Webアプリのリポジトリ用意

VSCodeの[ターミナル]で以下コマンドを実行し、左メニューの[ソース管理]アイコンを選択し、[コミット]を選択します。

git config –-global user.name {GitHubのユーザー名}
git config -–global user.email {GitHubのEmailアドレス}
git init

*コマンドは作成したWebアプリのルートフォルダーで実行します

*git initコマンドにより、ローカルリポジトリが作成されます

[COMMIT_EDITMSG]ファイルが表示されたら、ソース管理対象のファイルの先頭の#を削除し、[Ctrl]+[s]キーを押して保存し、閉じます。

*この例では、ブランチはmasterという名前で作成されています

[Branchの発行]を選択します。
GitHubへのサインインを促されたら、[許可]を選択してサインインします。
リポジトリが正常に発行された旨のメッセージが表示されれば問題ありません。[GitHub上で開く]を選択します。

対象リポジトリ(この例では[random_fox_api])内にソース管理対象ファイルが表示されれば問題ありません。

Webアプリのデプロイ

Microsoft Azureのポータル画面にアクセスし、[その他のサービス]を選択します。
検索欄に[app]と入力し、[App Service]が表示されたらこれを選択します。
[作成>静的Webアプリ]を選択します。
なお、Azureにまだサインアップしていない場合は、こちらの記事を参考にサインアップしてください。

以下の通り設定します。

サブスクリプション：(既存のサブスクリプションを選択)
リソースグループ：(App Service用のリソースグループを選択し、ない場合は新規作成する)
名前：(アプリ名を適宜入力)
プランの種類：Free(実用途に応じて選択)
ソース：GitHub
GitHubアカウント：(工程4で使用したGitHubアカウントでサインインする)

[Authorize AzureAppService]を選択します。
GitHubの対象リポジトリに関する設定項目が表示されますので、以下の通り設定し、[確認および作成]を選択します。

組織：(工程4のGitHubユーザーを選択)
リポジトリ：(工程4のリポジトリ名を選択)
分岐：(工程4のブランチ名を選択)
アプリの場所：/(この例ではアプリフォルダー直下にリソースを配置したため)

設定内容を確認し、問題なければ[作成]を選択します。
[デプロイが完了しました]と表示されたら、[リソースに移動]を選択します。

図表5-4 AzurePortalで静的Webアプリ作成(確認と作成,デプロイ完了)

URL欄のリンクを選択します。

*デプロイ完了直後はアクセスできませんが、少し時間を置くと、以降はこのURLからアプリにアクセスできるようになります

アプリにアクセスできるようになるまでの間に、VSCodeのAzure App Service関連の拡張機能の設定を行います。

画面中央下部の[Create a static web app from VS Code]の[Download the extension]を選択します。

VSCodeの左メニューの[拡張機能]に[Azure Static Web Apps]が表示されますので(表示されない場合は[azure static]等でキーワード検索)、[インストール]を選択します。
左メニューに[Azure]アイコンが表示されますのでこれを選択し、[Sign in to Azure]を選択します。