なになれ

IT系のことを記録していきます

Angular+AWS Amplifyを試した

Angular Amplify AWS

AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。
これによって、サーバレスなバックエンドにすることができます。

aws-amplify.github.io

似たものではFirebaseがあります。

今回はAngular製のWebアプリでAmplifyを試した内容と所感です。

Amplify CLIをインストール

Amplifyを操作するためのCLIをインストールします。

$ npm install -g @aws-amplify/cli
$ amplify configure

指示にしたがって設定していけば、CLIの設定は完了します。

AngularでのAmplifyの使い方

新規作成

Angular CLIでアプリを新規に作成するところまで実施します。

作成したアプリに下記のnpmモジュールをインストールします。

$ npm install --save aws-amplify aws-amplify-angular

globalオブジェクトを扱えるようにします。
polyfills.tsに(window as any).global = window;を追記

設定

アプリにAmplifyを設定します。

$ amplify init

環境の名前を入力する必要があります。環境名はAmplifyの環境を分けるための識別子になります。
開発環境や本番環境といった形で環境を分けたい場合に活用します。

distribution directoryはAngularのビルド後のディレクトリを指定します。
例えば、dist/myAmplifyProject

AWSのサービスを追加

AWSのサービスは以下のようなものが用意されています。

| Category      |
| ------------- |
| analytics     |
| api           |
| auth          |
| function      |
| hosting       |
| interactions  |
| notifications |
| storage       |

api、auth、hosting、storageあたりがよく利用するものだと思います。

サービスの追加は以下のコマンドで実行します。このコマンドではローカルにサービス用のファイルが作られるだけです。

$ amplify add <category-name>

以下のコマンドで実際にAWS上にリソースが作られます。内部的な動作としてはCloud Formationが使われます。

$ amplify push

認証を試す

ここでは、authのCategoryを試します。

$ amplify add auth
$ amplify push

aws-exports.jsというファイルが作られます。
Amplifyを扱うために必要なファイルです。

以下のようにソースを修正します。

TypeScriptのオプションでJavaScriptファイルを読み込めるようにします。
aws-exports.jsをTypeScriptで読み込むために必要な設定です。

tsconfig.json

"compilerOptions": {
  "allowJs": true   // <-追加
}

Amplifyのモジュールの内部で使われるaws-js-sdkのための対応をします。

tsconfig.app.json

"compilerOptions": {
  "types": ["node"]   // <-追加
},

AngularアプリでAmplifyを使えるようにします。

main.ts

// 省略
import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
// 省略

app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AmplifyAngularModule
  ],
  providers: [
    AmplifyService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

認証情報の有無で動作を変えるコードを記述します。

app.component.ts

import { Component } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    signedIn: boolean;
    user: any;
    greeting: string;
    constructor( private amplifyService: AmplifyService ) {
        this.amplifyService.authStateChange$
            .subscribe(authState => {
                this.signedIn = authState.state === 'signedIn';
                if (!authState.user) {
                    this.user = null;
                } else {
                    this.user = authState.user;
                    this.greeting = 'Hello ' + this.user.username;
                }
        });
    }
}

Amplifyで認証向けのコンポーネントが用意されているので利用します。

app.component.html

<amplify-authenticator></amplify-authenticator>

ユーザ登録からユーザのログインができるコンポーネントが表示されます。

f:id:hi1280:20190321175642p:plain

デザインが何もないので分かりづらいですが、Create accountの部分などがクリックできるようになっています。

Webアプリをホスティングする

Webアプリの場合、Hostingする必要があります。
Amplifyではこれが簡単にできます。

$ amplify add hosting
$ amplify publish

開発向けにはS3でホスティング、本番向けにはCloudFront+S3のホスティングをコマンド操作だけで完結してくれるのは便利です。

まとめ

Cloud Formationを介しているためかAWSリソースの作成に時間がかかるのが気になります。
ただAWSのリソースが簡単に使えるのが魅力で、まだまだ発展途上な様子なのでこれから期待したいサービスです。
まだ東京リージョンには対応していませんが、Amplify ConsoleというCDのサービスもあるので使ってみたいです。

参考資料

aws-amplify.github.io