Skip to content
@aws/nx-plugin
Blog

CloudScapeウェブサイト

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

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

使用方法

CloudScape Websiteの生成

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

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

    オプション

    パラメータ 型 デフォルト 説明
    name 必須 string - The name of the application.
    directory string packages The directory of the new application.

    ジェネレータの出力

    ジェネレータは<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コンストラクト

    CloudScape Websiteの実装

    ReactドキュメントはReact開発の基礎を学ぶのに適しています。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');
    

        // 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.httpApis.MyApi;
    };

    ローカルランタイム設定

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

    load:runtime-configターゲットを使用してデプロイ済みアプリケーションから設定ファイルを取得できます：

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

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

    ローカル開発サーバー

    ローカル開発サーバーを起動する前に、インフラストラクチャのデプロイとローカルランタイム設定の読み込みが完了していることを確認してください。

    serveターゲットを実行します：

    Terminal window
    pnpm nx run <my-website>:serve

    ビルド

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

    Terminal window
    pnpm nx run <my-website>:build

    テスト

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

    React Testing Libraryがインストール済みで、テスト作成に使用できます。詳細はReact Testing Libraryドキュメントを参照してください。

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

    Terminal window
    pnpm nx run <my-website>:test

    ウェブサイトのデプロイ

    TypeScript Infrastructure Generatorを使用して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');
      }
    }