爆速でフルスタックなアプリケーションが作れる！？ Nx Plugin for AWSに入門しよう！

Transcript

1. 爆速でフルスタックなアプリケー ションが作れる！？ Nx Plugin for AWSに⼊⾨しよう！ クラスメソッド株式会社 クラウド事業統括本部 プロフェッショナルサービス事業本部 yoshii-hiroki
2. はじめに
3. 今日のテーマ 2026年9⽉8⽇、AWS LabsからNx Plugin for AWSのv1.0.0がリリースされました。 Nx Plugin for AWSを使うと、アプリとインフラのひな形を爆速で作成できるらしい 今回はその全体像と、アプリ開発でどう役⽴つのかをざっくり紹介します。 3
4. アジェンダ 1. Nxについて 2. Nx Plugin for AWSを使うと何ができる？ 3. ユースケースとメリット 4. 実際に触ってみる 4
5. 本題
6. Nxについて 6
7. Nxを知る Nx Plugin for AWSを理解する上で、ベースとなるのがNxという ツールです。 ⼀⾔で⾔うと、Nxはモノレポの管理ツールです。 ※モノレポとは、複数のアプリケーションやコンポーネントを、1つのリポジトリでまとめて管理する構成 7
8. Nxの機能 • • • • モノレポによるプロジェクトの管理 プロジェクト間の依存関係の可視化 アプリケーションのビルドやテストのキャッシュ Generatorによるコード⽣成 8
9. NxのGeneratorとPlugin Generator コードや設定ファイルの⽣成を⾃動化する仕組み。 コマンドひとつで、アプリや機能のひな形を作成できる Plugin ツールやフレームワークとNxを連携する拡張パッケージ。 様々なGeneratorやタスク設定などを内包できる 9
10. 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
11. Nx Plugin for AWSを使うと何ができる？ 11
12. できること
13. Generatorを組み合わせて、アプリのひな形を作れる 対応している技術コンポーネント 13
14. デプロイ用のインフラ定義も生成される NX Plugin for AWSではサーバーレス中⼼のインフラが準備されており Terraform or CDKを通してAWSにデプロイできる React Generator FastAPI Generator 14
15. できないこと(⾃分でやること)
16. ひな形の先は⾃分で作る NX Plugin for AWSは機能実装を進めるための、スタートライン を作ってくれる。 下記のような機能の設計‧実装‧テスト‧拡張は開発者の責務 • • • • Reactで〇〇機能の画⾯を作る FastAPIで〇〇のAPIを作る DynamoDBのデータモデルを作成する TerraformでVPC等のリソースを作る(スタートラインからの拡張) 16
17. ユースケースとメリット 17
18. 今までのアプリケーションの開発で⾟かったところ 初速と拡張性を両⽴させづらい... PaaSやBaaSを使って、初速を取ると拡張性が落ちる 逆に拡張性を考えて設計すると、1から⾃分たちで作る必要があ り初速がでない。 18
19. Nx Plugin for AWSなら... Nx Plugin for AWSは初速と拡張性を両⽴できる。 • 初速 ◦ Generatorを組み合わせることで、アプリケーションを素早く構築で きる ◦ PaaSやBaaSを使わずとも、初速が得られる • 拡張性 ◦ 技術ロックインが⼩さく、要件に合わせて構成を変更しやすい ▪ Nx Plugin for AWSが⽣成するのは⼀般的なフレームワークの コードでしかない 19
20. ユースケース • ⼩さく初めて、そのまま育てていくアプリケーション ◦ PoCとして簡単なアプリケーションを構築したい。 ◦ ⼀般的な認証と業務データのCRUD機能が必要。 ◦ 将来的に機能追加(拡張)する前提 20
21. やってみた 21
22. 作成するもの 今回は、React‧FastAPI‧Cognito‧DynamoDB‧Terraformのひな形を⽣成してみ ます。 コンポーネント 使⽤するGenerator フロントエンド ts#website バックエンド py#api Cognito認証 ts#website#auth データベース py#dynamodb インフラ管理 terraform#project 22
23. アーキテクチャ図
24. 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
25. 認証‧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
26. Terraformのインフラ管理を作成 インフラ管理を作成 $ pnpm nx g @aws/nx-plugin:terraform#project infra --no-interactive 26
27. 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
28. ⽣成されたアプリケーションの ひな形を確認してみよう
29. Reactのサンプル画⾯ ログイン後に、表⽰されるサイドメニュー付きのWelcomeページ
30. ⽣成されたサンプルAPI オウム返しするだけのAPI(/echo)
31. 画⾯とAPIのサンプルを⾒て思ったこと • AIに作らせれば、すぐできそう？ • これだけなら下記のようなコマンドで始めるのと変わらないので は？ $ pip install fastapi $ pnpm create vite sample-app --template react-ts 画⾯とAPIのサンプル以外にも、ひな形には他にも⾊々いいポイント があります！！！
32. ⽣成されたひな形にある いい感じな仕組みを紹介したい
33. いい感じなポイント(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}")
34. いい感じなポイント(2/3) • テストを始めるための設定が揃っている ◦ FastAPIにはtests/にテストファイルが準備されている ◦ ビルド時にテストを実⾏する処理がすでに組み込まれている APIのテスト実⾏ $ pnpm nx test demo_app.demo_api APIのビルド実⾏ $ pnpm nx build demo_app.demo_api ビルドの内容
35. いい感じなポイント(3/3) • APIスキーマ管理の仕組み(OpenAPI Generator)が導⼊済 ◦ ビルド時にFastAPIのOpenAPI仕様からReact⽤の型付きAPIクライアント を⽣成できる。 // サンプルAPI(/echo)の型定義 // レスポンス export type EchoOutput = { message: string; }; // リクエスト export type EchoRequestQueryParameters = { message: string; };
36. 最後に
37. まとめ Nx Plugin for AWSは、モノレポ管理ツール「Nx」を拡張し、 AWS向けのアプリやインフラのひな形を⽣成できるPlugin • • • Pluginに内包されている、Generatorを組み合わせることで、React‧FastAPI‧認証 ‧DB‧Terraformのフルスタックアプリケーションのひな形を数個のコマンドで⽣成でき ます ⽣成される、ひな形にはログ‧トレース‧メトリクスやビルド‧テスト等の仕組みが⽤意 されており、開発者は機能実装に集中できます ⼀般的な技術コンポーネントで構成されるため、技術ロックインを少なくしながら、⾃分 たちでアプリケーションを育てて⾏くことができます
38. ご清聴ありがとうございました