概要

Amplify を使って react アプリケーションをデプロイするところまで

環境

Docker で作成します。

docker-compose.yml

version: '3'

services:
    amplify:
        build: ./
        ports:
            - "3000:3000"
            - "20002:20002"
        volumes:
            - ~/dev/AmplifyDemo:/var/www/AmplifyDemo
            # :より左は自分の環境に合わせる（credential, config をこのあとの作業で入れるor入る）
            - ~/dev/AmplifyDemo/aws/:/root/.aws/
        tty: true

のちのち Amplify Mock を利用したいので java を入れておきます。
不要ならなくても問題ないです。

Dockerfile

FROM node:12.4

# amplify CLI
RUN npm install -g @aws-amplify/cli

# java for Amplify Mock
RUN apt update; apt install -y wget software-properties-common apt-transport-https
RUN wget -qO - https://adoptopenjdk.jfrog.io/adoptopenjdk/api/gpg/key/public | apt-key add -
RUN add-apt-repository --yes https://adoptopenjdk.jfrog.io/adoptopenjdk/deb/
RUN apt update; apt install -y adoptopenjdk-11-openj9

WORKDIR /var/www/AmplifyDemo

起動
コンテナ名は自分の環境に置き換えて

$ docker-compose up -d
$ docker exec -it amplifydemo_amplify_1 bash

Amplify が利用する IAM ユーザーを作成

$ amplify configure
Scanning for plugins...
Plugin scan successful
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-dev
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-dev&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
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:  default

Successfully set up the new user.

これで ~/.aws 配下に上記作成の IAM ユーザーのキーが書かれた credentials と config が生成される。

React プロジェクト作成

※ すでにプロジェクトが存在している場合は適宜 git clone など。

$ npx create-react-app demo --typescript

起動確認

$ cd demo
$ yarn start

http://localhost:3000 にアクセス

Amplify プロジェクト作成

amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project demo
? Enter a name for the environment dev
? Choose your default editor: IntelliJ IDEA
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

これで AWS Amplify コンソールに demo アプリが作成されていることが確認できる。

api 追加

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: demo
? Choose the default authorization type for the API Amazon Cognito User Pool
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? Yes
Please edit the file in your editor: /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql
? Press enter to continue Selected  editor intellij was not found in your machine. Please manually edit the file created at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql
? Press enter to continue

The following types do not have '@auth' enabled. Consider using @auth with @model
	 - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.

Edit your schema at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema.graphql or place .graphql files in a directory at /var/www/AmplifyDemo/demo/amplify/backend/api/demo/schema
Successfully added resource demo locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

api 追加したら push する

$ amplify push

ここで現状までの状態を git にあげておく
今回の例で言うと demo 配下のもの。

デプロイ

主に公式の手順をなぞっただけ。
Amplify コンソールでリポジトリの接続から Git 連携しておく
さきほどあげた git リポジトリの master を選択。
保存してデプロイ。

問題なくデプロイできていると以下のような感じ

これで master に push するたびに、デプロイが走る。

公式を参考に

以下のようにしてバックエンドの環境を増やして、本番用/ステージング用などと分けます。

amplify env add

作ったバックエンドの環境と git 連携してあるフロントエンドとの関係を定義します。
本番環境: frontned（git の master）、backend（amplify env の prod）
ステージング環境: frontend（git の develop）、backend（amplify env の dev）
のように。

おまけ

もし、すでにもろもろプロジェクトが作成されていて、自分が開発に途中から参画するときにする作業

プロジェクトの git clone
Amplify の IAM ユーザーの認証情報をもらう（例えばインフラ担当者から）
もらった認証情報から ~/dev/AmplifyDemo/aws/（自分の環境に合わせてください）に credentials と config ファイルを作成
docker の起動までは変わらず手順通りやる（clone してきたパスなど適宜環境に合わせて docker-compose.yml を変更）
docker コンテナ内に入って、プロジェクトのディレクトリに移動する
amplify init
ポイントは最初に既存の環境があるか聞かれるので Yes, 次にその環境を選択すること。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: dev

react 画面の確認
clone してきたばかりであれば、初回は yarn install 必要

$ yarn install

$ yarn start

起動確認 http://localhost:3000

続き

Amplify で GraphQL と Cognito 認証