クイックスタートガイド
このガイドでは、@aws/nx-plugin
を使用したAWSプロジェクトの高速構築に関する基本手順を説明します。
前提条件
始める前に以下のグローバル依存関係が必要です:
- Git
- Node >= 22(Nodeバージョン管理にはNVMの使用を推奨)
node --version
を実行して確認
- PNPM >= 10(代替としてYarn >= 4、Bun >= 1、NPM >= 10も使用可能)
pnpm --version
、yarn --version
、bun --version
またはnpm --version
で確認
- UV >= 0.5.29
- Python 3.12をインストール:
uv python install 3.12.0
uv python list --only-installed
で確認
- Python 3.12をインストール:
- デプロイ先AWSアカウント用に設定されたAWS Credentials
- VSCodeを使用する場合、Nx Console VSCode Pluginのインストールを推奨
ステップ1: 新しいNxワークスペースの初期化
以下のコマンドを実行して、任意のパッケージマネージャーでNxワークスペースを作成します:
npx create-nx-workspace@~21.0.3 my-project --pm=pnpm --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.0.3 my-project --pm=yarn --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.0.3 my-project --pm=npm --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.0.3 my-project --pm=bun --preset=@aws/nx-plugin --ci=skip
完了後、プロジェクトディレクトリに移動します:
cd my-project
ステップ2: ジェネレータを使用したプロジェクトのスキャフォールディング
このクイックスタートではtRPC API、Reactウェブサイト、Cognito認証、CDKインフラストラクチャを追加します。プロジェクトタイプに応じて、任意のジェネレータの組み合わせで迅速に初期構築できます。左側のナビゲーションバーの__ガイド__から全オプション一覧を確認できます。
tRPC APIの追加
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#trpc-api
- 必須パラメータを入力
- name: demo-api
- auth: IAM
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM
yarn nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM
npx nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM
bunx nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM --dry-run
yarn nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM --dry-run
npx nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM --dry-run
bunx nx g @aws/nx-plugin:ts#trpc-api --name=demo-api --auth=IAM --dry-run
これによりpackages/demo-api
フォルダ内にAPIが作成されます。
Reactウェブサイトの追加
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#cloudscape-website
- 必須パラメータを入力
- name: demo-website
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website
yarn nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website
npx nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website
bunx nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website --dry-run
yarn nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website --dry-run
npx nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website --dry-run
bunx nx g @aws/nx-plugin:ts#cloudscape-website --name=demo-website --dry-run
packages/demo-website
に新しいReactウェブサイトが構築されます。
Cognito認証の追加
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#cloudscape-website#auth
- 必須パラメータを入力
- project: @my-project/demo-website
- cognitoDomain: my-demo
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo
yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo
npx nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo
bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo --dry-run
yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo --dry-run
npx nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo --dry-run
bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth --project=@my-project/demo-website --cognitoDomain=my-demo --dry-run
ウェブサイトにCognito認証を追加するためのインフラストラクチャとReactコードを設定します。
フロントエンドとバックエンドの接続
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - api-connection
- 必須パラメータを入力
- sourceProject: @my-project/demo-website
- targetProject: @my-project/demo-api-backend
- クリック
Generate
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend
npx nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend --dry-run
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend --dry-run
npx nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend --dry-run
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@my-project/demo-website --targetProject=@my-project/demo-api-backend --dry-run
ウェブサイトからtRPC APIを呼び出すための必要なプロバイダ設定を行います。
CDKインフラストラクチャの追加
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#infra
- 必須パラメータを入力
- name: infra
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#infra --name=infra
yarn nx g @aws/nx-plugin:ts#infra --name=infra
npx nx g @aws/nx-plugin:ts#infra --name=infra
bunx nx g @aws/nx-plugin:ts#infra --name=infra
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#infra --name=infra --dry-run
yarn nx g @aws/nx-plugin:ts#infra --name=infra --dry-run
npx nx g @aws/nx-plugin:ts#infra --name=infra --dry-run
bunx nx g @aws/nx-plugin:ts#infra --name=infra --dry-run
AWSへのインフラストラクチャデプロイ用CDKアプリを設定します。
ステップ3: クラウドリソースの定義とAWSへのデプロイ
packages/infra/src/stacks/application-stack.ts
を開き、以下のコードを追加します:
import * as cdk from 'aws-cdk-lib';import { DemoApi, DemoWebsite, UserIdentity } from ':my-project/common-constructs';import { Construct } from 'constructs';
export class ApplicationStack extends cdk.Stack { constructor(scope: Construct, id: string, props?: cdk.StackProps) { super(scope, id, props);
const identity = new UserIdentity(this, 'identity'); const api = new DemoApi(this, 'api', { integrations: DemoApi.defaultIntegrations(this).build(), }); api.grantInvokeAccess(identity.identityPool.authenticatedRole);
new DemoWebsite(this, 'website'); }}
これがフルスタックアプリケーションをデプロイするために必要なCDKコードの全量です。
インフラストラクチャのビルドとデプロイ
以下のコマンドでプロジェクトをビルドします:
pnpm nx run-many --target build --all
yarn nx run-many --target build --all
npx nx run-many --target build --all
bunx nx run-many --target build --all
ステップ4: フロントエンドのローカル実行
-
runtime-config.json
ファイルの取得:Terminal window pnpm nx run @demo/demo-website:load:runtime-configTerminal window yarn nx run @demo/demo-website:load:runtime-configTerminal window npx nx run @demo/demo-website:load:runtime-configTerminal window bunx nx run @demo/demo-website:load:runtime-config -
ローカルウェブサイトサーバーの起動
Terminal window pnpm nx run @demo/demo-website:serveTerminal window yarn nx run @demo/demo-website:serveTerminal window npx nx run @demo/demo-website:serveTerminal window bunx nx run @demo/demo-website:serve
ウェブサイトはhttp://localhost:4200
で利用可能になります。
おめでとうございます!🎉 @aws/nx-plugin
を使用したフルスタックアプリケーションの構築とデプロイに成功しました!