Skip to content
@aws/nx-plugin
Blog

クイックスタートガイド

このガイドでは、@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
    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ワークスペースの初期化

任意のパッケージマネージャーを使用してNxワークスペースを作成するには、次のコマンドを実行します：

Terminal window
npx create-nx-workspace@~20.6.3 my-project --pm=pnpm --preset=ts --ci=skip --formatter=prettier

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

Terminal window
cd my-project

ステップ2: AWS用Nxプラグインの追加

次のコマンドでプラグインをインストールします：

Terminal window
pnpm add -Dw @aws/nx-plugin

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

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

tRPC APIの追加

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

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

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認証の追加

  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コードが設定されます。

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

  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-backend
  6. クリック Generate

これによりウェブサイトがtRPC APIを呼び出すために必要なプロバイダ設定が行われます。

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アプリが設定されます。

ステップ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');
    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


    new DemoWebsite(this, 'website');
  }
}

これがフルスタックアプリケーションをデプロイするために必要なCDKコードの全てです。

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

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

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

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

  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を使用してフルスタックアプリケーションの構築とデプロイに成功しました！