クイックスタート

👋 AWS Amplify へようこそ！このクイックスタートガイドでは、以下を行います：

Vite を使用した Vanilla JavaScript アプリをデプロイする
リアルタイムデータ更新を備えたデータベースを構築して接続する
認証と認可ルールを設定する

プロジェクトの作成

以下のコマンドを使用して vite で新しい Vanilla JavaScript アプリを作成し、アプリのディレクトリ（amplify-js-app）とファイルを作成します。

npm create vite@latest
✔ Project name: amplify-js-app
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

npm を初期化し、依存関係と開発用依存関係をインストールします。

cd amplify-js-app
npm install
npm run dev

これにより開発サーバーが起動し、ビルドによって生成された出力を確認できます。http://localhost:5173 にアクセスすることで実行中のアプリを確認できます。

index.html ファイルに以下を追加します：

index.html
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
        <h1>My todos</h1>
        <button id="addTodo">+ new</button>
        <ul id="todoList"></ul>
        <div>
            Try creating a new todo.
            <br>
            <a href="https://docs.amplify.aws/javascript/start/quickstart/">
                Review next step of this tutorial.
            </a>
        </div>
    </main>
    <script type="module" src="src/main.ts"></script>

style.css ファイルに以下を追加します：

style.css
  margin: 0;
  background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255));
  display: flex;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
  color: white;
button:hover {
  border-color: #646cff;
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  margin: 8px 0;
  border: 1px solid black;
  gap: 1px;
  background-color: black;
  border-radius: 8px;
  overflow: auto;
  background-color: white;
  padding: 8px;
  background: #dadbf9;
  font-weight: 800;
  text-decoration: none;

main.js のボイラープレートコードを削除して空にします。その後、ブラウザを更新して変更を確認します。

バックエンドの作成

AWS Amplify を始める最も簡単な方法は、create-amplify コマンドを使用して npm 経由で行うことです。ベースプロジェクトディレクトリから実行できます。

Terminal

npm create amplify@latest
? Where should we create your project? (.) # press enter

このコマンドを実行すると、現在のプロジェクトに Amplify バックエンドファイルが以下のファイル構成でscaffold されます：

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── index.html
├── style.css
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

ローカル AWS 認証情報のセットアップ

バックエンドの更新を行うには、ローカルマシンからバックエンドの更新をデプロイするための AWS 認証情報が必要です。

ローカルマシンに AmplifyBackendDeployFullAccess 権限ポリシーを持つ AWS プロファイルと認証情報がすでにある場合は、ステップ 8 にスキップしてください。

それ以外の場合は、ローカルマシンからバックエンドの更新をデプロイする Amplify 権限を付与する ローカル AWS 認証情報のセットアップ を行ってください。

クラウドサンドボックスのデプロイ

バックエンドをデプロイするには、Amplify の開発者ごとのクラウドサンドボックスを使用します。この機能はチームの各開発者に個別のバックエンド環境を提供し、ローカル開発とテストに最適です。サンドボックス環境でアプリケーションを実行するには、以下のコマンドを実行します：

Terminal

npx ampx sandbox

サンドボックス環境がデプロイされると、GraphQL API、データベース、および認証サービスが作成されます。デプロイされたすべてのリソースは amplify_outputs.json で利用できるようになります。

フロントエンドをバックエンドに接続する

初期のscaffoldには、amplify/data/resource.ts ファイルに定義された事前設定済みのデータバックエンドがすでにあります。デフォルトの例では、content フィールドを持つ Todo モデルが作成されます。main.js ファイルを更新して、新しい To-do アイテムを作成します。

src/main.ts
import { generateClient } from "aws-amplify/data";
import type { Schema } from "../amplify/data/resource";
import './style.css';
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);
const client = generateClient<Schema>();
document.addEventListener("DOMContentLoaded", function () {
    const todos: Array<Schema["Todo"]["type"]> = [];
    const todoList = document.getElementById("todoList") as HTMLUListElement;
    const addTodoButton = document.getElementById("addTodo") as HTMLButtonElement;
    addTodoButton.addEventListener("click", createTodo);
    function updateUI() {
        todoList.innerHTML = '';
        todos.forEach(todo => {
            const li = document.createElement('li');
            li.textContent = todo.content ?? '';
            todoList.appendChild(li);
        });
    function createTodo() {
      console.log('createTodo');
      const content = window.prompt("Todo content");
      if (content) {
          client.models.Todo.create({ content }).then(response => {
              if (response.data && !response.errors) {
                  todos.push(response.data);
                  updateUI();
              } else {
                  console.error('Error creating todo:', response.errors);
                  alert('Failed to create todo.');
          }).catch(error => {
              console.error('Network or other error:', error);
              alert('Failed to create todo due to a network or other error.');
          });
    client.models.Todo.observeQuery().subscribe({
        next: (data) => {
            todos.splice(0, todos.length, ...data.items);
            updateUI();

🥳 成功

以上です！AWS Amplify でフルスタックアプリの構築に成功しました。Amplify の使い方についてさらに詳しく学びたい場合は、Amplify の仕組みの概念ガイドをご覧ください。