トップ > AWSのバックエンドをTypeScriptで簡単構築！AWS Blocks（パブリックプレビュー）を使ってみた

AWSのバックエンドをTypeScriptで簡単構築！AWS Blocks（パブリックプレビュー）を使ってみた

記事タイトルとURLをコピーする

AWSのバックエンドをTypeScriptで簡単構築！AWS Blocks（パブリックプレビュー）を使ってみた

こんにちは！ES課、濱岡です。

最近暑くなりましたね！ もう外を歩くだけで汗をかくようになりました。。。

2026年6月、AWSがパブリックプレビューとして「AWS Blocks」を発表しました。TypeScript開発者がAWSのインフラ知識なしでバックエンドを構築できるオープンソースフレームワークです。

今回のアップデートに関する公式のAWS News Blogは以下です。

aws.amazon.com

AWS Blocksとは

AWS Blocksは、TypeScript開発者向けのオープンソースバックエンドフレームワークです。

「AWSは使いたいけど、CloudFormationやCDKは難しそう…」と感じたことはないでしょうか。AWS Blocksはそのギャップを埋めるツールです。インフラの設定ファイルを書かなくても、TypeScriptのコードだけでAWSのバックエンドを構築・デプロイできます。

さらに、ローカル環境ではAWSアカウントが不要です。開発中はすべてローカルで動作し、デプロイ時にコードを変更することなくAWSの本番サービスへ切り替わります。

主な機能

利用できるBlock一覧（主要なもの）

AWS Blocksの機能は「Block」という単位で提供されます。必要なBlockを組み合わせてバックエンドを構成します。

Authentication（認証）

  • AuthBasic — ユーザー名・パスワード認証（Amazon DynamoDB + JWT）
  • AuthCognito — MFA・グループ対応のマネージド認証（Amazon Cognito）

Data storage（データストレージ）

  • DistributedTable — インデックス付き構造化データ（Amazon DynamoDB）
  • Database — フルSQLデータベース・PostgreSQL（Amazon Aurora Serverless v2）
  • FileBucket — ファイルストレージ（Amazon S3）

AI

  • Agent — ツール使用・会話履歴対応のAIエージェント（Amazon Bedrock）

Real-time and async（リアルタイム・非同期）

  • Realtime — WebSocketリアルタイム通信（Amazon API Gateway（WebSocket API））

この他にもメール送信・ログ・ホスティングなど多数のBlockが用意されています。全Blockの一覧は公式ドキュメントをご参照ください。

対応フロントエンドフレームワーク

Webフレームワーク（Next.js、Nuxt、Astro、React、Vue、Svelte、Angular）、ネイティブモバイル（Swift、Kotlin、Dart/Flutter）、デスクトップアプリケーションに対応しています。

エンドツーエンドの型安全性

バックエンドのAPIを変更すると、フロントエンドのTypeScript型も自動で更新されます。コード生成ステップが不要で、型の不一致によるバグを防げます。

料金

AWS Blocks自体は追加料金なしです。利用したAWSサービス（Amazon DynamoDB、AWS Lambdaなど）の料金のみかかります。

実際に使ってみた

前提条件

ローカル開発のみの場合

  • Node.js v22以降
  • npm v10以降（Node.jsに同梱）

AWSへのデプロイまで行う場合は追加で

  • AWS CLIの設定（認証情報）
  • AWS CDKのブートストラップ済みアカウント（詳細）

プロジェクトの作成

以下のコマンドでプロジェクトを作成します。

npx @aws-blocks/create-blocks-app my-todo-app
cd my-todo-app

依存パッケージのインストールは自動で実行されます。完了すると以下のメッセージが表示されます。

✓ Blocks app created!

Next steps:
  cd /Users/your-name/my-todo-app
  npm run dev

作成されたプロジェクトの主なファイル構成は以下のとおりです（一部省略）。

my-todo-app/
├── aws-blocks/       # バックエンド定義（Blockの組み合わせ）
├── src/              # フロントエンド
├── cdk.json
├── package.json
└── tsconfig.json

ローカルで起動

以下のコマンドで起動後、http://localhost:3000 にアクセスすると、認証・CRUD操作・ソート機能を備えたTodoアプリが動作します。AWSアカウントは不要です。

npm run dev

バックエンドのコード

バックエンドは aws-blocks/index.ts の1ファイルで定義します。

import { ApiNamespace, Scope, AuthBasic, DistributedTable, Realtime } from '@aws-blocks/blocks';
import { z } from 'zod';

const scope = new Scope('my-app');

// AuthBasic Block：ローカルではインメモリでユーザー管理、本番ではDynamoDBに保存
const auth = new AuthBasic(scope, 'auth', {
  passwordPolicy: { minLength: 8 },
  crossDomain: process.env.BLOCKS_SANDBOX === 'true',
});
export const authApi = auth.createApi();

// DistributedTable Block：ZodでスキーマとTypeScript型を定義
// ローカルはインメモリ、本番ではDynamoDB
const todoSchema = z.object({
  userId: z.string(),
  todoId: z.string(),
  title: z.string(),
  completed: z.boolean(),
  priority: z.number(),
  createdAt: z.number(),
});

const todos = new DistributedTable(scope, 'todos', {
  schema: todoSchema,
  key: { partitionKey: 'userId', sortKey: 'todoId' },
  indexes: {
    byPriority: { partitionKey: 'userId', sortKey: 'priority' },
  },
});

// Realtime Block：ブラウザタブ間でTodoの変更をリアルタイム通知
// ローカルはインメモリ、本番ではAmazon API Gateway（WebSocket API）
const rt = new Realtime(scope, 'live', {
  namespaces: {
    todos: Realtime.namespace(z.object({
      action: z.enum(['created', 'updated', 'deleted']),
      todoId: z.string(),
    })),
  },
});

// API定義：フロントエンドから型安全に呼び出せる
export const api = new ApiNamespace(scope, 'api', (context) => ({
  async createTodo(title: string, priority: number = 2) {
    const user = await auth.requireAuth(context);
    const todo = { userId: user.username, todoId: crypto.randomUUID(),
                   title, completed: false, priority, createdAt: Date.now() };
    await todos.put(todo);
    await rt.publish('todos', user.username, { action: 'created', todoId: todo.todoId });
    return todo;
  },

  async deleteTodo(todoId: string) {
    const user = await auth.requireAuth(context);
    await todos.delete({ userId: user.username, todoId });
    await rt.publish('todos', user.username, { action: 'deleted', todoId });
    return { success: true };
  },
  // 他のメソッドは省略
}));

このコードがそのままAWSへのデプロイにも使われます。変更は一切不要です。

フロントエンドからの呼び出し

aws-blocks/ ディレクトリはプロジェクト内のローカルnpmパッケージとして定義されています。そのため、フロントエンドからは外部パッケージと同じ書き方で aws-blocks/index.ts をインポートできます。以下は src/index.ts からAPIの呼び出し部分を抜粋したものです。

import { api, authApi } from 'aws-blocks';
// ログイン画面などのUIパーツも @aws-blocks/blocks/ui から提供される
import { AccountMenuBar, AuthenticatedContent } from '@aws-blocks/blocks/ui';

// 認証状態に応じたコンテンツの表示
AuthenticatedContent(authApi, (user) => {

  // Todoの一覧取得（バックエンドのメソッドをそのまま呼べる）
  async function load() {
    todos = await api.listTodos(sortBy);
  }

  // Todoの作成
  async function addTodo() {
    await api.createTodo(title, parseInt(select.value));
    await load();
  }

  // リアルタイム同期：他のタブでの変更を受信して自動リロード
  (async () => {
    const channel = await api.subscribeTodos();
    channel.subscribe(() => load());
  })();

  load();
});

AWSへのデプロイ

本番環境へのデプロイは以下のコマンドで実行します。コードの変更は不要です。

npm run deploy

リソースを削除する場合は以下です。

npm run destroy

まとめ

AWS Blocksを使うと、CDKやCloudFormationを覚えなくてもAWSのバックエンドが構築できます。ローカル開発からAWSデプロイまで同じコードで動くのは、開発をシンプルにしてくれます。

とくにTypeScriptで開発しているチームや、インフラ管理の手間を減らしたい方にはぴったりな選択肢です。現在パブリックプレビュー中のため本番利用は慎重に判断しつつ、まずはローカルで気軽に試してみてください！

以上、濱岡でした！

はまおか(執筆記事の一覧)

アプリケーションサービス部

プログラムを書くことが好きです