2020.5.20

Amplifyを使って完全サーバレスなWebアプリを作る

written by 山本竜二

Fixelエンジニアの山本です。

弊社の新しいプロダクトを開発する構想があり、せっかくなのでAWSを使って完全サーバレスなWebアプリを作ろうという事になりました。

開発の前段階として技術評価をする時間を作り、次のような構成で簡単なCRUD処理を試してみました。

バックエンド(AWS)の構成

最初は上図のような構成でいく想定ですが、運用監視用にCloudWatchとSNS、Lambdaを追加する事になると思います。データストアはせっかくなのでDynamoDBと悩みましたが、プロダクトの要件にはRDBの方が向いているという事で、Aurora Serverlessとなりました。

フロントエンドの構成

Amplifyという、Web(モバイル)アプリをAWS上にサーバレス構成で簡単に構築できるプラットフォームを使いました。

Amplifyはバックエンドに必要なサービス(※1)を構築するだけでなく、フロントエンドからAWS上のサービスを直接操作する各種ライブラリも提供しています。これにより、エンジニアはアプリケーション実装に集中する事ができます。

※1 Amplifyで構築できるサービスの一例

API (REST、GraphQL)
データストア(DynamoDB、AuroraServerless)
認証 (Cognito)
ストレージ (S3)
ホスティング (CloudFront + S3)

普段AWSのインフラ構築をすることが多いですが、今まではコツコツCloudFormationのコードを書いていました。Amplifyを使うと、コマンドラインでいくつか対話形式で選択・入力するだけで、コードを書くことなく、勝手にやってくれます。
※実際は裏でCloudFormationが動いています。

AmplifyはReact、Vue.js、Angularに対応していますが、今回はフロント実装にVue.jsを採用しています。

APIの実装にはAppSyncを用いて、RESTでは無くGraphQLを使っています。こちらも実践で使うのは初めてです。

アプリの構成

今回の技術評価では、以下の事を行っています。

データストア(AuroraServerless)のCRUD操作(AppSync)
更新内容のリアルタイム通知(AppSync)
ストレージ(S3)へのアップロードと削除
サインアップ・サインイン(Cognito)

あまりキレイに書いていないのでアプリ全体のコードを公開することは控えさせて頂きますが、「Amplify (+AppSyc)でこれだけ簡単に書けるよ」という箇所を抜粋して載せます。

AWSバックエンド構築

バックエンドは、AmplifyのCLIを使って対話形式で簡単に構築する事ができます。

ストレージ構築

amplify add storage
? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
  NoSQL Database

※上記のような対話形式で、S3のバケット名等を選択・入力していきます。

API構築

amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: myapi

上記のような対話形式で選択・入力していきます。

AWSへの反映

上記のコマンドだけでは、実際にAWSには反映されません。
以下のコマンドを実行する事で反映する事ができます。

amplify push

ホスティング

ホスティング機能を使い、CloudFront + S3でWebアプリのフロントエンドを公開する方法です。 CloudFront無しでS3のみという選択も可能です。(こちらは主に開発環境用）

ホスティング構築

amplify add hosting
? Select the plugin module to execute: # Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type: # Manual Deployment

上記のような対話形式で選択・入力していきます。

パブリッシュ（アップロード＆公開）

mplify publish

完了すれば、CloudFrontのURLが表示されるのでアクセスして確認します。

Amplifyに関わらず、CloudFront+S3の構成は反映にかなり時間が掛かる事があるので、AccessDeniedが発生する時は、1〜2時間ぐらい待つ必要があるかもしれません。

フロント実装

フロントからAWSのバックエンドを操作するには、Amplifyのライブラリを読み込み、用意されている関数を使うだけです。

※コードの抜粋なのでこれだけでは動きません。

ストレージへのアップロード例

<template>
  <div>
    <input ref="input" type="file">
  </div>
</template>
<script>
import { Storage } from 'aws-amplify'
const file = this.$refs.input.files[0]
const filePath = `hogehoge/${file.name}`
await Storage.put(filePath, file)
</script>

API呼び出し例

<script>
import { API } from 'aws-amplify'
import { createData } from '../graphql/mutations'
await API.graphql(graphqlOperation(createData, {
  input: {
    id: 123,
    name: 'hogehoge'
  }
}))
</script>

graphql/mutations.js

export const createData = /* GraphQL */ `
  mutation CreateData($input: Input!) {
    createData(input: $input) {
      id
      name
    }
  }
`;

※APIを呼び出す為のAppSync(GraphQL)のスキーマ定義、クエリ等は別途必要ですが、Amplifyである程度自動的に生成されます。
上記例だと、mutaion.jsは自動生成されます。

苦労した点

Amplify方はあまりハマるポイントは無かったですが、AppSyncが結構ハマりました。

特に、AppSync＋AuroraServerlessの構成が使えるようになってから、あまり時間が経ってないので情報が少ないです。

AppSync(GraphQL)初心者からすると、正しい結果が得られない時に原因を調査するのが大変でした。

この機能、もしかしてAuroraServerlessには対応して無いんじゃないか？と疑いつつ試行錯誤してました。実際は、私の設定ミスが原因だったのですが・・・。

まとめ

評価前は本当に便利なの？また面倒な事をいっぱい覚える必要があるんじゃないの？という不安もありました。

実際に技術評価用アプリを作った感じでは、新しい事を覚える苦労より、楽できる事の方が多く、これから構築する新しいプロダクトにも正式採用する事にしました。

一覧に戻る

記事カテゴリー

CONTENTS