はじめに

今回は、Azure上でWebアプリを公開するための新しいサービスである「Azure Static Web Apps」について紹介します。Azure Static Web Appsの機能およびユースケースや、実際にWebサイトを公開する方法について説明していきます。なお、Azure Static Web Appsは執筆時点ではプレビュー版となっています。プレビュー期間は無料で利用することができます。

Azure Static Web Appsとは

Azure Static Web Appsとは、サービス名にある通りStatic Web App（静的Webアプリ）と呼ばれる種類のWebアプリを公開するためのAzureのサービスです。このサービスにおける静的Webアプリとは、HTML・CSS・JavaScriptからなる静的コンテンツと、静的コンテンツから呼び出されるAPIをまとめた呼称です。Azure Static Web Appsは静的コンテンツの公開を担っており、APIについてはAzure Functionsでの公開をサポートしています。 またAzure Static Web Appsでは、ソースコードの管理をGitHubで行うことが前提となっています。GitHubでのワークフローを利用して、静的Webアプリのビルドやデプロイをコントロールします。 以下はAzure Static Web Appsの全体概要図です。

  • Azure Static Web Appsの全体概要図

    Azure Static Web Appsの全体概要図

図の上から順にアプリの開発から公開までの流れとなっています。開発したアプリをGitHubの特定のブランチにプッシュやプルリクエストすることで、GitHub Actionsと呼ばれるGitHub上で実行されるCI/CDの機能によってAzure上に静的Webアプリがデプロイされユーザーに公開されるようになります。
このようにAzure Static Web Appsは、Webサイトの構築から継続的なデプロイまでをサポートした、包括的なサービスとなっています。

ちなみに、AzureでWebアプリを公開するサービスには他にもAzure App Serviceがあります。App ServiceはAzure Static Web Appsと異なり、サーバサイドフレームワークを用いてWebアプリケーションを公開するサービスです。複雑なビジネスロジックを持つエンタープライズアプリケーションの場合はApp Serviceを、コーポレートサイトやブログサイトのような動的なコンテンツが比較的少ないサイトには、Azure Static Web Appsを使用するといったサイトの特性によるサービスの選択が必要です。

Azure Static Web Appsの機能・特徴

Azure Static Web Appsの機能や特徴としては以下のようなものがあります。

・静的コンテンツのホスティング
Azure Static Web Appsの最も基本的な機能のひとつです。HTML、CSS、JavaScript、画像などの静的コンテンツをAzureのリソース上にホスティングする機能を提供します。静的コンテンツは、CDNのようにAzureの世界中に分散されたマシン上に公開されるため、サイトの利用者は地理的に近いサーバーの静的コンテンツにアクセスすることでネットワークの遅延を減らすことができます。また、コンテンツの作成にはAngular、React、VueなどのフロントエンドフレームワークやGatsby、Hugo、VuePressなどの静的サイトジェネレーター（＊）などを利用することが可能です。

＊）WordPressなどの一般的なCMSがサイトアクセス時にWebページを生成しているのに対し、静的サイトジェネレーターでは、事前に生成したWebページをサーバーへアップロードして公開する仕組みのため、Azure Static Web Appsのユースケースにマッチしています。


・Azure Functionsとの統合によるAPIの提供
単純に静的コンテンツのみを公開する静的なサイトの作成に加え、APIを利用した動的なWebサイトを公開することも可能です。Azure Static Web Appsでは、Azure Functionsとの統合がサポートされており、これによってサーバーレスなAPIエンドポイントを提供できるようになっています。


・GitHubとの統合
前項でも説明した通り、Azure Static Web AppsはGitHubの利用を前提とした作りとなっています。GitHub上のリポジトリの特定のブランチを監視しているGitHub Actionsによって、コードのプッシュやプルリクエストをトリガーとしたビルドやAzure Static Web Appsへのデプロイが行われます。また、プルリクエストが作成されたタイミングでAzure Static Web Appsのステージング環境へのデプロイを行うこともできます。ステージング環境は本番環境とは異なる環境で、アプリの更新内容を視覚的に確認したり、受け入れテストを行うことなどができるようになります。

Azure Static Web Appsを使って静的コンテンツを公開しよう

ここからは実際にAzure Static Web AppsでWebサイトを公開するまでの作業を順に説明していきます。作業を行う場合は、事前にAzureとGitHubのアカウントを取得して下さい。また、本稿ではVisual Studio Code上でアプリの実装およびAzure Static Web Appsに関連するAzureリソースの作成を行う手順を説明します。

Visual Studio CodeでAzure Static Web Appsの開発準備を行う

まずは静的コンテンツの実装の前に、下準備としてGitHubリポジトリとAzure上にStatic Web Appsプロジェクトの作成を行います。Visual Studio Codeを使用すると、Azure Static Web Apps用の拡張機能からこれらのリソースの作成を行うことができます。
Visual Studio Codeを開き、左側のメニューから拡張機能のアイコンを選択し「Azure Static Web Apps」を検索します。

  • Visual Studio CodeにAzure Static Web Apps拡張機能をインストールする

    Visual Studio CodeにAzure Static Web Apps拡張機能をインストールする

拡張機能が見つかったら「Install」ボタンで拡張機能をインストールします。インストールが完了すると、左側のメニューにAzureのアイコンが追加されるので選択します。Visual Studio CodeでAzureにログインしていない場合は以下の図のように「Sign in to Azure...」と表示されているので、選択します。AzureへのログインのためにWebブラウザが起動するので、Azureのアカウント情報を入力してログインして下さい。Azureへのログインが完了すると、Visual Studio Code上にAzureのサブスクリプションが表示されます。

  • Azure Static Web Apps拡張機能からAzureにサインインする

    Azure Static Web Apps拡張機能からAzureにサインインする

Azureにログインした状態で「＋」ボタンを選択すると、次はGitHubへのサインインを要求するダイアログが表示されるので「Allow」を選択します。

  • GitHubへのサインインを要求するダイアログ

    GitHubへのサインインを要求するダイアログ

再びWebブラウザが起動するので、GitHubへログインします。ログイン後、以下の図のようにVisual Studio CodeにGitHubへのアクセスを許可するための画面が表示されるので、「Continue」を選択します。

  • Visual Studio CodeにGitHubへのアクセスを許可する

    Visual Studio CodeにGitHubへのアクセスを許可する

次の画面でVisual Studio CodeにGitHubのアクセス権限を付与します。「Authorize github」を選択します。

  • Visual Studio CodeにGitHubへのアクセスを許可する（続き）

    Visual Studio CodeにGitHubへのアクセスを許可する（続き）

「Authorize github」を選択すると、Visual Studio Codeへリダイレクトされます（ブラウザによってはダイアログが表示されてリダイレクトを許可する必要があります）。Visual Studio Codeの画面上に以下の図のようなダイアログが表示された場合、「Open」を選択します。これによってVisual Studio CodeからGitHubにアクセスできるようになります。

  • Visual Studio CodeとGitHubとの連携を完了させる

    Visual Studio CodeとGitHubとの連携を完了させる

ここまででVisual Studio CodeがAzureとGitHubのアカウントと連携された状態となりました。これ以降では、Azure Static Web Appsのプロジェクトの作成を行うための手順が続きます。GitHubアカウントとの連携が完了すると、以下の図のようなダイアログが表示されます。

  • Azure Static Web Appsの作成方法の質問

    Azure Static Web Appsの作成方法の質問

ここではAzure Static Web Appsプロジェクトの作成方法として、新しいGitHubリポジトリを作成するか、既存のリポジトリを使用するかを選択することができます。今回はリポジトリの作成から行うため、「Publish local code to a new GitHub repository」を選択します。次に「Choose organization to create repository.」と表示され、リポジトリを作成する組織の選択肢が表示されるので、任意の組織を選択します。

  • リポジトリを作成するGitHub上の組織を選択

    リポジトリを作成するGitHub上の組織を選択

組織を選択すると「Select a project to create the new repository」と表示されるので、「Browse...」を選択してプロジェクトを保存するローカルマシンのディレクトリを選択します。

  • プロジェクトを保存するローカルマシン上のディレクトリを選択

    プロジェクトを保存するローカルマシン上のディレクトリを選択

ここで既存の静的コンテンツがある場合はそのディレクトリを選択することも可能ですが、今回は静的コンテンツも新しく実装していくため、ここでは任意の空のディレクトリを選択して下さい。次はGitHubのリポジトリ名を入力します。任意の名称を入力後、Enterキーで次に進みます。

  • GitHubのリポジトリ名の入力

    GitHubのリポジトリ名の入力

リポジトリの公開範囲について選択します。ここでは「Public」を選択していますが、どちらでも構いません。

  • リポジトリの公開範囲の選択

    リポジトリの公開範囲の選択

次はリポジトリへ追加するファイルを選択します。今回はまだ実装を行っていないため、図のように何も選択しない状態で「OK」ボタンを押します。

  • リポジトリへ追加するファイルの選択

    リポジトリへ追加するファイルの選択

Azure Static Web Appsのプロジェクト名を入力します。ここで入力した名称でAzure上にリソースが作成されますので、任意の名称を入力してEnterキーで次に進みます。

  • Azure Static Web Appsのプロジェクト名の入力

    Azure Static Web Appsのプロジェクト名の入力

プロジェクトで使用するフロントエンドフレームワークを選択します。ここで任意のフレームワークを選択することで以降で入力する必要のあるビルド成果物のディレクトリなどの情報の入力をスキップすることができます。今回は簡単なサンプルアプリの実装のためフレームワークは使用しないので、「Custom」を選択します。

  • プロジェクトで使用するフロントエンドフレームワークの選択

    プロジェクトで使用するフロントエンドフレームワークの選択

「Custom」を選択すると自身でアプリケーションのファイル群が配置されているディレクトリを指定する必要があるので入力していきます。「Manually enter location」を選択し、次のダイアログでパスを入力します。

  • 静的コンテンツの配置ディレクトリの選択

    静的コンテンツの配置ディレクトリの選択

今回はプロジェクトのルート階層に実装したファイル群を配置する想定のため、「/」と入力します。

  • 静的コンテンツの配置ディレクトリの入力

    静的コンテンツの配置ディレクトリの入力

次はAzure Functionsで実装したAPIの配置ディレクトリを指定するダイアログです。この時点ではAPIは使用しないため、「Skip for now」を選択してスキップします。

  • APIの配置ディレクトリの指定

    APIの配置ディレクトリの指定

次はビルド成果物の出力先ディレクトリを入力します。フロントエンドフレームワークを利用している場合などでビルドが行われる場合に指定する必要があります。
今回はビルドは行わないため、アプリケーションの配置ディレクトリと同じ「/」を入力します。

  • ビルド成果物の出力先ディレクトリの入力

    ビルド成果物の出力先ディレクトリの入力

最後にAzure Static Web Appsの配置場所を選択します。今回は「East Asia」を選択します。

  • Azure Static Web Appsの配置場所の選択

    Azure Static Web Appsの配置場所の選択

ここまでダイアログによる選択や内容の入力を行ったら、Azure Static Web Appsのプロジェクトの作成が開始します。しばらく待ってから完了の旨のメッセージがVisual Studio Code上に表示され、以下の図のようにサブスクリプション配下にAzure Static Web Appsのリソースが表示されていれば成功です。

  • Azure Static Web Appsプロジェクト作成後のVisual Studio Code

    Azure Static Web Appsプロジェクト作成後のVisual Studio Code

これで静的コンテンツを実装する準備が整いました。

静的コンテンツを作成する

前項でGitHubのリポジトリおよびAzure Static Web Appsのプロジェクトの作成が完了したので、静的コンテンツを実装していきます。今回はAzure Static Web Appsの開発・運用フローの理解に主軸を置くため、非常に単純な実装としています。

まずはHTMLを実装します。プロジェクトのルートディレクトリに「index.html」を作成し、以下のように実装します。

静的なサイトの実装（index.html）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Azure Static Web Apps Sample</title>
  </head>

  <body>
    <main>
      <h1>Hello Azure Static Web Apps!!</h1>
    </main>
  </body>
</html>

index.htmlと同じディレクトリに「styles.css」を実装します。

静的サイト用のCSS（styles.css）

* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fff;
}

main {
  margin: auto;
  width: 50%;
  padding: 20px;
}

main {
  text-align: center;
}

h1 {
  font-size: 3.5em;
}

「index.html」と「styles.css」が準備できたら、2つのファイルをGitコミットし、GitHubのmasterブランチにプッシュしましょう。コミットおよびプッシュは任意のGitクライアントから行います。 Visual Studio Codeからこれらの操作を行う場合は、左側メニューの「Source Control」メニューを選択します。「Changes」の一覧に作成した2つのファイルがあるので、「Changes」の右側の「＋」ボタンを選択します。

  • 編集したファイルをステージングする

    編集したファイルをステージングする

すると2つのファイルが「Staged Changes」というカテゴリに移動します。このカテゴリにあるファイルがコミットの対象となります。コミットする際は、任意でコミットメッセージを入力し、上部にあるチェックマークでコミットします。

  • 編集したファイルをコミットする

    編集したファイルをコミットする

コミットが完了したら、最後にコミット内容をGitHubにプッシュします。以下の図のようにVisual Studio Codeの下部に表示されているアイコンを選択すると、プッシュおよびプルを行うためのダイアログが表示されるので、「OK」を選択します。

  • 編集したファイルをGitHubにプッシュする

    編集したファイルをGitHubにプッシュする

少し待つとプッシュが完了します。プッシュ完了後、WebブラウザでGitHubのリポジトリを表示してみましょう。「Actions」というタブを選択すると、プッシュをトリガーに起動したアクションを確認することができます。

  • GitHub Actionsの実行結果

    GitHub Actionsの実行結果

図では、2つのアクションの実行結果が表示されています。失敗しているアクションは、最初にAzure Static Web Appsプロジェクトを作成した際に実行されたもので、静的コンテンツがまだリポジトリに含まれていなかったために失敗したものです。先程のプッシュで起動したアクションは、無事成功しています。各アクションをクリックしていくと、アクションの詳細な実行ログを確認することもできます。 なお、ここに表示されているアクションは先程Visual Studio Code上でAzure Static Web Appsのプロジェクトを作成したステップの中で作成され、GitHub Actionsに登録されたもので、主にコードのビルドとAzure Static Web Appsへの静的コンテンツのデプロイを行っています。

GitHub上でアクションが成功していることが確認できたら、次はAzureポータルにアクセスします。ポータル上部の検索窓に、「Static Web Apps」と入力して対象のAzure Static Web Appsプロジェクトを表示します。

  • AzureポータルからWebサイトを表示する

    AzureポータルからWebサイトを表示する

プロジェクトのページが表示されたら、「参照」または「URL」のリンクを選択することでデプロイされたWebサイトを表示することができます。

  • 公開されているWebページ

    公開されているWebページ

先程実装した内容でWebページが表示されているかと思います。これでAzure Static Web Appsを使ったWebサイトの公開までの手順を一通り確認することができました。

まとめ

今回はAzure Static Web Appsについて紹介しました。かんたんな静的Webサイトの公開を通じて、GitHubを活用したCI/CDのサポートといった開発から運用までのライフサイクルを包括したサービスであることが分かったかと思います。
次回はAzure Static Web AppsにAzure FunctionsによるAPI連携を追加したアプリケーションの実装方法について紹介する予定です。

WINGSプロジェクト 秋葉龍一著/山田祥寛監修
＜WINGSプロジェクトについて＞テクニカル執筆プロジェクト(代表山田祥寛)。海外記事の翻訳から、主にWeb開発分野の書籍・雑誌/Web記事の執筆、講演等を幅広く手がける。一緒に執筆をできる有志を募集中