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

快速入门指南

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

先决条件

Section titled “先决条件”

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

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

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

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

Terminal window
npx create-nx-workspace@~21.0.3 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#cloudscape-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#cloudscape-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：定义云资源并部署到 AWS

Section titled “步骤 3：定义云资源并部署到 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

步骤 4：本地运行前端

Section titled “步骤 4：本地运行前端”

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

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

  2. 启动本地网站服务器

    Terminal window
    pnpm nx run @demo/demo-website:serve

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

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