OGreブログ

少しずつネタを増やしていくためのブログです。

AWS Amplify について (1) 101

AWS Amplifyについて

以下の内容はAWS BlackBelt Online Seminar AWS Amplify の内容の個人的なまとめです。

AWS Amplifyとは

  • Webフロント、モバイルアプリ開発のためのプラットフォーム。
  • 以下の仕組みを持っている。
    • サーバレスバックエンドを構築するCLI
    • バックエンドの接続を行うためのクライアントライブラリ
    • Webサイトホスティング
  • 以下のAWSのサービスをCLIコマンドで構築してくれる。
    • Cognito (認証機能)
    • DynamoDB (データストア)
    • API Gateway, AppSync (API基盤)
    • S3 (ストレージ)
    • AppSync, IoT Core (リアルタイム通知)
    • CloudFront, S3 (Webホスティング)

Amplify Framework

バックエンドに直感的に接続できるライブラリ。 js, iOS, Android に対応。

// e.g. ファイルをプライベートでアップロードするためのコード
Storage.put('test.png', file: {
  contentType: 'image/png',
  level: 'private',
});

Amplifyのワークフロー

  1. CLIでバックエンド構築
  2. Amplify Frameworkでアプリケーション実装
  3. デプロイ

1. Amplify CLI

Amplify CLI インストール

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

ルートディレクトリで初期化

$ amplify init

カテゴリ(バックエンドの設定)を追加する

# カテゴリの作成
$ amplify add <category name>

# e.g. APIのバックエンド構築
$ amplify add api
# カテゴリの更新
$ amplify update <category name>

# カテゴリの削除
$ amplify remove <category name>

# 設定ステータスの確認
$ amplify status

下記のコマンドで構築がされる。
※ アプリケーションに設定ファイルが作成されるが、CLIで上書きされるので直接編集はしてはいけない。

# バックエンドの構築
$ amplify push

2. Amplify Frameworkを用いたアプリケーションの実装

Amplify Frameworkのインストール

$ npm install aws-amplify

ソースコードで先に生成されたバックエンドの設定ファイルの読み込みを行う。

// jsの例
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

構築できる機能の一覧

f:id:captain-goblin:20211204222724p:plain

3. アプリケーションのデプロイ

$ amplify add hosting

デプロイ方法は以下の2つがあるが、自分の場合は後者しか使わないと感じた。

  • (1) Amazon CloudFront and S3
    • CLIから直接デプロイ
    • CI/CD, GitHubとの連携が不要の場合
  • (2) Hosting with Amplify Console
    • Amplify Consoleを用いてデプロイ
      • Amplify Consoleの機能が利用できる
        • テスト環境へのBasic認証設定
        • CI/CD結果をEmail通知
        • WebhookでCI/CDパイプラインを起動
        • ビルド設定のカスタマイズ (amplify.yml)
    • CI/CD, GitHubとの連携
      • Cypressを用いたE2EテストをCI/CDパイプラインに組み込める
        • テスト結果のArtifactをダウンロード可能
    • マネジメントコンソールから操作可

まとめ

ご多分にもれず、弊社でも現在エンジニアの人手不足に悩まされているので、一人のエンジニアが担う役割というのは広範囲になっています。

そんな中でスコープを絞り込むことができるAWS Amplifyを使用するのは良い選択なのかもしれません。

各カテゴリとの連携方法については別記事でまとめようと思います。