Skip to content

クイックスタートガイド

このガイドでは、@aws/nx-pluginのインストールと基本的な使用方法について説明し、AWS上でのプロジェクト構築を迅速化する方法を解説します。

作業を進める前に以下のグローバル依存関係が必要です:

  • Git
  • Node >= 22 (ノードのバージョン管理にはNVMなどの使用を推奨します)
    • node --version を実行して確認
  • PNPM >= 10 (代替としてYarn >= 4Bun >= 1、またはNPM >= 10も使用可能)
    • pnpm --versionyarn --versionbun --version または npm --version を実行して確認
  • UV >= 0.5.29
    1. 以下のコマンドを実行して Python 3.12 をインストール: uv python install 3.12.0
    2. uv python list --only-installed でインストール済みバージョンを確認
  • ターゲットとなるAWSアカウント(アプリケーションをデプロイする環境)に設定されたAWS Credentials
  • Dockerは一部のジェネレーターで必要です
  • CDKの代わりにインフラストラクチャー・アズ・コードでTerraformを使用する場合、Terraform >= 1.12が必要です
    • terraform --version を実行して確認してください
  • VSCodeを使用する場合、Nx Console VSCode Pluginのインストールを推奨します

ステップ1: 新しいNxワークスペースの初期化

Section titled “ステップ1: 新しいNxワークスペースの初期化”

以下のコマンドを実行して、任意のパッケージマネージャーでNxワークスペースを作成します:

Terminal window
npx create-nx-workspace@21.6.4 my-project --pm=pnpm --preset=@aws/nx-plugin --ci=skip --aiAgents

完了したら、プロジェクトディレクトリに移動します:

Terminal window
cd my-project

ステップ2: ジェネレータを使用したプロジェクトのスキャフォールディング

Section titled “ステップ2: ジェネレータを使用したプロジェクトのスキャフォールディング”

このクイックスタートガイドでは、tRPC API、Reactウェブサイト、Cognito認証、CDK/Terraformインフラストラクチャを追加します。プロジェクトタイプに応じて、任意のジェネレータの組み合わせで迅速にプロジェクトを構築できます。左のナビゲーションバーにある__ガイド__から全オプションリストをご確認ください。

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#trpc-api
  5. 必須パラメータを入力
    • name: demo-api
    • auth: IAM
  6. クリック Generate

これによりpackages/demo-apiフォルダ内にAPIが作成されます。

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#react-website
  5. 必須パラメータを入力
    • name: demo-website
  6. クリック Generate

packages/demo-websiteに新しいReactウェブサイトがスキャフォールドされます。

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#react-website#auth
  5. 必須パラメータを入力
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. クリック Generate

ウェブサイトにCognito認証を追加するためのインフラストラクチャとReactコードを設定します。

フロントエンドとバックエンドの接続

Section titled “フロントエンドとバックエンドの接続”
  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - api-connection
  5. 必須パラメータを入力
    • sourceProject: @my-project/demo-website
    • targetProject: @my-project/demo-api
  6. クリック Generate

ウェブサイトがtRPC APIを呼び出せるように必要なプロバイダーを設定します。

選択したIaCプロバイダーに基づいてインフラストラクチャプロジェクトを追加します。

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#infra
  5. 必須パラメータを入力
    • name: infra
  6. クリック Generate

AWSにインフラストラクチャをデプロイするためのCDKアプリを設定します。

ステップ3: ローカル環境でのウェブサイトとAPIの実行

Section titled “ステップ3: ローカル環境でのウェブサイトとAPIの実行”

以下のコマンドでウェブサイトと接続されたAPIのローカル開発サーバーを起動します:

Terminal window
pnpm nx run demo-website:serve-local

ウェブサイトはhttp://localhost:4200で利用可能になります。

ウェブサイトとAPIへの変更は、両方のローカルサーバーがホットリロードされるためリアルタイムで反映されます。

ステップ4: クラウドリソースの定義とAWSへのデプロイ

Section titled “ステップ4: クラウドリソースの定義と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コードの全量です。

インフラストラクチャのビルドとデプロイ

Section titled “インフラストラクチャのビルドとデプロイ”

以下のコマンドでプロジェクトをビルドします:

Terminal window
pnpm nx run-many --target build --all

インフラストラクチャのブートストラップを実行します:

Terminal window
pnpm nx run infra:bootstrap

プロジェクトをデプロイします:

Terminal window
pnpm nx run infra:deploy my-project-sandbox/*

ステップ5: デプロイ済みクラウドリソースでのウェブサイトテスト

Section titled “ステップ5: デプロイ済みクラウドリソースでのウェブサイトテスト”
  1. runtime-config.jsonファイルの取得:

    Terminal window
    pnpm nx run demo-website:load:runtime-config
  2. ローカルウェブサイトサーバーの起動

    Terminal window
    pnpm nx run demo-website:serve

ウェブサイトはhttp://localhost:4200で利用可能になり、デプロイしたAPIと認証リソースを指すようになります。


おめでとうございます!🎉 @aws/nx-pluginを使用したフルスタックアプリケーションの構築とデプロイに成功しました!