爆速でフルスタックなアプリケー ションが作れる！？ Nx Plugin for AWSに⼊⾨しよう！ クラスメソッド株式会社 クラウド事業統括本部 プロフェッショナルサービス事業本部 yoshii-hiroki 

はじめに 

今日のテーマ 2026年9⽉8⽇、AWS LabsからNx Plugin for AWSのv1.0.0がリリースされました。 Nx Plugin for AWSを使うと、アプリとインフラのひな形を爆速で作成できるらしい 今回はその全体像と、アプリ開発でどう役⽴つのかをざっくり紹介します。 3 

アジェンダ 1. Nxについて 2. Nx Plugin for AWSを使うと何ができる？ 3. ユースケースとメリット 4. 実際に触ってみる 4 

本題 

Nxについて 6 

Nxを知る Nx Plugin for AWSを理解する上で、ベースとなるのがNxという ツールです。 ⼀⾔で⾔うと、Nxはモノレポの管理ツールです。 ※モノレポとは、複数のアプリケーションやコンポーネントを、1つのリポジトリでまとめて管理する構成 7 

Nxの機能 ● ● ● ● モノレポによるプロジェクトの管理 プロジェクト間の依存関係の可視化 アプリケーションのビルドやテストのキャッシュ Generatorによるコード⽣成 8 

NxのGeneratorとPlugin Generator コードや設定ファイルの⽣成を⾃動化する仕組み。 コマンドひとつで、アプリや機能のひな形を作成できる Plugin ツールやフレームワークとNxを連携する拡張パッケージ。 様々なGeneratorやタスク設定などを内包できる 9 

NxとNx Plugin for AWSの関係性 Nx nx generate Nx Plugins nx generate Nx Plugin for AWS Developer My WorkSpace React App(ひな形) React Generator Python API Generator DynamoDB Generator Auth Generator … Other Plugins.. 10 

Nx Plugin for AWSを使うと何ができる？ 11 

できること 

Generatorを組み合わせて、アプリのひな形を作れる 対応している技術コンポーネント 13 

デプロイ用のインフラ定義も生成される NX Plugin for AWSではサーバーレス中⼼のインフラが準備されており Terraform or CDKを通してAWSにデプロイできる React Generator FastAPI Generator 14 

できないこと(⾃分でやること) 

ひな形の先は⾃分で作る NX Plugin for AWSは機能実装を進めるための、スタートライン を作ってくれる。 下記のような機能の設計‧実装‧テスト‧拡張は開発者の責務 ● ● ● ● Reactで〇〇機能の画⾯を作る FastAPIで〇〇のAPIを作る DynamoDBのデータモデルを作成する TerraformでVPC等のリソースを作る(スタートラインからの拡張) 16 

ユースケースとメリット 17 

今までのアプリケーションの開発で⾟かったところ 初速と拡張性を両⽴させづらい... PaaSやBaaSを使って、初速を取ると拡張性が落ちる 逆に拡張性を考えて設計すると、1から⾃分たちで作る必要があ り初速がでない。 18 

Nx Plugin for AWSなら... Nx Plugin for AWSは初速と拡張性を両⽴できる。 ● 初速 ○ Generatorを組み合わせることで、アプリケーションを素早く構築で きる ○ PaaSやBaaSを使わずとも、初速が得られる ● 拡張性 ○ 技術ロックインが⼩さく、要件に合わせて構成を変更しやすい ■ Nx Plugin for AWSが⽣成するのは⼀般的なフレームワークの コードでしかない 19 

ユースケース ● ⼩さく初めて、そのまま育てていくアプリケーション ○ PoCとして簡単なアプリケーションを構築したい。 ○ ⼀般的な認証と業務データのCRUD機能が必要。 ○ 将来的に機能追加(拡張)する前提 20 

やってみた 21 

作成するもの 今回は、React‧FastAPI‧Cognito‧DynamoDB‧Terraformのひな形を⽣成してみ ます。 コンポーネント 使⽤するGenerator フロントエンド ts#website バックエンド py#api Cognito認証 ts#website#auth データベース py#dynamodb インフラ管理 terraform#project 22 

アーキテクチャ図 

ReactとFastAPIのひな形を⽣成 ワークスペースを作成 $ pnpm create @aws/nx-workspace demo-app --iac=terraform --containers=docker $ cd demo-app React Webサイトを⽣成 $ pnpm nx g @aws/nx-plugin:ts#website demo-website --no-interactive FastAPIを⽣成 $ pnpm nx g @aws/nx-plugin:py#api \ --name=demo-api --framework=fastapi --auth=cognito --no-interactive 24 

認証‧DBを追加 Reactに認証を追加 $ pnpm nx g @aws/nx-plugin:ts#website#auth --project=demo-website --no-interactive DynamoDBを追加 $ pnpm nx g @aws/nx-plugin:py#dynamodb --name=demo-db --no-interactive 接続を追加 $ pnpm nx g @aws/nx-plugin:connection --sourceProject=@demo-app/demo-website --targetProject=demo_app.demo_api --no-interactive $ pnpm nx g @aws/nx-plugin:connection --sourceProject=demo_app.demo_api --targetProject=demo_app.demo_db --no-interactive 25 

Terraformのインフラ管理を作成 インフラ管理を作成 $ pnpm nx g @aws/nx-plugin:terraform#project infra --no-interactive 26 

AWSにデプロイする Generatorで⽣成されたリソースのTerraform Moduleを/packages/infra/src/main.tfで読み込み、デプロイコマンドを叩く。 # Cognito 認証 module "user_identity" { source = "../../common/terraform/src/core/user-identity" } デプロイコマンド $ pnpm build $ pnpm nx bootstrap infra $ pnpm nx plan infra $ pnpm nx apply infra # Lambda のデプロイ成果物を配置するバケット module "asset_bucket" { source = "../../common/terraform/src/core/asset-bucket" } # Cognito 認証付き FastAPI module "demo_api" { source = "../../common/terraform/src/app/apis/demo-api" asset_bucket_name = module .asset_bucket .bucket_name user_pool_id = module .user_identity .user_pool_id user_pool_client_ids = [module .user_identity .user_pool_client_id ] } 27 

⽣成されたアプリケーションの ひな形を確認してみよう 

Reactのサンプル画⾯ ログイン後に、表⽰されるサイドメニュー付きのWelcomeページ 

⽣成されたサンプルAPI オウム返しするだけのAPI(/echo) 

画⾯とAPIのサンプルを⾒て思ったこと ● AIに作らせれば、すぐできそう？ ● これだけなら下記のようなコマンドで始めるのと変わらないので は？ $ pip install fastapi $ pnpm create vite sample-app --template react-ts 画⾯とAPIのサンプル以外にも、ひな形には他にも⾊々いいポイント があります！！！ 

⽣成されたひな形にある いい感じな仕組みを紹介したい 

いい感じなポイント(1/3) ● ログ‧トレース‧メトリクスの設定が最初からある ○ AWS Lambda Powertoolsを使った、ログ‧トレース‧メトリクスの設定 が導⼊済み。 from .init import app, tracer # init.py で用意された Tracerを読み込む @app.get ("/echo") @tracer.capture_method # このAPIの処理をトレース対象にする def echo(message: Annotated[ str, Query( max_length =1024)]) -> EchoOutput: return EchoOutput( message=f"{message}") 

いい感じなポイント(2/3) ● テストを始めるための設定が揃っている ○ FastAPIにはtests/にテストファイルが準備されている ○ ビルド時にテストを実⾏する処理がすでに組み込まれている APIのテスト実⾏ $ pnpm nx test demo_app.demo_api APIのビルド実⾏ $ pnpm nx build demo_app.demo_api ビルドの内容 

いい感じなポイント(3/3) ● APIスキーマ管理の仕組み(OpenAPI Generator)が導⼊済 ○ ビルド時にFastAPIのOpenAPI仕様からReact⽤の型付きAPIクライアント を⽣成できる。 // サンプルAPI(/echo)の型定義 // レスポンス export type EchoOutput = { message: string; }; // リクエスト export type EchoRequestQueryParameters = { message: string; }; 

最後に 

まとめ Nx Plugin for AWSは、モノレポ管理ツール「Nx」を拡張し、 AWS向けのアプリやインフラのひな形を⽣成できるPlugin ● ● ● Pluginに内包されている、Generatorを組み合わせることで、React‧FastAPI‧認証 ‧DB‧Terraformのフルスタックアプリケーションのひな形を数個のコマンドで⽣成でき ます ⽣成される、ひな形にはログ‧トレース‧メトリクスやビルド‧テスト等の仕組みが⽤意 されており、開発者は機能実装に集中できます ⼀般的な技術コンポーネントで構成されるため、技術ロックインを少なくしながら、⾃分 たちでアプリケーションを育てて⾏くことができます 

ご清聴ありがとうございました 

No content