跳转到内容
@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#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 --all

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