Ionic 3とAWS Amplifyを使ってみる (その1: S3へのデプロイ編)

Amazonが発表して久しいAmplifyですが、解説書の類が散逸していてわかりにくいので自分でいじくって、暇があったらまとめていきたいと思ってます。まずはIonic 3との連携で、今回はIonic Web AppをAmazon S3にデプロイする部分までです。

前提

• Ionic開発環境が設置されていること
• AWS CLIがインストールされていること
• AWSのAdmin権限を持っていること
• AWS Admin権限をもったアカウントのプロファイルがAWS CLI環境に登録されていること

Ionic側準備

今回は大したアプリケーションを開発するわけではないので、Blank雛形で良いでしょう。

ionic start myApp blank
cd myApp
ionic serve

この時点でブラウザが起動し、http://localhost:8100/にてIonicアプリが表示されるはずです。

Amplifyインストール

今回の「肝」であるAmplifyをインストールします。

npm install --save aws-amplify
npm install --save aws-amplify-angular
npm install --save ionic-angular

Amplify設定

まずはIonicのWebアプリをAmazon S3上にデプロイすることをゴールとします。amplify initでいろいろ聞かれますが、AWS CLIで登録してあるAdmin権限を持ったアカウントを指定することさえ忘れなければなんとかなるでしょう。あと、利用するエディタを聞かれます。Typescript関連のライブラリを設定していると思われます。

npm install -g @aws-amplify/cli
amplify init
amplify push 

最後のamplify pushでAWS側のバックエンドを設定するコマンドが走り、開発環境側にはaws-exports.jsというJavascriptファイルが生成されます。.jsのままだとTypescriptから扱いにくいので、aws-exports.tsに名前を変えます。でも絶対に作業漏れが発生するので、package.jsonの中身を以下のように更新すると良いでしょう。

package.json

  "scripts": {
    "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },

main.tsに以下を追記。このエントリを書く時点では、Amazonのドキュメントは間違ってますね。

main.ts

import Amplify from 'aws-amplify';
import amplify from '../aws-exports';

Amplify.configure(amplify);

app.module.tsにAmplify関連エントリを追加。

app.modules.ts

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

@NgModule({
  ...
  imports: [
    ...
    AmplifyAngularModule
  ],
  ...
  providers: [
    ...
    AmplifyService
  ]
  ...
});

S3へのホスティング

amplify hosting add #...開発ではDEVを選択　S3環境が設定される
amplify hosting publish #...S3へのアップロード

amplify hosting addで、S3側の環境が設定されます。開発中はDEV環境を選択するほうが良いでしょう。DEV環境はIonic WebアプリをS3にデプロイします。（かつてはionic cordova build webappコマンドを流して、できあがったwww/以下をS3にコピーしていた作業がamplify hosting publishコマンド一発になります)

amplify hosting addでPROD環境を選ぶと、S3だけではなくAmazon Cloudfrontを使った環境にデプロイしてくれますが、Cloudfrontは修正にえらく時間がかかるので、開発〜テストはS3のみを使うDEV環境のほうが良いでしょう。

この状態で、aws-exports.tsにある　aws_content_delivery_url　で示されるURLをブラウザで開けると、おなじみのIonic Blank画面が表示されるはずです。また、以後はionic serveコマンドを実行しても、localhost:8100ではなくS3上のコンテンツが表示されるはずです。

今回のまとめと次回予告

IonicにしてもAmplifyにしても「面倒な」作業をいろいろ自動化してくれているのはありがたいことです。特にサーバレスなモバイルアプリを開発する場合、これらの「面倒な作業の自動化」は開発者により多くのTweet時間を与えてくれます。ありがたや。

もちろん、Amplifyの機能はS3へのデプロイだけではありません、次回はAwS Cognitoを使った認証機能実装を紹介します。