静的Webアプリのホスト先に関する補足

本題に入る前に、静的なWebアプリを公開するためのAzureサービスについて一点補足しておきたい。いま作っている蔵書管理アプリのサンプルでは、フロントエンドのWebアプリのホスト先としてAzureストレージを利用している。第8回で紹介したように、Azureストレージには静的Webサイトのホスト先として利用するためのオプションがある。これを使えば、Azureストレージを単なるファイルの保管庫ではなくWebサイトの公開用サーバとして利用できるわけだ。

それに対して、最近Microsoftは新たに「Azure Static Web Apps」というAzureサービスを発表した。これは名前の通り静的なWebアプリをホストするためのサービスである。Azureストレージとはコンセプトが違うサービスなので単純に比較はできないが、より柔軟で高機能なホスティング環境が提供されるため、いま作っているようなWebアプリを公開する際はこちらを利用するほうが適していると言えるだろう。Azure Static Web Appsはまだプレビュー版だが、有用なサービスなので、また別の機会に詳しく紹介したい。

ホームページとなるHomeコンポーネント

それでは本題に入ろう。前回は、蔵書管理アプリのフロントエンド部分について、その基本的な構成を解説した上で、ルーティングの設定やAjax通信を行う部分のプログラムを作成した。サンプルのプログラム一式はこのGitHubリポジトリで公開している。

蔵書管理アプリケーションの概要

このアプリは、大きく分けると「ホーム」「書籍リスト」「詳細編集」の3つのページから構成されており、それぞれを「Home」「Booklist」「BookDetail」という名前のコンポーネントとして定義している。JavaScriptフレームワークのVue.jsを利用して作成フロントエンドの全体像を紹介したので、今回はそのプログラムの中身をもう少し詳しく見ていこう。

まずHomeコンポーネントだが、これは単にタイトルと概要を表示しているだけのものだ。

ホームページの表示例

ソースコードは次のようになっている。

Home.vue

蔵書管理アプリケーション

This is a demo application for Azure App Service using Java and Vue.js.

蔵書の一覧を表示するBooklistコンポーネント

Booklistコンポーネントは、バックエンドから取得した書籍情報を一覧表示するページである。

書籍リストページの表示例

ソースコード全体は少し長いので、スクリプト部分とテンプレート定義部分の2つに分けて見ていこう。CSS定義部分は省略する。まずスクリプト部分は次のようになっている。

Booklist.vueのスクリプト部分

dataオブジェクトには書籍情報をリストとして格納するbooklistと、検索条件の書籍名を格納するtargettitleという2つのプロパティが定義してある。最初にページが読み込まれた時と、refreshItems()メソッドが呼ばれた時は、バックエンドから全書籍の情報を取得してbooklistに格納する。

searchByTitle()メソッドとdeleteItem()メソッドは、バックエンドに対して、それぞれ書籍タイトルを指定しての検索と、対象書籍情報の削除のリクエストを送信する。addNewItem()メソッドとeditItem()メソッドは、いずれもBookDatailコンポーネントに遷移するが、前者は対象書籍としてnullが渡される。

テンプレート定義は次のようになる。テーブルの要素がbooklistプロパティの値にバインディングされている。[検索]ボタン、[新規追加]ボタンはそれぞれsearchByTitle()とaddNewItem()を呼び出す。表の[詳細編集]ボタンと[削除]ボタンは、それぞれ対象の書籍のIDを指定してeditItem()、deleteItem()を呼び出す。

Booklist.vueのテンプレート定義部分

書籍リスト

検索

新規追加

再読込み

書籍の詳細情報を表示・編集するBookDatailコンポーネント

書籍情報の編集や新規追加はBookDatailコンポーネントで行う。ここでは、一覧に表示されていた情報に加えて、カテゴリーと発行日の2つの要素も表示する。

詳細編集ページの表示例

スクリプト部分のコードは次のようになった。

BookDatail.vueのスクリプト部分

dataオブジェクトには書籍の情報を格納するbookプロパティが定義されている。書籍IDが指定されている場合は、ページ読み込み時にバックエンドから対象の書籍情報を取得して表示する。

saveItem()メソッドは、もしIDが指定されていればそのIDの書籍情報の更新を、IDがnullであれば新規追加のリクエストをバックエンドに対して送信する。cancelEdit()メソッドが呼び出された場合にはBooklistコンポーネントに遷移する。

テンプレート定義は次のようになる。

BookDatail.vueのテンプレート定義部分

詳細編集

タイトル

カテゴリー

著者

出版社

発行日

登録

キャンセル

書籍情報の各要素がbookプロパティとバインディングされている。[登録]ボタンがsaveItem()メソッドに、[キャンセル]ボタンがcanselEdit()メソッドにそれぞれ対応する。

ルートパスを設定する

以上でアプリの本体は完成だが、Azureストレージで正しく動作させるには、コンテキストルートのパスの設定も追加しておかなければならない。プロジェクトのルートディレクトリに「vue.config.js」というファイルを用意して、次のように記述しよう。

vue.config.js

module.exports = {

publicPath: './'

}

Azureストレージのサイトは静的Webサイトのコンテキストルートはエンドポイントの直下になっているため、Vueのビルド時にその相対パスが明示的に指定されている必要があるためだ。

Webアプリのビルド

以上で蔵書管理アプリのフロントエンド部分は完成だ。Vue.jsのプロジェクトは下記のコマンドでビルドできる。

> npm run build

ビルドした成果物はdistディレクトリ以下に展開される。今回のサンプルでは、jsディレクトとcssディレクトリ、index.html、404.htmlなどが作られているはずだ。

ビルドで生成されたファイル群

なお、Azureストレージにデプロイする前にローカルで動作を確認したい場合には、次のコマンドを実行すればlocalhostのWebサーバでアプリが起動する。

> npm run serve

Azureストレージへのアップロード

それでは、ビルドされたdistディレクトリ以下のファイルをAzureストレージにアップロートしよう。Azureストレージのセットアップ方法については第8回で解説した。

Azure CLIを使っている場合、Azureストレージへのデータのアップロードはコマンドひとつで行うことができる。Azure CLIについては第3回の記事を参照していただきたい。この記事ではLinux版について紹介しているが、Azure CLIはWindows版やmacOS版も用意されている。

まず、az loginコマンドでAzureサービスにログインしよう。その状態で、先ほど作成したbooklist_webプロジェクトのdistディレクトリへ移動し、次のコマンドを実行する。

> cd [プロジェクトのルートパス]/dist

> az storage blob upload-batch -s ./ -d \$web --account-name [ストレージアカウント名]

これで、dist以下にあるすべてのファイルとディレクトリが、指定されたストレージアカウントにアップロードされるはずだ。ストレージアカウント名のところは各自の環境に合わせて記述して欲しい。

Azure CLIを使わずにAzureポータルからファイルをアップロードすることもできる。その場合は、作成したストレージアカウントの設定画面から$webコンテナの設定を表示し、下図のように[アップロード]をクリックしてアップロードしたいファイルを選択すればよい。

Azureストレージへのファイルのアップロード

複数ファイルを選ぶこともできるが、ディレクトリ単位でアップロードすることはできないので、ディレクトリ数が多い場合はAzure CLIを使った方が手軽だ。そのほかに、ストレージ管理用の専用アプリが提供されているので、それを使ってもよい。

アップロードできたら、ストレージアカウントのエンドポイントにアクセスして、ホームページが表示されれば成功だ。バックエンドのSpringアプリケーションとの連携が正しくできていれば、書籍リストおよび詳細編集のページから、書籍の情報を追加したり、一覧を取得したりすることができるはずだ。書籍情報の追加や編集ができたら、Cosmos DBにもそれが反映されていることを確認しよう。