前提条件

AWSアカウントを持っている
npmコマンドが使える

今回やること

フロントエンド(Angular)の構築
Amplifyの初期設定

Angularの構築

プロジェクトの初期化

Angular CLIを使います。

npm i @angular/cli

今回はv12.0.0でやります。

ng --version
Angular CLI: 12.0.2

ng newでプロジェクトを作成します。
ルーティング、CSSはお好みで。

ng new angular-amplify
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

以降は必要な場合のみ

ESLint

Angularはv12からTSLintがドロップされて、Linterが入っていないので、ESLintを入れます。
Schematicsが用意されているので、それを使います。

ng add @angular-eslint/schematics

Prettier

フォーマッタはPrettierを使います。
ESLintとの競合を解消するために、eslint-config-prettierも入れます。
最近はeslint-plugin-prettierは非推奨みたいですね。(参考)

npm install -D prettier eslint-config-prettier

.eslintrc.jsonを編集します。

.eslintrc.json

{
    "extends": [
        // extendsの一番下に下記を追加
        "prettier"
    ]
}

.prettierrcも追加。設定はお好みで。

.prettierrc

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}

フォーマッタを実行するコマンドを追加しておきます。

package.json

{
  "scripts": {
    "format:check": "prettier --check 'src/**/*.ts' 'src/**/*.html'",
    "format": "prettier --write 'src/**/*.ts' 'src/**/*.html'"
  }
}

Angular Material

ng add @angular/material

Amplifyの初期設定

Amplify CLIのインストール

npm install -g @aws-amplify/cli

初期設定

以下のコマンドを実行します。

amplify configure

AWSアカウントの認証後、Amplify用IAMユーザーを作成し、認証情報をローカルに保存します。
~/.aws/credentialにユーザー情報が保存されていればOK。

[profile name]
aws_access_key_id=******************
aws_secret_access_key=******************

次に、以下のコマンドを実行します。

amplify init

実行するとプロジェクト名やエディタなどを聞かれるので、対象のものを選択します。
プロファイルは先程作成したIAMユーザーのプロファイルを指定します。

成功すると、プロジェクトルートにamplifyディレクトリと、src/aws-export.jsファイルが生成されます。

aws-export.js

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-northeast-1"
};


export default awsmobile;

また、この時点では何もありませんが、amplify statusでAmplifyの状態を見ることができます。

AngularからAmplifyを使う

Amplifyライブラリを追加