Azure Mobile Apps を使用して Apache Cordova アプリをビルドする

  • [アーティクル]

このチュートリアルでは、Azure Mobile Apps と Azure モバイル アプリ バックエンドを使用して、Apache Cordova クロスプラットフォーム アプリにクラウドベースのバックエンド サービスを追加する方法を示します。 新しいモバイル アプリ バックエンドと、アプリのデータを Azure に格納する簡単な Todo list アプリの両方を作成します。

Azure App Service での Mobile Apps 機能の使用に関する他の Apache Cordova チュートリアルを続行する前に、このチュートリアルを完了してください。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、Windows または Mac システムで実行できます。 アプリの iOS バージョンは、Mac でのみ実行できます。 このチュートリアルでは、Windows (Android で実行されるアプリ) のみ使用します。

Apache Cordova 8.1.2 以前が必要

Apache Cordova では、v 9.0.0 のツールに互換性のない変更がリリースされました。 Apache Cordova v 9.0.0 以降がインストールされている場合、q モジュールで依存関係の問題が発生するため、プラグインは動作しません。

Visual Studio Code

デバッグありでアプリケーションを実行できる、Visual Studio Code 用の Apache Cordova 拡張機能があります。 Apache Cordova の開発には Visual Studio Code を強くお勧めします。

Gradle をインストールする

Windows で Apache Cordova を構成するときの最も一般的なエラーは、Gradle のインストールです。 これは Android Studio を使用して既定でインストールされますが、通常の使用法では使用できません。 最新リリースをダウンロードしてアンパックし、その後 bin ディレクトリを PATH に手動で追加してください。

Apache Cordova クイック スタート プロジェクトをダウンロードする

Apache Cordova クイックスタート プロジェクトは、azure/azure-mobile-apps GitHub リポジトリの samples/cordova フォルダー内に配置されています。 このリポジトリは ZIP ファイルとしてダウンロードでき、その後アンパックできます。 ファイルが azure-mobile-apps-main フォルダーに作成されます。

ダウンロード後、ターミナルを開き、ディレクトリをファイルの場所に変更します。

バックエンド サービスをデプロイする

クイックスタート サービスをデプロイするには、最初に Azure CLI を使用して Azure にログインします。

az login

Web ブラウザーが開き、承認が完了します。

必要に応じて、サブスクリプションを選択します。

リソース グループを作成する

以下を入力してリソース グループを作成します。

az group create -l westus -n zumo-quickstart

このコマンドにより、作成するすべてのリソースを保持するための zumo-quickstart というリソース グループが作成されます。 westus リージョンにアクセスできない場合、またはより近いリージョンを使用する場合は、westus を別のリージョンに置き換えます。

バックエンドを Azure にデプロイする

サービスは、次のリソースで構成されます。

  • 無料プランの App Service ホスティング プラン。
  • App Service ホスティング プラン内でホストされる Web サイト。
  • Azure SQL Server。
  • Basic レベルの Azure SQL データベース (コストが発生します)。

Azure SQL データベースは、コストが発生する唯一のリソースです。 詳細については、価格のページを参照してください。

リソースをデプロイするために、次のコマンドを入力します。

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

完了したら、次のコマンドを実行して出力を確認します。

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

このコマンドにより、モバイル アプリケーションの開発に必要なデプロイに関する情報が表示されます。 データベースのユーザー名とパスワードは、Azure portal からデータベースにアクセスする場合に役立ちます。 App Service の名前は以下で使用します。また、後ほどパブリック エンドポイントをコードに埋め込みます。

最後に、作成した App Service に Azure Mobile Apps サーバーをデプロイします。

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

zumo-XXXXXXXX を、出力の一覧に示されている App Service の名前に置き換えます。 2 - 3 分以内に、Azure Mobile Apps サーバーを使用する準備が整います。 Web ブラウザーを使用して、バックエンドが動作していることを確認できます。 Web ブラウザーで、/tables/TodoItem が追加されたパブリック エンドポイント (例: https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem) にアクセスします。 サーバーが正常に動作している場合、X-ZUMO-VERSION パラメーターの欠落に関するエラーがブラウザーに表示されます。

リソースの削除

クイックスタート チュートリアルを完了した後、az group delete -n zumo-quickstart を使用してリソースを削除できます。

このチュートリアルは、(このセクションを含む) 3 つの部分で構成されています。 チュートリアルの完了前にリソースを削除しないでください。

Apache Cordova クイック スタート プロジェクトを構成する

npm install を実行して、すべての依存関係をインストールします。

プロジェクトにプラットフォームを追加します。 たとえば、Android プラットフォームを追加するには、以下を使用します。

cordova platform add android

必要に応じて、browser、android、ios を追加できます。 オフライン同期が有効になっていると、browser プラットフォームは動作しません。 使用するすべてのプラットフォームを追加した後、cordova requirements を実行して、すべての要件が満たされていることを確認します。

テキスト エディターで www/js/index.js ファイルを開きます。 BackendUrl の定義を編集してバックエンド URL を示します。 たとえば、ご使用のバックエンド URL が https://zumo-abcd1234.azurewebsites.net の場合、バックエンド URL は次のようになります。

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

ファイルを保存します。 テキスト エディターで www/index.html ファイルを開きます。 Content-Security-Policy を編集して、バックエンド URL と一致するように URL を更新します。例えば次のようにします。

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

アプリをビルドするために、次のコマンドを使用します。

cordova build

アプリを実行する

(cordova platform add browser を使用して) ブラウザーから実行する場合、Azure App Service 内で CORS のサポートを有効にする必要があります。 そのためには、次のコマンドを実行します。

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

ZUMPAPPNAME を、ご使用の Azure App Service モバイル バックエンドの名前に置き換えます。 バックエンドが構成された後、次のコマンドを実行します。

cordova run android

初期スタートアップが完了した後、一覧の項目を追加および削除できます。 Todo 項目は、Azure Mobile Apps バックエンドに接続されている Azure SQL インスタンスに格納されます。

エミュレーターが自動的に起動しない場合は、Android Studio を開いてから、 [構成]>[AVD Manager] の順に選択します。 これで、エミュレーターを手動で起動できます。 adb devices -l を実行すると、選択したエミュレートされたデバイスが表示されます。 これで、cordova run android を実行できます。

Apache Cordova アプリ

次の手順

引き続きオフライン データ同期を実装します。