ローカルで検証する時に自動で環境変数が入るように

README.md

@@ -126,6 +126,14 @@ npm run cdk:deploy -- -c openAiApiKeySecretArn=<Secret ARN>
 
 開発者用にローカル環境を構築する手順を説明します。なお、ローカル環境を構築する場合も、前述した AWS へのデプロイは完了している必要があります。
 
+### Unix 系コマンドが使えるユーザー (Linux, MacOS 等)
+
+```bash
+npm run web:devw
+```
+
+### その他のユーザー (Windows 等)
+
 デプロイ完了時に表示される Outputs から API の Endpoint (Output key = APIApiEndpoint...)、Cognito User Pool ID (Output key = AuthUserPoolId...)、Cognito User Pool Client ID (Output Key = AuthUserPoolClientId...) 、Cognito Identity Pool ID (Output Key = AuthIdPoolId...)、レスポンスストリーミングの Lambda 関数の ARN (Output Key = APIPredictStreamFunctionArn...) を取得します。
 デプロイ時の出力が消えている場合、[CloudFormation](https://console.aws.amazon.com/cloudformation/home) の GenerativeAiUseCasesStack をクリックして Outputs タブから確認できます。
 それらの値を以下のように環境変数に設定してください。

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "run-s root:lint web:lint cdk:lint",
     "root:lint": "npx prettier --write .",
+    "web:devw": "source setup-env.sh && npm -w packages/web run dev",
     "web:dev": "npm -w packages/web run dev",
     "web:build": "npm -w packages/web run build",
     "web:lint": "npm -w packages/web run lint",

packages/cdk/lib/construct/api.ts

@@ -1,4 +1,4 @@
-import { Duration, CfnOutput } from 'aws-cdk-lib';
+import { Duration } from 'aws-cdk-lib';
 import {
   AuthorizationType,
   CognitoUserPoolsAuthorizer,
@@ -277,9 +277,5 @@ export class Api extends Construct {
 
     this.api = api;
     this.predictStreamFunction = predictStreamFunction;
-
-    new CfnOutput(this, 'PredictStreamFunctionArn', {
-      value: predictStreamFunction.functionArn,
-    });
   }
 }

packages/cdk/lib/construct/auth.ts

@@ -1,4 +1,4 @@
-import { CfnOutput, Duration } from 'aws-cdk-lib';
+import { Duration } from 'aws-cdk-lib';
 import { UserPool, UserPoolClient } from 'aws-cdk-lib/aws-cognito';
 import {
   IdentityPool,
@@ -46,9 +46,5 @@ export class Auth extends Construct {
     this.client = client;
     this.userPool = userPool;
     this.idPool = idPool;
-
-    new CfnOutput(this, 'UserPoolId', { value: userPool.userPoolId });
-    new CfnOutput(this, 'UserPoolClientId', { value: client.userPoolClientId });
-    new CfnOutput(this, 'IdPoolId', { value: idPool.identityPoolId });
   }
 }

packages/cdk/lib/generative-ai-use-cases-stack.ts

@@ -24,8 +24,28 @@ export class GenerativeAiUseCasesStack extends Stack {
       predictStreamFunctionArn: api.predictStreamFunction.functionArn,
     });
 
+    new CfnOutput(this, 'Region', {
+      value: this.region,
+    });
+
     new CfnOutput(this, 'WebUrl', {
       value: `https://${web.distribution.domainName}`,
     });
+
+    new CfnOutput(this, 'ApiEndpoint', {
+      value: api.api.url,
+    });
+
+    new CfnOutput(this, 'UserPoolId', { value: auth.userPool.userPoolId });
+
+    new CfnOutput(this, 'UserPoolClientId', {
+      value: auth.client.userPoolClientId,
+    });
+
+    new CfnOutput(this, 'IdPoolId', { value: auth.idPool.identityPoolId });
+
+    new CfnOutput(this, 'PredictStreamFunctionArn', {
+      value: api.predictStreamFunction.functionArn,
+    });
   }
 }

setup-env.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+set -eu
+
+STACK_NAME='GenerativeAiUseCasesStack'
+
+function stack_output {
+    aws cloudformation describe-stacks \
+        --stack-name $STACK_NAME \
+        --query "Stacks[0].Outputs[?OutputKey=='$1'].OutputValue" \
+        --output text
+}
+
+echo 'Setup environment variables...'
+
+export VITE_APP_API_ENDPOINT=`stack_output 'ApiEndpoint'`
+export VITE_APP_REGION=`stack_output 'Region'`
+export VITE_APP_USER_POOL_ID=`stack_output 'UserPoolId'`
+export VITE_APP_USER_POOL_CLIENT_ID=`stack_output 'UserPoolClientId'`
+export VITE_APP_IDENTITY_POOL_ID=`stack_output 'IdPoolId'`
+export VITE_APP_PREDICT_STREAM_FUNCTION_ARN=`stack_output PredictStreamFunctionArn`