AWS日記35 (Amplify)

はじめに

今回は AWS Amplify を試します。
チュートリアルのJavaScriptの手順を参考に、サンプルWebアプリケーションをホスティングします。

初回設定

• チュートリアルの Prerequisites

環境設定

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

Amplify CLI インストール

• npm または curl コマンドで Amplify CLI をインストールします。
• チュートリアルの Option 2: Follow the instructions

Amplify用のユーザーを追加

• AdministratorAccess を許可したユーザーを新規に追加します。

プロジェクト作成

• チュートリアルの Set up fullstack project

ファイル作成

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

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

npm install

ローカル環境で起動

• 起動後にlocalhost:8080で動作を確認します。

npm start

バックエンド初期化

amplify init

API作成

• チュートリアルの Connect API and database to the app

API作成

amplify add api

APIデプロイ

amplify push

状態確認

amplify status

src/app.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

ホスティング

amplify add hosting

公開

amplify publish

動作確認

終わりに

AWS Amplify を試しました。
コマンドだけでも簡単にアプリケーションを開発できます。
Amplify Studioを利用することでブラウザ上で開発することができる為、今後試そうと思います。