AWS Amplify (React) を Windows10 で始めるメモ

AWS JavaScript

AWS Amplify JavaScript Get Started (React)
https://aws-amplify.github.io/docs/js/start?platform=react

Node.jsインストール

Node.js v10.15.3
https://nodejs.org/ja/

Reactアプリ作成

>npm install -g create-react-app
>npm install -g react-scripts
>create-react-app aws-amplify-sample
>cd aws-amplify-sample
>npm run start

AWSアカウント作成

省略

Cognitoユーザープール作成

  • 画面右上リージョン「アジアパシフィック (東京)」選択
  • アプリクライアントを作成して紐付け

    • 「クライアントシークレットを作成」のチェックボックスは外す
  • プールID、アプリクライアントIDを確認

Cognito IDプール作成

  • IDプール名はキャメルケースがよい（ロールの名前にもなるため）
  • 「認証されていないIDに対してアクセスを有効にする」チェックをつける
  • 「認証プロバイダー」の「Cognito」タブで「プールID」「アプリクライアントID」を入力
  • 「AWS 認証情報の取得」コード内に、作成されたIDプールのIDが表示される

    // Amazon Cognito 認証情報プロバイダーを初期化します
AWS.config.region = 'ap-northeast-1'; // リージョン
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'IDプールのID',
});
  • IAMのロールを確認すると「Cognito_{IDプール名}Auth_Role」「Cognito_{IDプール名}Unauth_Role」の2つが増えてる

Amplify組み込み

>npm install --save aws-amplify
>npm install --save aws-amplify-react

src/App.js を書き換え

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure({
  Auth: {
    region: 'ap-northeast-1', 
    identityPoolId: 'Cognito IDプールのID', 
    userPoolId: 'CognitoユーザープールID',
    userPoolWebClientId: 'CognitoアプリクライアントID', 
  }
});

class App extends Component {
  render() {
    return (
        :
       (省略)
        :
    );
  }
}

export default withAuthenticator(App);

アプリ再起動

>npm run start

  • 「Create account」からユーザー新規登録してログイン確認
  • AWSコンソールのCognitoユーザープールに、登録アカウントが存在すること確認

ここまでの参考URL

リリースビルド

>npm run build

S3バケット作成

  • リージョン東京
  • パブリックアクセス設定の「新規のパブリックバケットポリシーをブロックする」チェックを外す
  • 　　〃　　「バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする」チェックを外す
  • プロパティの「Static website hosting」を有効にする（index.html）
  • バケットポリシーにパブリック読み取り可能を設定する
    静的ウェブサイトホスティング用に S3 バケットを設定する方法

S3にデプロイ

  • AWSコマンドインストール
    https://aws.amazon.com/jp/cli/
  • コマンド用IAMユーザー作成

    • 権限は AdministratorAccess なら最強(?)
    • アクセスキーID、シークレットアクセスキーをメモ
  • コマンド設定

    >aws configure
AWS Access Key ID [None]: IAMユーザーアクセスキーID
AWS Secret Access Key [None]: IAMユーザーシークレットアクセスキー
Default region name [None]: ap-northeast-1
Default output format [None]: json
  • S3同期

    >aws s3 sync build/ s3://{バケット名}
  • S3バケット Static website hosting エンドポイントURLをブラウザ確認
    http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com