MonacaクラウドIDEでは、Monacaでビルドしたアプリを外部のデプロイ（アプリ配信/配布）サービスへ配信できる機能を提供しています。現在、Monacaでサポートしているデプロイサービスは、以下になります。

今回は、MonacaクラウドIDEからサポートしているデプロイサービスへアプリを配信するための設定方法について説明したいと思います。

Appetize.ioの設定方法

Appetize.ioでは、Appetize.ioで提供されているシミュレーターにアプリをインストールして動作確認を行う事ができます。シミュレーターを使用しているため、iOSアプリの場合は、シミュレータービルドで作成したアプリを配信する必要があります。

Appetize.ioを利用するための手順は、以下になります。

Appetize.ioのアカウントを作成する
API Tokenを取得する
MonacaクラウドIDEにサービスを追加する

Appetize.ioのアカウントを作成する

Appetize.ioのアカウント作成は、Create Accountから作成することができます。アカウントとして使用するメールアドレスを入力してアカウントを作成します。

Appetize.ioのAPI Tokenを取得する

APIの取得は、以下のページから取得する事ができます。

Organization Settings > API Token

Requestボタンをクリックして、API Tokenを取得します。

MonacaクラウドIDEにAppetize.ioを追加する

MonacaクラウドIDEにAppetize.ioを追加するには、以下のメニューから追加する事ができます。

設定 > デプロイサービス

デプロイサービス画面の ＋新しく追加するボタンをクリックし、以下の項目を設定します。

サービス名：AppetizeIoを選択します。
エイリアス名：MonacaクラウドIDE上で管理するためのエイリアス名を入力します。エイリアス名は、一意になり、重複する事はできません。
APIトークン：Appetize.ioのAPI Tokenを取得するで取得したAPIトークンを入力します。

設定が完了したら、追加ボタンをクリックします。追加されたデプロイサービスは、デプロイサービス画面の連携中のデプロイサービス一覧に表示されます。

DeployGateの設定方法

DeployGateでは、メンバー間でAndroidとiOSアプリを共有する事ができます。Appetize.ioとは異なり、実機にアプリをインストールするため、iOSの場合は、シミュレータービルドではなく、通常のビルドで作成したアプリを配信します。

DeployGateを利用するための手順は、以下になります。

DeployGateのアカウントを作成する
API keyを確認する
MonacaクラウドIDEにサービスを追加する

DeployGateのアカウントを作成する

DeployGateのアカウント作成は、新規登録から作成することができます。アカウントとして使用する対象を選択してアカウントを作成します。

DeployGateのAPI keyを確認する

API keyは、以下のページから確認する事ができます。

アカウント設定 > プロフィール > API key

MonacaクラウドIDEにDeployGateを追加する

MonacaクラウドIDEのデプロイサービス画面を表示して ＋新しく追加するボタンをクリックし、以下の項目を設定します。

サービス名：DeployGateを選択します。
エイリアス名：MonacaクラウドIDE上で管理するためのエイリアス名を入力します。エイリアス名は、一意になり、重複する事はできません。
ユーザ-名：DeployGateのユーザー名を入力します。
APIキー：DeployGateのAPI keyを確認するで確認したAPIキーを入力します。

設定が完了したら、追加ボタンをクリックします。デプロイサービス画面の連携中のデプロイサービス一覧に、追加したデプロイサービスが表示されていることを確認します。

Firebaseの設定方法

Firebaseへの配信には、Firebase Hosting機能を利用しています。Firebaseへの配信は、PWAビルドで利用できる機能になります。Firebaseを利用するための手順は、以下になります。

Firebaseのアカウントを作成する
Firebaseコンソールでプロジェクト（Hosting）を作成し、プロジェクトIDを確認します。
APIトークンを取得する
Monacaプロジェクトにfirebase.jsonファイルを追加する。
MonacaクラウドIDEにサービスを追加する

Firebaseのアカウントを作成する

Firebaseのアカウント作成は、アカウントを作成から作成する事ができます。必要項目を選択または入力してアカウントを作成します。

Firebaseコンソールでプロジェクトを作成する

Firebaseコンソールにログインし、プロジェクトを作成するボタンをクリックしてプロジェクトを作成し、左のメニューにあるHostingを選択して追加します。

プロジェクトIDは、以下から確認する事ができます。

プロジェクトの設定 > 全般 > プロジェクト ID

FirebaseのAPIトークンを取得する

FirebaseのAPIトークンを取得するためには、ローカルPC上でFirebase CLIをインストールする必要があります。Firebase CLIのインストール方法については、以下を参照してください。

Firebase CLI をインストールする

ローカルPCへのFirebase CLIのインストールが完了したら、コマンドプロンプトやターミナルで以下のコマンドを実行します。

firebase login:ci

コマンドを実行するとブラウザが起動し、ログイン画面が表示されます。作成したFirebaseのアカウントでログインし、ログインが成功すると、ログインが成功した画面が表示され、コマンドを実行したコマンドプロンプトやターミナル上にAPIトークンが表示されます。

Monacaプロジェクトにfirebase.jsonファイルを追加する。

Firebaseに配信するためには、Monacaプロジェクトのルートにfirebase.jsonを追加する必要があります。Monacaプロジェクトへのファイルの追加は、以下のメニューから追加する事ができます。

ファイル > 新規ファイル

新規ファイルの作成画面で、以下を入力または選択し、OKボタンをクリックします。

フォルダ：/
ファイル名：firebase.json
フォルダ：JavaScript

作成したfirebase.jsonに以下を入力し、保存します。

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      "res/**",
      ".monaca/**",
      "LICENSE",
      "config.xml"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

MonacaクラウドIDEにFirebaseを追加する

MonacaクラウドIDEのデプロイサービス画面を表示して ＋新しく追加するボタンをクリックし、以下の項目を設定します。

サービス名：Firebaseを選択します。
エイリアス名：MonacaクラウドIDE上で管理するためのエイリアス名を入力します。エイリアス名は、一意になり、重複する事はできません。
APIトークン：FirebaseのAPIトークンを取得するで取得したAPIキーを入力します。
プロジェクト ID：Firebaseコンソールで作成したプロジェクトIDを入力します。

ビルドしたアプリをデプロイサービスへ配信する

Monacaプロジェクトをビルドして成功すると、ビルド画面のデプロイ& オプションサービスに、追加したデプロイサービスのボタンが表示されます。

対象のデプロイサービスのボタンをクリックし、デプロイサービス画面のデプロイボタンをクリックすることで、配信する事ができます。

配信が成功すると、成功を表すレが表示されます。

配信が失敗した場合は、詳細を見るリンクが表示され、デプロイサービスログ画面でエラー内容を確認する事ができます。

おわりに

Monacaでビルドしたアプリを外部のデプロイ（アプリ配信/配布）サービスへ配信するための設定について説明しました。

Appetize.ioでは、AndroidエミュレーターとiOSシミュレーターが使用されているため、デバイスのカメラやBluetooth等の特定のハードウェアの機能は利用できませんが、複数の端末やOSでの動作確認が行えます。DeployGateは、実機にアプリをインストールして動作確認を行うため、実際の端末環境で動作確認を行う事ができます。

これまで、外部のデプロイサービスを試した事がない場合は、一度、動作確認の内容にあわせて、これらのデプロイサービスを試してみてはいかがでしょうか。

MonacaクラウドIDEでデプロイサービスを使ってみよう