跳转到内容
@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 Credentials配置到目标AWS账户（应用部署环境）

推荐

Section titled “推荐”

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

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

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

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

完成后进入项目目录：

Terminal window
cd my-project

步骤 2：使用生成器搭建项目框架

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

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

添加 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。

添加基础设施

Section titled “添加基础设施”

根据选择的 IaC 提供商添加基础设施项目：

  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

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

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

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

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

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

网站将运行在 http://localhost:4200。

对网站和 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:bootstrap

部署项目：

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 构建并部署了全栈应用！