Azure Static Web Apps + Vue.js で SPA を楽々構築（Visual Studio Code使用）

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

こんにちは。サイオステクノロジーの木村です。

今回は、Azure上でWebアプリを公開するためのサービスである「Azure Static Web Apps」を使用して、Vue.js で作成した SPA をサーバーレスでクラウドに公開する方法をご紹介します。
「Azure Static Web Apps」には、Visual Studio Code 用の拡張機能があります。拡張機能を使用すると、Azure管理画面から行う様々な操作をVisual Studio Code上で行えるため、Visual Studio Code を組み合わせた方法でご紹介します。

1 Azure Static Web Apps とは
2 Vue.jsとは
3 GitHub リポジトリの作成
4 コードの作成
5 静的 Web アプリの作成
- 5.1 Azure Static Web Apps 拡張機能のインストール
- 5.2 静的 Web アプリの作成
6 アプリの変更とデプロイ
7 まとめ

Azure Static Web Apps とは

コードリポジトリから Azure に Web アプリを自動的にビルドしてデプロイするサービス。GitHub または Azure DevOps とやりとりしてブランチを監視し、リポジトリの変更に伴い自動的にビルドやデプロイを行います。
Azure Static Web Appsを使用すると、Webアプリを動かすのにWebサーバーの構築が不要になります。
Azure Static Web Apps の公式ドキュメントはこちら

Vue.jsとは

JavaScriptのフレームワーク。プログレッシングフレームワークであるため、簡単な一部の機能実装から本格的なWEBアプリまで幅広い規模に対応できます。
Vue.js を使用してアプリケーションを開発するには、以下の4つの方法があります。

ページ上で、CDN（Content Delivery Network）パッケージとして、scriptタグでVue.js を読み込む
Vue.jsのファイルを開発環境にダウンロードする
NPM（Node Package Manager）を使用してVue.js を開発環境にインストールする
Vue CLI を使用してプロジェクトを作成する

今回は、上記の中で最も手軽なCDNを使用した方法で記載します。

GitHub リポジトリの作成

Azure Static Web Apps は、GitHub または Azure DevOps 上のアプリケーションコードを読み込むため、それらにコードが存在する必要があります。
今回の例では、GigHubを使用するため GitHub にリポジトリを作成しておきます。

1. GitHub にリポジトリを作成します。

2. リポジトリを作成しましたら、ローカルコンピューターにクローンしておきます。


git clone https://xxxx/xxxx/vuejs-sample-app.git

コードの作成

1. Vue.jsを使用したコードを以下のように作成し、git リポジトリ直下に、index.html というファイル名で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js sample</title>
<style>
.sample {
  color: #1e90ff;
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="sample">{{message}}</div>
<script>
  Vue.createApp({
    data: function() {
      return {
        message: 'Hello world!'
      }
    }
  }).mount('#app')
</script>
</body>
</html>

19行目の以下の記載により CDN にて Vue.js を参照しています。（バージョンを指定して参照する場合は、@の後にバージョン番号を記載します。）

<script src="https://unpkg.com/vue@next"></script>

その他の Vue.js の構文については、今回の主旨ではないので割愛します。

2. コードを作成したら、上記『GitHub リポジトリの作成』で作成したリポジトリにプッシュしておきます。

静的 Web アプリの作成

Azure Static Web Appsにて静的 Web アプリを作成します。作成は、Azureの管理コンソールからも行えますが、今回は、Visual Studio Code の拡張機能を使用した方法で行います。

Azure Static Web Apps 拡張機能のインストール

Visual Studio Code 用 Azure Static Web Apps 拡張機能をインストールします。Visual Studio Code にて以下の手順を行います。
1. [表示] – [拡張機能] をクリックします。

2. [Marketplace で拡張機能を検索する] で、「Azure Static Web Apps」と入力し検索します。検索結果に「Azure Static Web Apps」が表示されるので [インストール] をクリックします。

以上でインストールは完了です。

静的 Web アプリの作成

静的 Web アプリを作成します。Visual Studio Codeにて以下の手順を行います

1. [開く] をクリックします。

2. 上記『GitHub リポジトリの作成』で作成し、ローカルコンピューターにクローンしたリポジトリを選択して「開く」をクリックします。

3. アクティビティバーの Azure ロゴをクリックします。

4. [RESOURCES] をクリックして展開し、「Sign in to Azure…」をクリックします。

5. ブラウザにてサインイン画面が表示されますので、お手持ちの Azure アカウントでサインインします。

サインインが完了すると以下の画面が表示されます。

6. Visual Studio Code に戻り、[RESOURCES] の横の「+」をクリックします。

7. [Create Static Web app…]をクリックします。

8. 「Select subscription」にお使いの環境のサブスクリプションがプルダウン表示されますので、任意のサブスクリプションを選択します。

9. Visual Studio Code より GitHub にサインインしていない場合、以下のメッセージが表示されますので「許可」をクリックします。

10. ブラウザにて GitHub へのサインイン画面が表示されますので、サインインします。

11. 以下のメッセージが表示されますので「開く」をクリックします。

12. 静的Webアプリの任意の名前を入力します。

13. 任意のリージョンを選択します。

14. Vue.jsを選択します。

15. アプリケーションファイルの場所として「 / 」と入力します。

16. ビルドの出力場所として「dist」と入力します。

17. 以下のメッセージが表示されれば、作成完了です。

18. [RESOURCES] – [任意のサブスクリプション名] – [Static Web Apps] を展開すると、作成した静的Webアプリが表示されます。

19. ブラウザで Web サイトを表示するには、[Production]を右クリックして[Browse Site] をクリックします。

20. ブラウザにて、作成した Webサイトが表示されます。

アプリの変更とデプロイ

変更は、GitHubのリポジトリにプッシュすると、自動的にデプロイされます。
以下の手順で作成したWebサイトに変更を加えて試してみましょう。

1. index.html の、27行目を以下のように変更します。

        message: 'こんにちは Vue.js!'

2. 「ソース管理」にて、index.html の横の「＋」をクリックし、変更をステージにアップします。

3. コミットメッセージを入力し、「✔️」をクリックしてコミットします。

4. 「プッシュ」をクリックして変更をリポジトリにプッシュします。

5. Azure 拡張機能ウィンドウにて、静的Webアプリ配下の[Production]を右クリックして[Browse Site] をクリックします。

5. ブラウザにて、変更が反映された Webサイトが表示されます。