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を使っています。 こちらも実践で使うのは初めてです。

アプリの構成

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

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

amplify push

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

<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>

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

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