Skip to content
@aws/nx-plugin
Blog

クイックスタートガイド

このガイドでは、@aws/nx-plugin をインストールして AWS 上でプロジェクトを迅速に構築する基本手順を説明します。

前提条件

Section titled “前提条件”

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

  • 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
    1. Python 3.12のインストール: uv python install 3.12.0
    2. 確認コマンド: uv python list --only-installed
  • ターゲットAWSアカウント（アプリケーションのデプロイ先）に設定されたAWS Credentials
  • VSCodeを使用する場合、Nx Console VSCode Pluginのインストールを推奨

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

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

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

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

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

Terminal window
cd my-project

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

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

このクイックスタートガイドでは、tRPC API・React ウェブサイト・Cognito 認証・CDK インフラを追加します。プロジェクトのタイプに応じて、任意のジェネレータの組み合わせで迅速にプロジェクトを立ち上げられます。左側のナビゲーションバーにある ガイド から全オプションリストを確認できます。

tRPC API の追加

Section titled “tRPC API の追加”
  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 が作成されます。

React ウェブサイトの追加

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

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

Cognito 認証の追加

Section titled “Cognito 認証の追加”
  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#cloudscape-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 を呼び出すために必要なプロバイダが設定されます。

CDK インフラの追加

Section titled “CDK インフラの追加”
  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: クラウドリソースの定義と AWS へのデプロイ

Section titled “ステップ 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 コードの全てです。

インフラのビルドとデプロイ

Section titled “インフラのビルドとデプロイ”

次のコマンドを実行してプロジェクトをビルドします：

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

ステップ 4: フロントエンドのローカル実行

Section titled “ステップ 4: フロントエンドのローカル実行”

  1. runtime-config.json ファイルを取得：

    Terminal window
    pnpm nx run @demo/demo-website:load:runtime-config

  2. ローカルウェブサイトサーバーを起動

    Terminal window
    pnpm nx run @demo/demo-website:serve

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

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