Visual Studio Codeを使用して、Azure Static Web Apps + Vue.js + Azure FunctionsでWebアプリ開発

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

こちらの記事「Azure Static Web Apps + Vue.js で SPA を楽々構築（Visual Studio Code使用）」で Azure Static Web Apps を使用して、Vue.js で作成した SPA をサーバーレスでクラウドに公開する方法をご紹介しましたが、今回はさらに、Azure Static Web Apps サイトに Azure Functionsで作成したサーバレス API を追加してデプロイする方法についてご紹介します。
「Azure Static Web Apps」には、Visual Studio Code 用の拡張機能があります。拡張機能を使用すると、Azure管理画面から行う様々な操作やローカル環境でのデバッグなどを Visual Studio Code 上で行えるため、Visual Studio Code で開発する方法でご紹介します。

今回の記事では、フロントエンド周りの開発には Vue.js を、Azure Functions の開発には JavaScript を使用します。

事前準備

当記事での手順を行うには以下の準備が必要です。

ローカル コンピューター上で Azure Functions を開発およびテストするために、Azure Functions Core Tools をインストールする必要があります。Visual Studio Code にて以下の手順を行います。

1. [表示] – [コマンド パレット] をクリックします。

2. 「Azure Functions: Core Tools」と入力して表示された、「Azure Functions: Install or Update Azure Functions Core Tools」をクリックしてインストールします。

ローカル コンピューター上で Azure Statuc Web Apps を開発およびテストするために、Azure Statuc Web Apps CLI をインストールする必要があります。Visual Studio Code にて以下の手順を行います。

1. [表示] – [コマンド パレット] をクリックします。

2. 「Azure Static Web Apps CLI」と入力して表示された、「Azure Statuc Web Apps: Install or Update Azure Statuc Web Apps CLI」をクリックしてインストールします。

Visual Studio Code 用 Azure Static Web Apps 拡張機能をインストールします。Visual Studio Code にて以下の手順を行います。

1. アクティビティバーより [拡張機能]のアイコンをクリックします。

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

Visual Studio Code 用 Azure Static Web Apps 拡張機能をインストールします。Visual Studio Code にて以下の手順を行います。

1. アクティビティバーより [拡張機能]のアイコンをクリックします。

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

以下のサイトより、コンピューター上にインストールを行ってください。
https://nodejs.org/ja

以下のサイトより、コンピューター上にインストールを行ってください。
https://www.git-scm.com/downloads

以下のアカウントをご用意ください。

• GitHub アカウント
• アクティブなサブスクリプションが含まれるAzure アカウント

GitHub リポジトリの作成

1. 以下のURLにアクセスします。
https://github.com/staticwebdev/vue-basic/generate
※GitHubにサインインしていない場合はサインイン画面が表示されますので、ご使用のアカウントでサインインしてください。

2. 任意のリポジトリ名を入力し、「Create repository」をクリックします。

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

git clone https://github.com/xxxxx/azure-static-web-apps-sample.git

静的 Web アプリの作成とデプロイ

フロントエンド アプリケーションを作成して Azure Static Web Apps にデプロイします。Visual Studio Codeにて以下の手順を行います。

1. Visual Studio Codeを起動し、[開く] をクリックします。

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

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

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

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

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

6. [RESOURCES] の横の「+」をクリックします。

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Azure Functions の作成

作成した 静的 Web アプリから呼び出す API を Azure Functions で作成します。今回の手順では、Azure Functions で使用する言語は、JavaScriptとします。

1. [表示] – [コマンド パレット] をクリックします。

2. 「Azure Static Web Apps: Create HTTP Function」と入力し表示された「Azure Static Web Apps: Create HTTP Function…」をクリックします。

3. [JavaScript]を選択します。

4. [Model V3]を選択します。

5. 任意の関数名を入力すると、Azure Functions プロジェクトが作成されます。

6. アクティビティ バーの エクスプローラー ロゴをクリックします。

7. 作成された Azure Functions プロジェクトが表示されます。 既定では、リポジトリのルートにある api という名前のフォルダにプロジェクトが作成されます。

上記手順で作成すると、「index.js」にサンプルのソースが実装された状態で作成されます。

サンプルソースの内容は、リクエストパラメータに「name」が指定されている場合は、
『Hello, [nameの値]. This HTTP triggered function executed successfully.』
と返し、
リクエストパラメータに「name」が指定されていない場合は、
『This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.』
と返すというものです。
Visual Studio Code (ローカル環境)でこちらのサンプル API を実行してみます。

1. 上部のメニューより、[実行]を選択して、[デバッグの開始]をクリックします。

2. ターミナルに、関数を呼び出す URL が表示されます。

3. ブラウザより、上記 URL にアクセスすると Visual Studio Code 上で Functions が実行され、値が返されます。
・name を指定した場合

・name を指定しなかった場合

4. [実行] – [デバッグの停止]をクリックすると、実行を停止することができます。

「index.js」を以下のように修正し、name で指定された値を JSON 形式で返すように実装を変更して保存しておきます。

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? name
        : "no name";

    context.res.json({
        text: responseMessage
    });
}

フロントエンド アプリの変更（APIの呼び出し）

Azure Functions で作成した API を呼び出すよう フロントエンド アプリ を変更します。

1. リポジトリルート/src フォルダ配下の「App.vue」を以下のように変更し、Azure Functions で作成した API を呼び出すようにします。呼び出す際の name パラメータには「TEST」を指定しています。

<template>
  <div>Hello {{ value }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/HttpTrigger1?name=TEST")).json();
    this.value = text;
  }
};
</script>

Visual Studio Code(ローカル環境) で、フロントエンドアプリと API を一緒に実行します。

1. 上部のメニューより、[ターミナル] – [新しいターミナル] をクリックしターミナルを開きます。

2. ターミナルにて、以下のコマンドを実行し、依存関係をインストールします。

npm install

3. 以下のコマンドを実行し、アプリをビルドします。

npm run build

※ ビルド時に以下のようなエラーが出た場合は、ローカル コンピュータの「NODE_OPTIONS」環境変数に「–openssl-legacy-provider」を設定するとエラーが解消されます。 ・エラーメッセージ： opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ] ・環境変数の設定 export NODE_OPTIONS=--openssl-legacy-provider

4. 以下のコマンドを実行し、アプリを Static Web Apps CLI で起動します。

swa start dist --api-location api

5. アプリには「http://localhost:4280/」でアクセスできます。ブラウザからアクセスして以下のように『Hello TEST』と表示されれば成功です。

6. CLI を停止するには、Ctrl + C キーを押します。

デプロイ

変更内容を Azure にデプロイします。

1. リポジトリルート/.github/workflows フォルダ配下の「azure-static-web-apps-wonderful-coast-xxxxxxx.yml」を開きます。

2. プロパティ「api_location)」を追加し、値を api に設定します。(既にその設定となっている場合は特に変更の必要はありません。)

1. アクティビティバーより [ソース管理]のアイコンをクリックします。

2. 任意のコミットメッセージを入力し、[コミット]をクリックします。

※ コミット時に以下のようなエラーが出た場合は、リポジトリルート/.git 配下の config ファイルに git のアカウント情報を追記するとエラーが解消されます。 ・config の設定 [user] name = Your Name email = your.email@example.com

3. [変更の同期]をクリックします。

以上でデプロイは完了です。

Azure 上のアプリにアクセスして、デプロイした内容が反映されているか確認します。

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

2. [RESOURCES] – [任意のサブスクリプション名] – [Static Web Apps] を展開します。該当のStatic Web Apps名をクリックして展開し、配下の[Production]を右クリックして[Browse Site] をクリックします。

2. ブラウザにて、Webサイトが表示されます。『Hello TEST』と表示されれば、デプロイが成功したことが確認できます。

※ Static Web Apps名を右クリックして[Open in Portal]をクリックすると、作成した Azure Static Web Apps のリソースを、Azureポータル上で表示することができます。

追記

こちらの続きの記事『Azure Functions から Azure Database for MySQL フレキシブル サーバー へ接続』も記載しました。
そちらでは、この記事で作成した環境に、Azure Database for MySQL フレキシブル サーバー へ接続する Azure Functions を作成する方法を紹介しておりますので、是非ご覧ください。

About 木村 29 Articles

Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。

Twitter YouTube