跳转到内容
@aws/nx-plugin
Blog

快速入门指南

本指南将引导您完成安装和使用 @aws/nx-plugin 在 AWS 上快速构建项目的基础知识。

前置条件

Section titled “前置条件”

开始前需要安装以下全局依赖项：

必需

Section titled “必需”
  • Git
  • Node >= 22（推荐使用NVM管理Node版本）
    • 验证命令：node --version
  • PNPM >= 10（也可使用Yarn >= 4、Bun >= 1或NPM >= 10）
    • 验证命令：pnpm --version、yarn --version、bun --version或npm --version
  • UV >= 0.5.29
    1. 安装Python 3.12：uv python install 3.12.0
    2. 验证安装：uv python list --only-installed
  • 配置到目标AWS账户的AWS凭证（应用将部署至该账户）

推荐

Section titled “推荐”

步骤 1：初始化新的 Nx 工作区

Section titled “步骤 1：初始化新的 Nx 工作区”

运行以下命令使用您选择的包管理器创建 Nx 工作区：

Terminal window
npx create-nx-workspace@~21.4.1 my-project --pm=pnpm --preset=@aws/nx-plugin --ci=skip

完成后进入项目目录：

Terminal window
cd my-project

步骤 2：使用生成器快速搭建项目

Section titled “步骤 2：使用生成器快速搭建项目”

本快速入门指南将添加 tRPC API、React 网站、Cognito 身份验证和 CDK 基础设施。根据您构建的项目类型，可以选择任意组合的生成器快速启动项目。查看左侧导航栏中的 指南 查看完整选项列表。

添加 tRPC API

Section titled “添加 tRPC API”
  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#trpc-api
  5. 填写必需参数
    • name: demo-api
    • auth: IAM
  6. 点击 Generate

这将在 packages/demo-api 目录下创建 API。

添加 React 网站

Section titled “添加 React 网站”
  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#react-website
  5. 填写必需参数
    • name: demo-website
  6. 点击 Generate

这将在 packages/demo-website 目录下生成新的 React 网站。

添加 Cognito 身份验证

Section titled “添加 Cognito 身份验证”
  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#react-website#auth
  5. 填写必需参数
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. 点击 Generate

这将设置必要的基础设施和 React 代码，为您的网站添加 Cognito 身份验证。

连接前端与后端

Section titled “连接前端与后端”
  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - api-connection
  5. 填写必需参数
    • sourceProject: @my-project/demo-website
    • targetProject: @my-project/demo-api
  6. 点击 Generate

这将配置必要的提供程序，确保您的网站可以调用 tRPC API。

添加 CDK 基础设施

Section titled “添加 CDK 基础设施”
  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#infra
  5. 填写必需参数
    • name: infra
  6. 点击 Generate

这将配置一个 CDK 应用，用于在 AWS 上部署基础设施。

步骤 3：本地运行网站和 API

Section titled “步骤 3：本地运行网站和 API”

使用以下命令启动网站及其连接 API 的本地开发服务器：

Terminal window
pnpm nx run demo-website:serve-local

您的网站将在 http://localhost:4200 可用。

对网站和 API 的更改将实时反映，因为本地网站和 API 服务器都会热重载。

步骤 4：定义云资源并部署到 AWS

Section titled “步骤 4：定义云资源并部署到 AWS”

打开 packages/infra/src/stacks/application-stack.ts 并添加以下代码：

import * as cdk from 'aws-cdk-lib';
import { DemoApi, DemoWebsite, UserIdentity } from ':my-project/common-constructs';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    const identity = new UserIdentity(this, 'identity');
    const api = new DemoApi(this, 'api', {
      integrations: DemoApi.defaultIntegrations(this).build(),
    });
    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


    new DemoWebsite(this, 'website');
  }
}

这就是部署全栈应用所需的所有 CDK 代码。

构建并部署基础设施

Section titled “构建并部署基础设施”

接下来运行以下命令构建项目：

Terminal window
pnpm nx run-many --target build --all

运行以下命令部署项目：

Terminal window
pnpm nx run infra:deploy my-project-sandbox/*

步骤 5：测试已部署云资源的网站

Section titled “步骤 5：测试已部署云资源的网站”

  1. 获取 runtime-config.json 文件：

    Terminal window
    pnpm nx run demo-website:load:runtime-config

  2. 启动本地网站服务器

    Terminal window
    pnpm nx run demo-website:serve

您的网站将在 http://localhost:4200 可用，并将指向已部署的 API 和身份验证资源。

恭喜！🎉 您已成功使用 @aws/nx-plugin 构建并部署了一个全栈应用！