AWS日記35 (Amplify)

# はじめに
今回は [AWS Amplify](https://aws.amazon.com/jp/amplify/) を試します。
[チュートリアルのJavaScript](https://docs.amplify.aws/start/q/integration/js/)の手順を参考に、サンプルWebアプリケーションをホスティングします。


# 初回設定
 - チュートリアルの  [Prerequisites](https://docs.amplify.aws/start/getting-started/installation/q/integration/js/)

### 環境設定
 - 適切なバージョンの Node.js , npm , git をインストールします。
 - 本記事における Node.jsのバージョンは 16.13.2 です。

### Amplify CLI インストール
 - npm または curl コマンドで Amplify CLI をインストールします。
 - チュートリアルの [Option 2: Follow the instructions](https://docs.amplify.aws/start/getting-started/installation/q/integration/js/#option-2-follow-the-instructions)

### Amplify用のユーザーを追加
 - AdministratorAccess を許可したユーザーを新規に追加します。

# プロジェクト作成
 - チュートリアルの [Set up fullstack project](https://docs.amplify.aws/start/getting-started/setup/q/integration/js/)

### ファイル作成

```bash
mkdir -p amplify-js-app/src && cd amplify-js-app
touch package.json index.html webpack.config.js src/app.js
```


### パッケージのインストール

```bash
npm install
```

### ローカル環境で起動
 - 起動後に[localhost:8080](http://localhost:8080)で動作を確認します。

```bash
npm start
```

### バックエンド初期化

```bash
amplify init
```

# API作成
 - チュートリアルの [Connect API and database to the app](https://docs.amplify.aws/start/getting-started/data-model/q/integration/js/)

### API作成

```bash
amplify add api
```

### APIデプロイ

```bash
amplify push
```

### 状態確認

```bash
amplify status
```

### src/app.js の最終形

```js
import Amplify, { API, graphqlOperation } from "aws-amplify";

import awsconfig from "./aws-exports";
import { createTodo } from "./graphql/mutations";
import { listTodos } from "./graphql/queries";
import { onCreateTodo } from "./graphql/subscriptions";

Amplify.configure(awsconfig);

async function createNewTodo() {
  const todo = {
    name: "Use AppSync",
    description: `Realtime and Offline (${new Date().toLocaleString()})`,
  };

  return await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

async function getData() {
  API.graphql(graphqlOperation(listTodos)).then((evt) => {
    evt.data.listTodos.items.map((todo, i) => {
      QueryResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`;
    });
  });
}

const MutationButton = document.getElementById("MutationEventButton");
const MutationResult = document.getElementById("MutationResult");
const QueryResult = document.getElementById("QueryResult");
const SubscriptionResult = document.getElementById("SubscriptionResult");

MutationButton.addEventListener("click", (evt) => {
  createNewTodo().then((evt) => {
    MutationResult.innerHTML += `<p>${evt.data.createTodo.name} - ${evt.data.createTodo.description}</p>`;
  });
});

API.graphql(graphqlOperation(onCreateTodo)).subscribe({
  next: (evt) => {
    const todo = evt.value.data.onCreateTodo;
    SubscriptionResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`;
  },
});

getData();
```


# Webアプリケーションのホスティング・公開
 - チュートリアルの [Deploy and host app](https://docs.amplify.aws/start/getting-started/hosting/q/integration/js/)

### ホスティング

```bash
amplify add hosting
```

### 公開

```bash
amplify publish
```

### 動作確認

![103.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/61aaa8df-ac94-7653-2492-f98ea7181a87.jpeg)


# 終わりに
AWS Amplify を試しました。
コマンドだけでも簡単にアプリケーションを開発できます。
[Amplify Studio](https://aws.amazon.com/jp/amplify/studio/)を利用することでブラウザ上で開発することができる為、今後試そうと思います。

![002-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/8125f1c9-8c59-c641-8bda-9d2135232523.jpeg)