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

インフラストラクチャ

RuntimeConfig CDKコンストラクトを使用して設定の追加と取得が可能です。@aws/nx-pluginで生成されたCDKコンストラクト（tRPC APIやFastAPIなど）は自動的に適切な値をRuntimeConfigに追加します。

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

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ファイルに設定が含まれるように、ウェブサイトの宣言は他のコンストラクトより後に行う必要があります。

ウェブサイトコード

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ターゲットを更新する必要があります。

ローカル開発サーバー

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ドキュメントを参照してください。

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

ウェブサイトのデプロイ

ウェブサイトのデプロイには、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');
  }
}