Reactウェブサイト

このジェネレータは、CloudScapeが設定された新しいReactウェブサイトと、S3でホストされた静的ウェブサイトをCloudFrontで配信しWAFで保護するクラウドデプロイ用のAWS CDKインフラストラクチャを作成します。

生成されるアプリケーションはビルドツールとバンドラーとして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.

ジェネレータの出力

ジェネレータは<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設定

また、packages/common/constructsディレクトリにウェブサイトデプロイ用のCDKインフラストラクチャコードを生成します：

• Directorysrc

  • Directoryapp

    • Directorystatic-websites

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

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

Reactウェブサイトの実装

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

ルーティング

ルート/ページの作成

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

1. ローカル開発サーバーを起動
2. src/routesに新しい<page-name>.tsxファイルを作成（ファイルツリーの位置がパスを表現）
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ドキュメントを参照。

ランタイム設定

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

インフラストラクチャ

RuntimeConfig CDKコンストラクトを使用して設定の追加/取得が可能です。@aws/nx-pluginで生成されたCDKコンストラクト（tRPC APIやFastAPIなど）は自動的に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');
  }
}

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

ウェブサイトコード

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"

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

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

ローカル開発サーバー

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ウェブサイト認証を設定している場合、ログインがスキップされ認証ヘッダーが含まれません。

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ドキュメントを参照。

次のコマンドでテストを実行：

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

ウェブサイトのデプロイ

デプロイにはTypeScriptインフラストラクチャジェネレータを使用したCDKアプリケーションの作成を推奨します。

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');
  }
}