Reactウェブサイト

このジェネレータはReactウェブサイトを新規作成し、CloudScapeの設定と、静的ウェブサイトをクラウドにデプロイするためのAWS CDKまたはTerraformインフラストラクチャ（S3ホスティング、CloudFront配信、WAF保護）を構成します。

生成されるアプリケーションはビルドツールとバンドラーにViteを使用し、型安全なルーティングにTanStack Routerを採用しています。

Note

このジェネレータはCloudScapeを初期設定しますが、本質的にはReactプロジェクトジェネレータです。必要に応じて別のデザインシステムやコンポーネントライブラリに移行するようにコードを変更可能です。

使用方法

Reactウェブサイトの生成

新しいReactウェブサイトは2つの方法で生成できます：

VSCode

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

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#react-website

yarn

yarn nx g @aws/nx-plugin:ts#react-website

npm

npx nx g @aws/nx-plugin:ts#react-website

bun

bunx nx g @aws/nx-plugin:ts#react-website

変更されるファイルを確認するためにドライランを実行することもできます

pnpm

pnpm nx g @aws/nx-plugin:ts#react-website --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#react-website --dry-run

npm

npx nx g @aws/nx-plugin:ts#react-website --dry-run

bun

bunx nx g @aws/nx-plugin:ts#react-website --dry-run

オプション

パラメータ	型	デフォルト	説明
name 必須	string	-	The name of the application.
directory	string	packages	The directory of the new application.
enableTailwind	boolean	true	Enable TailwindCSS for utility-first styling.
enableTanstackRouter	boolean	true	Enable Tanstack router for type-safe routing.
iacProvider	string	Inherit	The preferred IaC provider. By default this is inherited from your initial selection.

ジェネレータの出力

ジェネレータは<directory>/<name>ディレクトリに以下のプロジェクト構造を作成します：

• index.html HTMLエントリポイント
• public 静的アセット
• Directorysrc

  • main.tsx Reactセットアップを含むアプリケーションエントリポイント
  • config.ts アプリケーション設定（ロゴなど）
  • Directorycomponents

    • AppLayout CloudScapeレイアウトとナビゲーションバー用コンポーネント
  • Directoryhooks

    • useAppLayout.tsx ネストされたコンポーネントからAppLayoutを調整するフック
  • Directoryroutes

    • Directorywelcome

      • index.tsx @tanstack/react-router用のサンプルルート（ページ）
  • styles.css グローバルスタイル
• vite.config.ts ViteとVitestの設定
• tsconfig.json ソースとテスト用の基本TypeScript設定
• tsconfig.app.json ソースコード用TypeScript設定
• tsconfig.spec.json テスト用TypeScript設定

インフラストラクチャ

このジェネレータは選択した iacProvider に基づいてInfrastructure as Codeを生成するため、packages/common に関連するCDKコンストラクトまたはTerraformモジュールを含むプロジェクトを作成します。

共通のInfrastructure as Codeプロジェクトは以下の構造を持ちます：

CDK

• Directorypackages/common/constructs

  • Directorysrc

    • Directoryapp/ プロジェクト/ジェネレータ固有のインフラストラクチャ用コンストラクト

      • …
    • Directorycore/ app 内のコンストラクトで再利用される汎用コンストラクト

      • …
    • index.ts app からコンストラクトをエクスポートするエントリーポイント
  • project.json プロジェクトのビルドターゲットと設定

Note

このプロジェクトは ts#project ジェネレータを使用して生成されているため、同じビルドターゲットを設定します。

Terraform

• Directorypackages/common/terraform

  • Directorysrc

    • Directoryapp/ プロジェクト/ジェネレータ固有のインフラストラクチャ用Terraformモジュール

      • …
    • Directorycore/ app 内のモジュールで再利用される汎用モジュール

      • …
  • project.json プロジェクトのビルドターゲットと設定

Note

このプロジェクトは terraform#project ジェネレータを使用して生成されているため、同じビルドターゲットを設定します。

ジェネレータは選択したiacProviderに基づいてウェブサイトをデプロイするためのインフラストラクチャコードを作成します：

CDK

• Directorypackages/common/constructs/src

  • Directoryapp

    • Directorystatic-websites

      • <name>.ts ウェブサイト固有のインフラストラクチャ
  • Directorycore

    • static-website.ts 汎用StaticWebsiteコンストラクト

Terraform

• Directorypackages/common/terraform/src

  • Directoryapp

    • Directorystatic-websites

      • Directory<name>

        • <name>.tf ウェブサイト固有のモジュール
  • Directorycore

    • Directorystatic-website

      • static-website.tf 汎用静的ウェブサイトモジュール

Reactウェブサイトの実装

ReactドキュメントはReact開発の基本を学ぶのに適しています。CloudScapeドキュメントでは利用可能なコンポーネントとその使用方法を確認できます。

ルート

ルート/ページの作成

CloudScapeウェブサイトにはデフォルトでTanStack Routerが設定されています。新しいルートを簡単に追加できます：

1. ローカル開発サーバーを起動
2. src/routesに新しい<page-name>.tsxファイルを作成（ファイルパスがURLパスに対応）
3. RouteとRouteComponentが自動生成されます。ここでページの構築を開始できます

ページ間のナビゲーション

ページ間の移動にはLinkコンポーネントまたはuseNavigateフックを使用します：

import { Link, useNavigate } from '@tanstack/react-router';

export const MyComponent = () => {
  const navigate = useNavigate();

  const submit = async () => {
    const id = await ...
    // 非同期処理後のリダイレクトに`navigate`を使用
    navigate({ to: '/products/$id', { params: { id }} });
  };

  return (
    <>
      <Link to="/products">キャンセル</Link>
      <Button onClick={submit}>送信</Button>
    </>
  )
};

詳細はTanStack Routerドキュメントを参照してください。

ランタイム設定

インフラストラクチャからの設定はランタイム設定を通じてウェブサイトに提供されます。これにより、デプロイ時まで不明なAPI URLなどの詳細情報にアクセス可能になります。

インフラストラクチャ

CDK

RuntimeConfig CDKコンストラクトを使用して設定の追加・取得が可能です。@aws/nx-pluginジェネレータ（ts#trpc-apiやpy#fast-apiなど）で生成されたCDKコンストラクトは自動的にRuntimeConfigに値を追加します。

ウェブサイトCDKコンストラクトはランタイム設定をruntime-config.jsonファイルとしてS3バケットのルートにデプロイします。

packages/infra/src/stacks/application-stack.ts

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    // RuntimeConfigに自動的に値を追加
    new MyApi(this, 'MyApi', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });

    // runtime-config.jsonとして自動デプロイ
    new MyWebsite(this, 'MyWebsite');
  }
}

Caution

runtime-config.jsonに設定が含まれるように、RuntimeConfigに追加するコンストラクトの後にウェブサイトを宣言する必要があります。

Terraform

Terraformではランタイム設定はruntime-configモジュールで管理されます。@aws/nx-pluginジェネレータ（ts#trpc-apiやpy#fast-apiなど）で生成されたTerraformモジュールは自動的にランタイム設定に値を追加します。

ウェブサイトTerraformモジュールはランタイム設定をruntime-config.jsonファイルとしてS3バケットのルートにデプロイします。

packages/infra/src/main.tf

# ランタイム設定に自動的に値を追加
module "my_api" {
  source = "../../common/terraform/src/app/apis/my-api"
}

# runtime-config.jsonとして自動デプロイ
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # ランタイム設定追加のためAPIを先にデプロイ
  depends_on = [module.my_api]
}

Caution

runtime-config.jsonに設定が含まれるよう、適切なdepends_onを設定してウェブサイトモジュールを他のモジュールより後に宣言する必要があります。

ウェブサイトコード

ウェブサイトではuseRuntimeConfigフックを使用してランタイム設定値を取得できます：

import { useRuntimeConfig } from '../hooks/useRuntimeConfig';

const MyComponent = () => {
  const runtimeConfig = useRuntimeConfig();

  // ランタイム設定値にアクセス
  const apiUrl = runtimeConfig.apis.MyApi;
};

ローカルランタイム設定

ローカル開発サーバーを実行する際、バックエンドURLや認証設定などを認識させるため、publicディレクトリにruntime-config.jsonファイルが必要です。

ウェブサイトプロジェクトにはデプロイ済みアプリケーションからruntime-config.jsonを取得するload:runtime-configターゲットが設定されています：

pnpm

pnpm nx run <my-website>:"load:runtime-config"

yarn

yarn nx run <my-website>:"load:runtime-config"

npm

npx nx run <my-website>:"load:runtime-config"

bun

bunx nx run <my-website>:"load:runtime-config"

Note

CDK

インフラストラクチャプロジェクトのsrc/main.tsでステージ名のプレフィックスを変更した場合、ウェブサイトのproject.jsonファイルのload:runtime-configターゲットを更新する必要があります。

また、このターゲットは単一ステージがAWS認証情報の環境にデプロイされていることを前提としています。同一アカウント/リージョンに複数ステージをデプロイする場合はコマンドを調整してください。

Terraform

Terraformプロジェクトでは、load:runtime-configターゲットは直近のローカルterraform applyで作成されたruntime-config.jsonをコピーします。

ローカル開発サーバー

serveまたはserve-localターゲットでローカル開発サーバーを起動できます。

Serveターゲット

serveターゲットはウェブサイトのローカル開発サーバーを起動します。このターゲットを使用するには、ウェブサイトが連携するインフラストラクチャのデプロイとローカルランタイム設定の読み込みが必要です。

次のコマンドで実行できます：

pnpm

pnpm nx run <my-website>:serve

yarn

yarn nx run <my-website>:serve

npm

npx nx run <my-website>:serve

bun

bunx nx run <my-website>:serve

このターゲットは「本番」デプロイされたAPIと連携しながらウェブサイトを変更する場合に有用です。

Serve Localターゲット

serve-localターゲットはViteのMODEをserve-localに設定したローカル開発サーバーを起動し、API接続ジェネレータで接続したAPIのローカルサーバーも同時に起動します。

このターゲットでサーバーを起動すると、runtime-config.jsonがローカルAPIのURLを指すように自動的に上書きされます。

次のコマンドで実行できます：

pnpm

pnpm nx run <my-website>:serve-local

yarn

yarn nx run <my-website>:serve-local

npm

npx nx run <my-website>:serve-local

bun

bunx nx run <my-website>:serve-local

このターゲットはウェブサイトとAPIを同時に開発する際の迅速な反復処理に適しています。

このモードで実行しruntime-config.jsonが存在しない場合、CloudScapeウェブサイト認証ジェネレータでCognito認証を設定していても、ログインがスキップされローカルサーバーへのリクエストに認証ヘッダーが含まれません。

serve-localで認証を有効化するには、インフラストラクチャをデプロイしランタイム設定を読み込んでください。

ビルド

buildターゲットでウェブサイトをビルドできます。Viteを使用して本番用バンドルをdist/packages/<my-website>/bundleディレクトリに生成し、型チェック、コンパイル、リンターを実行します。

pnpm

pnpm nx run <my-website>:build

yarn

yarn nx run <my-website>:build

npm

npx nx run <my-website>:build

bun

bunx nx run <my-website>:build

テスト

テストの作成方法は標準的なTypeScriptプロジェクトと同様です。詳細はTypeScriptプロジェクトガイドを参照してください。

React固有のテストにはReact Testing Libraryが事前にインストールされています。使用方法はReact Testing Libraryドキュメントを参照してください。

テストはtestターゲットで実行できます：

pnpm

pnpm nx run <my-website>:test

yarn

yarn nx run <my-website>:test

npm

npx nx run <my-website>:test

bun

bunx nx run <my-website>:test

ウェブサイトのデプロイ

Reactウェブサイトジェネレータは選択したiacProviderに基づいてCDKまたはTerraformのインフラストラクチャコードを作成します。これを使用してウェブサイトをデプロイできます。

CDK

ウェブサイトのデプロイには、CDKアプリケーション作成用のts#infraジェネレータの使用を推奨します。

packages/common/constructsに生成されたCDKコンストラクトを使用してウェブサイトをデプロイできます。

packages/infra/src/stacks/application-stack.ts

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    new MyWebsite(this, 'MyWebsite');
  }
}

この設定では以下が構成されます：

1. 静的ウェブサイトファイルホスティング用S3バケット
2. グローバルコンテンツ配信用CloudFrontディストリビューション
3. セキュリティ保護用WAF Web ACL
4. 安全なS3アクセスのためのOrigin Access Control
5. ウェブサイトファイルとランタイム設定の自動デプロイ

Terraform

ウェブサイトのデプロイには、Terraformプロジェクト作成用のterraform#projectジェネレータの使用を推奨します。

packages/common/terraformに生成されたTerraformモジュールを使用してウェブサイトをデプロイできます。

packages/infra/src/main.tf

# ウェブサイトのデプロイ
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }
}

この設定では以下が構成されます：

1. 静的ウェブサイトファイルホスティング用S3バケット
2. グローバルコンテンツ配信用CloudFrontディストリビューション
3. セキュリティ保護用WAF Web ACL（us-east-1にデプロイ）
4. 安全なS3アクセスのためのOrigin Access Control
5. ウェブサイトファイルとランタイム設定の自動デプロイ

Note

CloudFrontとWAFリソースはus-east-1リージョンにデプロイする必要があるため、aws.us_east_1プロバイダが必須です。Terraform設定にこのプロバイダを含めてください：

packages/infra/src/providers.tf

provider "aws" {
  alias  = "us_east_1"
  region = "us-east-1"
}