Wijmo & AngularアプリをAzure Static Web Appsでホストする

本記事では、「Wijmo（ウィジモ）」とAngular CLIおよびVisual Studio Codeを使用して作成したAngularアプリケーションを、Azure Static Web Appsへデプロイする方法を紹介します。

Azure Static Web Apps

Azure Static Web Appsは静的コンテンツ（HTML、JavaScript、CSS）で作成したWebアプリケーションをホストするためのクラウドサービスです。GitHubのリポジトリに置いたWebアプリケーションを更新するたびにGitHub Actionsにより自動的にビルドとデプロイが行われます。

Angular、React、Vue.jsといったJavaScriptフレームワークやBlazor WebAssemblyを使用したWebアプリケーションにも対応しており、バックエンドにはAPIとしてAzure Functionsを利用することも可能です。

なお、2020年11月の時点ではプレビューとして提供されています。

Angularアプリケーション用のクイックスタート

Azure Static Web AppsのドキュメントにはAngularアプリケーション用のクイックスタートが用意されています。

こちらの手順を参考にAzure Static Web AppsにAngularアプリケーションをデプロイしていきます。

Wijmo & Angularアプリケーションの作成

まずはデプロイするアプリケーションを作成します。Visual Studio Codeからターミナルを開いてnpm installコマンドを実行し、Angular CLIパッケージをグローバルにインストールします。インストール済みの場合は不要です。

npm install -g @angular/cli

ng newコマンドを実行して、Angularアプリケーションを作成します。アプリケーションのオプションをいくつか質問されますが、全てEnterキーを押して既定値を選択します。

ng new wijmo-angular10-app

アプリケーションのフォルダに移動します。npm installコマンドを実行してWijmoのAngular用パッケージをアプリケーションにインストールします。

cd wijmo-angular10-app
npm install @grapecity/wijmo.angular2.all

続いてコードを書いていきます。src/styles.cssにWijmoのスタイルをインポートします。

@import '@grapecity/wijmo.styles/wijmo.css';

src/app/app.modules.tsにFlexGridを含むモジュールWjGridModuleとカルチャーをインポートします。

import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
@NgModule({
:
imports: [
WjGridModule,
:
]
})

src/app/app.component.htmlの<div class="card-container">要素の最後にwj-flex-grid要素を追加します。

<wj-flex-grid [itemsSource]="gridData">
<wj-flex-grid-column header="ID" binding="id" [width]="60"></wj-flex-grid-column>
<wj-flex-grid-column header="商品名" binding="product" [width]="200"></wj-flex-grid-column>
<wj-flex-grid-column header="受注日" binding="date" [width]="120"></wj-flex-grid-column>
<wj-flex-grid-column header="金額" binding="amount" [width]="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>

src/app/app.component.tsにFlexGridに表示するデータgridDataを作成します。

export class AppComponent {
:
gridData = [
{ id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 },
{ id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 },
{ id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 },
{ id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }
];
}