Open18

AWS Amplify

Kumamoto-HamachiKumamoto-Hamachi

1. AWS Amplify（アプリケーションの構築とデプロイ）| AWS

https://aws.amazon.com/jp/amplify/

AWSマンガ 第3話「高負荷に強いサイトを構築しろ！」(1/5) | AWS

AWS Amplify は、クラウドベースの Web アプリケーションおよびモバイルアプリケーションを開発するための、高機能な宣言型 JavaScript ライブラリです。Amplify を通じて、オブジェクトストレージの Amazon S3 とCDN (コンテンツ配信ネットワーク）の Amazon CloudFront を利用したスケーラブルな Web サイトホスティングを始め、ユーザー認証機能や RESTful API や GraphQL API の作成・管理など、豊富な機能を簡単に利用できます。また、Amplify CLI (Command Line Interface) ツールチェーンも併せて提供されており、様々なバックエンドコンポーネントをコマンドラインで一元的な操作、管理することも可能です。

いろいろ凄そう。S3(ストレージ)、CloudFront(CDN)が自動で設定されるのが一番の特徴。

Kumamoto-HamachiKumamoto-Hamachi

2. AWS Amplifyとは何か？利点や特徴についてもあわせて解説

https://www.yume-tec.co.jp/column/awsengineer/4597

AWS Amplifyとは、モバイルアプリケーションやウェブアプリケーションを構築するための開発プラットフォームのことです。

AWS Amplifyのツール3つ

1. Amplify CLI

Amplify CLIは、各種AWSサービスを簡単に利用できる、コマンドベースのツールチェーンです。

2. Amplify Console

Amplify Consoleは、サーバーレスウェブアプリケーションを公開するための環境を、自動で構築してくれるサービスです。

3. Amplify SDK

Amplify SDKは、フィックスターズのクラウドサービス「Fixstars Amplify」に向けたSDK（ソフトウェア開発キッド）で、量子アニーリングマシンをクラウドで手軽に実行することが可能です。

9つの利点

(2)成長速度による環境変化に強くできている

AWS AmplifyにはMulti Environmentという機能が存在します。
そのため、ユーザーがいくつかのコマンドを発行することにより、本番環境、ステージング環境、テスト環境といった環境ごとのバックエンド構築が必要なく、全て本番環境と同じバックエンドを少ない工数で構築することが可能です。

(3)柔軟な開発フロー
Amplify Consoleを用いることにより、ブランチごとのテスト環境を自動で構築できるほか、特定の環境のみのBasic認証の付与など、柔軟な開発を可能にしてくれます。

(4)AWSサービスで簡単に開発可能
AWS AmplifyはAWSの豊富なサービスを使用し、アプリケーションを簡単に開発できます。

(7)スケーラビリティ
AWS Amplifyは、サーバーレスのバックエンドを基盤にすることにより、スケールすることを前提に構築されているため、バックエンドの再構築が不要となります。

(8)ユーザーのエンゲージメント確認
AWS Amplifyは、Amazon Pinpointを統合することにより、アクティブデバイス数やユーザーが使用しているOS、プラットフォームの情報などといった、ユーザーのエンゲージメントを簡単に可視化できます。

6つの特徴

RDB関連については触れられていない？？

利用料金

AWS Amplifyの利用料金形態は、2種類に分けられます。まず、Amplifyフレームワークを使用する場合は、基盤となるAWSサービスに対してのみ料金の支払いが必要です。Amplifyフレームワークの使用に追加料金は発生しません。
AWS Amplifyコンソールを使用する場合は、ビルド&デプロイおよび、ホスティングの2つの機能に対して料金が設定されています。

Kumamoto-HamachiKumamoto-Hamachi

3. AWS Amplify　はじめてみる編 - Qiita

簡単に言えば、AWSでもFirebaseみたいにバックエンドはお任せでフロントだけ開発できるようにしてくれるフレームワークみたいなやつです。

Amplifyファミリー

  • Fraework

ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク。SDKとコンポーネントが一緒になったみたいなものです。

  • CLI

AWSでサーバーレスなバックエンドを構築・管理するためのCLIツール。コマンドを実行して対話的に質問に回答するだけで、サーバーレスなバックエンドを構築することができます。

  • Developer Tools

フロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるAWSサービス群のことです。

Kumamoto-HamachiKumamoto-Hamachi

Amplify Studio起動 前半

https://ap-northeast-1.console.aws.amazon.com/amplify/home?region=ap-northeast-1#/deploy?repo=https://github.com/renebrandel/amplify-homes

GitHubに接続でamplify-homesというリポジトリが出来る。(名前変更可能)

Amplify 用のロールを「新しいロールを作成」で作る。画面移動するが全て自動で指定してくれているのでずんずん次へを押していく

ロール作成後は元のデプロイ画面に戻って「既存のロールを更新」してからサービスロールで先程作成したロールを指定。その後「保存してデプロイ」を選択

デプロイ完了後は下記の画面に。

この後はGitHubのリポジトリにpushするとデプロイが行われるようになる。

Kumamoto-HamachiKumamoto-Hamachi

Amplify Studio起動 後半

masterに表示されるURL先のサイトはこんな感じに表示される。

「Backend environments」から「Get Started」をクリックして、Amplify Studio を起動

起動後

Kumamoto-HamachiKumamoto-Hamachi

データモデルの確認

左のナビの「Data」を選択

デフォルトで作成されているHomeモデルを確認

テストデータの追加

同じく左ナビの「Content」を選択。「Actions」から「Auto-generate data」を選択

この時、自動生成するデータの意味を正しく反映させるため、住所であることを制約として設定します。
ダイアログ内では、生成数を5に設定し、Add constraintをクリックして、Field Nameでaddress, Range/settingでStreet addressを選択し、最後にGenerate Dataをクリックしてランダムデータを生成します。

わーい出来た

「image_url」は自動生成出来ないっぽい？ので自分で指定してやる

画像はこちらからunsplash

Kumamoto-HamachiKumamoto-Hamachi

Figma とAmplify 前半

左のナビから「UI LIbrary」を選択。

右上の「sync with Figma」を選択で出てくるモーダルの①の「Use our Figma template」の方を選ぶ。

上記の画面の右上の「Get a copy」を選択。

Figmaの方の画面に。

右上の「Share」の「copy link」からAmplify と Figma を連携させるための URL を取得出来る。

Amplify側のモーダルに戻りコピーしたリンクを貼り付けて次へ。アクセス許可も出す。

右上の「Accept All」でテーマの同期が完了する。

Kumamoto-HamachiKumamoto-Hamachi

Figma とAmplify 中盤

コンポーネント作成

左上の「#」からフレームを追加。名前変更は左側のナビをダブルクリック。(ユニーク名にすること)

右クリックして「Create component(コンポーネントの作成)」で、フレームをコンポーネントにする。
border-radiusの調整なども自由自在。

コンポーネント設定

コンポーネントに、データモデルを紐づける。
先程作ったカードをデータモデルのHomeと紐付ける作業を行う。

「Configure」を選択して「Component properties」にデータモデルを、「Child properties」に項目を当てはめていく。

Child propertiesはコンポーネント内の各要素をクリックしてからset出来る。

コレクション

コレクションはコンポーネントを複数束ねたもの
右上の「Create collections」から作成する。

作成後は「Get component code」からコードを入手(後ほど使う)

Kumamoto-HamachiKumamoto-Hamachi

Amplifyのローカル設定 前半

$ npm install -g @aws-amplify/cli

$ amplify configure

AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜 - Qiita

Amplifyが使用するIAMユーザーを新規作成するために、ブラウザが起動してAWSのログイン画面が表示されます。ログイン出来たら何もせずにコンソール画面に戻りましょう。

ユーザーネームの入力の際は何も入力せずエンターでデフォルトのネームに。

新しいIAMユーザーを作成するための画面が開きます。
しかも必要な情報があらかじめ設定されています。
　ユーザー名「amplify-XXXXX(ランダム文字列)」
　アクセスの種類「プログラムによるアクセスのみ許可」
特にこだわりが無ければ、そのまま「次のステップ：アクセス権限」をクリックしてください。

下記の「ユーザーを追加画面」まで来たら画面を閉じずにターミナルに戻る

[kumamoto ~]$ amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-fx3d7
Complete the user creation using the AWS console
Press Enter to continue

エンターで次へ。

Enter the access key of the newly created user:
? accessKeyId:  ****
? secretAccessKey:  ****
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-test

Successfully set up the new user.

アクセスキーとシークレットアクセスキーは先程の画面のものをコピー＆ペースト。

Kumamoto-HamachiKumamoto-Hamachi

Amplifyのローカル設定 中盤 TODO

AWSバックエンドのセットアップ

今回のプロジェクトで各種AWSのサービスを利用するために、AWS側に必要なリソースをセットアップして、その設定ファイルをプロジェクト内に作成します。
こちらの手順を実行することでバックグラウンドでCloudFormationテンプレートが生成されます。

Kumamoto-HamachiKumamoto-Hamachi

Amplifyのローカル設定 終盤

まずはclone。

git clone git@github.com:{ユーザー名}/amplify-homes.git 
// ghqユーザーなら
$ ghq get git@github.com:{ユーザー名}/amplify-homes.git

amplify-homesディレクトリに移動したら、npm installを行う。

Amplify Studio に戻り、「Get component code」の「Use this component」の「amplify pull」コマンドをコピーしてきて実行。

[kumamoto amplify-homes]$ amplify pull --appId d1zjw2cncc7igs --envName devq
Opening link: https://ap-northeast-1.admin.amplifyapp.com/admin/d1zjw2cncc7igs/devq/verify/?loginVersion=1
⠙ Confirm login in the browser or manually paste in your CLI login key:
✔ Successfully received Amplify Studio tokens.
Amplify AppID found: d1zjw2cncc7igs. Amplify App name is: amplify-homes
Backend environment devq found in Amplify Console app: amplify-homes
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
✅ GraphQL schema compiled successfully.

Edit your schema at /home/kumamoto/Documents/gohomequickly/github.com/Kumamoto-Hamachi/amplify-homes/amplify/backend/api/amplifyhomes/schema.graphql or place .graphql files in a directory at /home/kumamoto/Documents/gohomequickly/github.com/Kumamoto-Hamachi/amplify-homes/amplify/backend/api/amplifyhomes/schema
Successfully generated models. Generated models can be found in /home/kumamoto/Documents/gohomequickly/github.com/Kumamoto-Hamachi/amplify-homes/src
? Do you plan on modifying this backend? Yes
⠇ Building resource api/amplifyhomes✅ GraphQL schema compiled successfully.

Edit your schema at /home/kumamoto/Documents/gohomequickly/github.com/Kumamoto-Hamachi/amplify-homes/amplify/backend/api/amplifyhomes/schema.graphql or place .graphql files in a directory at /home/kumamoto/Documents/gohomequickly/github.com/Kumamoto-Hamachi/amplify-homes/amplify/backend/api/amplifyhomes/schema
✔ Successfully pulled backend environment devq from the cloud.
✅ 

✅ Successfully pulled backend environment devq from the cloud.
Run 'amplify pull' to sync future upstream changes.
Kumamoto-HamachiKumamoto-Hamachi

スクリプト書き換え

import './App.css';
import { PhotoCardCollection, NavBar, MarketingFooter } from './ui-components'

function App() {
return (


<div className="App">
<NavBar />
<PhotoCardCollection />
<MarketingFooter />
</div>


);
}

export default App;

yarn startする(package.jsonを見れば分かるがreact-scripts startが実行される)

Kumamoto-HamachiKumamoto-Hamachi

デプロイ

修正した App.js や「amplify-homes/src/ui-components」をコミットしてGitHubにpushしてマージすると自動でデプロイされる。

デプロイの状況は、Amplify コンソールの「Hosting environments」から確認出来る