Skip to content
@aws/nx-plugin
Blog

React Website

Filter this guidePick generator option values to hide sections that don't apply.

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

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

使用方法

Section titled “使用方法”

React Websiteの生成

Section titled “React Websiteの生成”

新しいReact Websiteは2つの方法で生成できます：

Terminal window
pnpm nx g @aws/nx-plugin:ts#website --framework=react
変更されるファイルを確認するためにドライランを実行することもできます
Terminal window
pnpm nx g @aws/nx-plugin:ts#website --framework=react --dry-run

オプション

Section titled “オプション”
パラメータ型デフォルト説明
name 必須string-アプリケーションの名前。
framework reactreact使用するフロントエンドフレームワーク。
directory stringpackages新しいアプリケーションのディレクトリ。
subDirectory string-プロジェクトが配置されるサブディレクトリ。デフォルトではプロジェクト名になります。
ux none | cloudscape | shadcnshadcn優先するUXプロバイダー。
tailwind booleantrueユーティリティファーストのスタイリングのためにTailwindCSSを有効にします。
tanstackRouter booleantrue型安全なルーティングのためにTanstackルーターを有効にします。
infra cloudfront-s3 | nonecloudfront-s3ウェブサイトをデプロイするインフラストラクチャのタイプ。
iac inherit | cdk | terraforminherit優先するIaCプロバイダー。デフォルトでは、初期選択から継承されます。
preferInstallDependencies booleantrueジェネレーター実行後に依存関係のインストールを優先するかどうか。複数のジェネレーターをバッチ処理する際にインストールを延期する場合はfalseに設定します（後続のジェネレーターがNxプロジェクトグラフを計算できるよう、必要に応じてインストールは実行されます）。最後に一度だけインストールします。

ジェネレーターの出力

Section titled “ジェネレーターの出力”

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

  • index.html HTMLエントリーポイント
  • public 静的アセット
  • Directorysrc
    • main.tsx Reactセットアップを含むアプリケーションエントリーポイント
    • config.ts アプリケーション設定（例：ロゴ）
    • Directorycomponents
      • AppLayout 全体のレイアウトとナビゲーションバーのコンポーネント
    • Directoryhooks
      • useAppLayout.tsx ネストされたコンポーネントからAppLayoutを調整するためのフック（Cloudscapeのみ）
    • Directoryroutes
      • index.tsx TanStack Routerのルート（またはページ）の例
    • styles.css グローバルスタイル
  • vite.config.mts ViteとVitestの設定
  • tsconfig.json ソースとテストのベースTypeScript設定
  • tsconfig.app.json ソースコード用のTypeScript設定
  • tsconfig.spec.json テスト用のTypeScript設定
  • package.json プロジェクトのパッケージ名と依存関係を定義するプロジェクトマニフェスト

インフラストラクチャ

Section titled “インフラストラクチャ”

このジェネレーターは、選択した iac に基づいてインフラストラクチャをコードとして提供するため、関連する CDK コンストラクトまたは Terraform モジュールを含む packages/common にプロジェクトを作成します。

共通のインフラストラクチャコードプロジェクトは、次のように構成されています：

  • Directorypackages/common/constructs
    • Directorysrc
      • Directoryapp/ プロジェクト/ジェネレーター固有のインフラストラクチャ用のコンストラクト
        • …
      • Directorycore/ app 内のコンストラクトによって再利用される汎用コンストラクト
        • …
      • index.ts app からコンストラクトをエクスポートするエントリーポイント
    • project.json プロジェクトのビルドターゲットと設定

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

  • Directorypackages/common/constructs/src
    • Directoryapp
      • Directorystatic-websites
        • <name>.ts ウェブサイト固有のインフラストラクチャ
    • Directorycore
      • static-website.ts 汎用StaticWebsiteコンストラクト

アーキテクチャ

Section titled “アーキテクチャ”

デプロイされたウェブサイトは以下のアーキテクチャを持ちます：

Web BrowserWAFCloudFrontStatic Assets(S3)

ウェブサイトの実装

Section titled “ウェブサイトの実装”

Reactドキュメントは、Reactでの構築の基本を学ぶための良い出発点です。

ux = cloudscape

利用可能なコンポーネントとその使用方法の詳細については、Cloudscapeドキュメントを参照してください。

ux = shadcn

利用可能なコンポーネントとその使用方法の詳細については、shadcn/uiドキュメントを参照してください。

ルート

Section titled “ルート”

ルート/ページの作成

Section titled “ルート/ページの作成”

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

  1. ローカル開発サーバーを実行
  2. src/routesに新しい<page-name>.tsxファイルを作成します。ファイルツリー内の位置がパスを表します
  3. RouteとRouteComponentが自動的に生成されることに注目してください。ここでページの構築を開始できます！

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

Section titled “ページ間のナビゲーション”

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

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


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


  const submit = async () => {
    const id = await ...
    // Use `navigate` for redirecting after some asynchronous action
    navigate({ to: '/products/$id', { params: { id }} });
  };


  return (
    <>
      <Link to="/products">Cancel</Link>
      <Button onClick={submit}>Submit</Button>
    </>
  )
};

詳細については、TanStack Routerドキュメントを確認してください。

ウェブサイトのデプロイ

Section titled “ウェブサイトのデプロイ”

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

ウェブサイトをデプロイするには、ts#infraジェネレーターを使用して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');
  }
}

これにより以下が設定されます：

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

セキュリティヘッダー

Section titled “セキュリティヘッダー”

CloudFrontディストリビューションは、すべてのレスポンスにStrict-Transport-Security、X-Content-Type-Options、X-Frame-Options: DENY、Referrer-Policy、およびContent-Security-Policyを設定するレスポンスヘッダーポリシーを適用します。

デフォルトのContent-Security-Policyが適用されます。これは、XSSやクリックジャッキングを軽減するためにスクリプトとフレーミングを制限しながら、ウェブサイトがデプロイ時にのみURLが判明するAWSサービスエンドポイント（API Gateway、Cognito、Bedrock AgentCoreなど）を呼び出せるようにHTTPSおよびWSS接続を許可します。ポリシーを調整する（例えば、connect-srcを特定のオリジンに絞り込む）には、生成されたstatic-website.ts（CDK）またはstatic-website.tf（Terraform）のcontent_security_policy値を編集してください。

runtime-config.jsonはCache-Control: no-cacheで提供されるため、ブラウザは再デプロイ後に古いキャッシュされたコピーを使用するのではなく、常に最新の設定を取得します。

WAF

Section titled “WAF”

CloudFrontディストリビューションは、デフォルトでAWS WAFv2 Web ACLによって保護されています。Web ACLは、AWSマネージドデフォルトルールセット（AWSManagedRulesCommonRuleSetおよびAWSManagedRulesKnownBadInputsRuleSet）を使用し、OWASP Top 10を含む一般的なWebエクスプロイトに対する保護を提供します。

オプトアウトするには、ウェブサイトを作成する際にenableWafをfalseに設定します：

packages/infra/src/stacks/application-stack.ts
import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, suppressRules } from '@my-scope/common-constructs';


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


    const website = new MyWebsite(this, 'MyWebsite', {
      enableWaf: false,
    });


    // Disabling WAF fails the checkov CKV_AWS_68 check ("CloudFront
    // Distribution should have WAF enabled"). Suppress it explicitly.
    suppressRules(
      website.cloudFrontDistribution,
      ['CKV_AWS_68'],
      'WAF is intentionally disabled for this distribution',
    );
  }
}

バケット暗号化

Section titled “バケット暗号化”

ウェブサイトバケット、CloudFrontディストリビューションログバケット、およびそれらのサーバーアクセスログを受信するCloudWatch Logsグループは、デフォルトで顧客管理のAWS KMSキーで暗号化されます。このキーは自動的に作成され、キーローテーションが有効になっています。

異なる暗号化設定を使用する場合は、ウェブサイトを作成する際にencryption、encryptionKey、およびenableKeyRotationプロパティを渡します：

packages/infra/src/stacks/application-stack.ts
import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { BucketEncryption } from 'aws-cdk-lib/aws-s3';
import { MyWebsite } from '@my-scope/common-constructs';


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


    new MyWebsite(this, 'MyWebsite', {
      encryption: BucketEncryption.S3_MANAGED,
    });
  }
}

自動的に作成されるキーの代わりに独自のKMSキーを使用するには、encryptionKeyを渡します：

new MyWebsite(this, 'MyWebsite', {
  encryptionKey: myKey,
});

enableKeyRotation（デフォルトtrue）は、自動的に作成されたキーにのみ適用されます。つまり、encryptionがBucketEncryption.KMS（デフォルト）で、encryptionKeyが提供されていない場合です：

new MyWebsite(this, 'MyWebsite', {
  enableKeyRotation: false,
});

カスタムドメインとTLS

Section titled “カスタムドメインとTLS”

デフォルトでは、ディストリビューションはデフォルトのCloudFrontドメイン名（*.cloudfront.net）とそのデフォルト証明書を使用します。これは最小TLSバージョン1.2の強制をサポートしていません。独自のドメインからウェブサイトを提供するには、ACM証明書（CloudFrontで使用するにはus-east-1に存在する必要があります）とドメイン名を提供します。その後、ビューアーに対して最小TLSバージョン1.2が強制されます：

ウェブサイトを作成する際にcertificateとdomainNamesプロパティを渡します：

packages/infra/src/stacks/application-stack.ts
import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { Certificate } from 'aws-cdk-lib/aws-certificatemanager';
import { MyWebsite } from '@my-scope/common-constructs';


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


    new MyWebsite(this, 'MyWebsite', {
      domainNames: ['www.example.com'],
      certificate: Certificate.fromCertificateArn(this, 'Cert',
        'arn:aws:acm:us-east-1:123456789012:certificate/...'),
    });
  }
}

また、CloudFrontディストリビューションを指すDNSレコード（例：Route 53）を作成する必要があります。

ランタイム設定

Section titled “ランタイム設定”

インフラストラクチャからの設定は、ランタイム設定を介してウェブサイトに提供されます。これにより、ウェブサイトはアプリケーションがデプロイされるまで不明なAPI URLなどの詳細にアクセスできます。

インフラストラクチャ

Section titled “インフラストラクチャ”

RuntimeConfig CDKコンストラクトを使用して、CDKインフラストラクチャで設定を追加および取得できます。@aws/nx-pluginジェネレーター（ts#apiやpy#apiなど）によって生成されたCDKコンストラクトは、自動的に適切な値をRuntimeConfigに追加します。

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

packages/infra/src/stacks/application-stack.ts
import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, MyApi } from '@my-scope/common-constructs';


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


    // Website can be declared at any point, since runtime config is resolved lazily
    new MyWebsite(this, 'MyWebsite');


    // Automatically adds values to the RuntimeConfig
    new MyApi(this, 'MyApi', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });
  }
}

ウェブサイトコード

Section titled “ウェブサイトコード”

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

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


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


  // Access values in the runtime config here
  const apiUrl = runtimeConfig.apis.MyApi;
};

ローカルランタイム設定

Section titled “ローカルランタイム設定”

ローカル開発サーバーを実行する場合、ローカルウェブサイトがバックエンドURL、ID設定などを知るために、publicディレクトリにruntime-config.jsonファイルが必要です。

ウェブサイトプロジェクトには、デプロイされたアプリケーションからruntime-config.jsonファイルをダウンロードするために使用できるload-runtime-configターゲットが設定されています：

Terminal window
pnpm nx load-runtime-config <my-website>

ローカル開発サーバー

Section titled “ローカル開発サーバー”

ローカル開発の標準的なコマンドはdevで、1つのコマンドでウェブサイト（および接続したAPIのローカルサーバー）を起動します：

Terminal window
pnpm nx dev <my-website>

serveターゲットは、デプロイされたAWSインフラストラクチャを指すのではなく、アプリケーションのどの部分をローカルで実行するかを制御する必要がある場合にも利用できます。複数のコンポーネントを持つプロジェクト全体でのローカル開発の広範な概要（devが複数のコンポーネントでどのように動作するかを含む）については、ローカル開発ガイドを参照してください。

Serveターゲット

Section titled “Serveターゲット”

serveターゲットは、ウェブサイトのローカル開発サーバーを起動します。このターゲットでは、ウェブサイトが対話するサポートインフラストラクチャをデプロイし、ローカルランタイム設定をロードしている必要があります。

このターゲットは以下のコマンドで実行できます：

Terminal window
pnpm nx serve <my-website>

このターゲットは、「実際の」デプロイされたAPIやその他のインフラストラクチャを指しながらウェブサイトの変更を行う場合に便利です。

Devターゲット

Section titled “Devターゲット”

devターゲットは、ウェブサイトのローカル開発サーバー（Vite MODEをlocal-devに設定）を起動し、Connectionジェネレーターを介してウェブサイトに接続したAPIのローカルサーバーも起動します。

このターゲットを介してローカルウェブサイトサーバーを実行すると、runtime-config.jsonは自動的にローカルで実行されているAPI URLを指すようにオーバーライドされます。

このターゲットは以下のコマンドで実行できます：

Terminal window
pnpm nx dev <my-website>

このターゲットは、ウェブサイトとAPIを横断して作業し、インフラストラクチャをデプロイせずに迅速に反復したい場合に便利です。

モック認証

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

devでログインと認証を有効にするには、インフラストラクチャをデプロイしてランタイム設定をロードしてください。

ビルド

Section titled “ビルド”

buildターゲットを使用してウェブサイトをビルドできます。これにより、bundle、compile、test、およびlintターゲットが実行され、ウェブサイトの型チェック、バンドル、テスト、およびリントが行われます。

Terminal window
pnpm nx build <my-website>

bundleターゲットは、Viteを使用してルートdist/packages/<my-website>/bundleディレクトリに本番バンドルを作成します。これは、ウェブサイトインフラストラクチャによって消費されるデプロイ可能なアーティファクトです。単独で実行できます：

Terminal window
pnpm nx bundle <my-website>

テスト

Section titled “テスト”

ウェブサイトのテストは、標準的なTypeScriptプロジェクトでのテストの記述とよく似ているため、詳細についてはTypeScriptプロジェクトガイドを参照してください。

React固有のテストについては、React Testing Libraryが既にインストールされており、テストを記述するために使用できます。使用方法の詳細については、React Testing Libraryドキュメントを参照してください。

testターゲットを使用してテストを実行できます：

Terminal window
pnpm nx test <my-website>

接続

Section titled “接続”

connectionジェネレーターを使用して、このプロジェクトをワークスペース内の他のプロジェクトと統合します。このプロジェクトに関連する接続は以下の通りです：

tRPC
React to tRPCReactウェブサイトからtRPC APIを呼び出す
FastAPI
React to FastAPIReactウェブサイトからPython FastAPIを呼び出す
Smithy
React to Smithy APIReactウェブサイトからSmithy APIを呼び出す
Strands AgentsPython
React to Python AgentReactウェブサイトからPython Agentを呼び出す
Strands AgentsTypeScript
React to TypeScript AgentReactウェブサイトからTypeScript Agentを呼び出す
CopilotKit
React to AG-UI AgentCopilotKit経由でReactウェブサイトからAG-UIプロトコルを公開するAgentを呼び出す
Amazon Bedrock AgentCore Gateway
React Website to AgentCore GatewayAgentCore Gateway経由でReactウェブサイトをエージェントに接続する