如何不借助AWS Amplify，通过AWS SAM在AWS Lambda/API Gateway部署HTML/CSS/JS站点？

可行性说明 #

AWS SAM确实没有直接支持Amplify的前端托管、构建流水线这类专属功能，但完全可以用SAM配合其他AWS服务，实现Amplify教程里的Lambda、API Gateway、S3、DynamoDB、Cognito全栈无服务器架构。SAM的核心优势就是定义和部署后端无服务器资源，前端部分可以通过S3静态网站托管+CloudFront来实现，和SAM部署的后端无缝对接。

具体实现方向 #

• 后端资源定义：SAM原生支持所有你需要的后端服务：

  • 用AWS::Serverless::Function定义Lambda函数（对应教程里的业务逻辑）
  • 用AWS::Serverless::Api或AWS::ApiGatewayV2::Api创建API Gateway，配置和Lambda的集成
  • 用AWS::DynamoDB::Table定义数据存储表
  • 用AWS::Cognito::UserPool和AWS::Cognito::UserPoolClient配置用户认证

• 前端部署适配：
  如果需要前端的构建和托管，可以单独用S3静态网站桶（通过SAM的AWS::S3::Bucket定义），再配合CloudFront做CDN和HTTPS。前端构建后的文件可以通过AWS CLI、GitHub Actions或者SAM自定义资源自动上传到S3，不需要依赖Amplify的托管服务。

• API Gateway上JavaScript（Lambda）运行问题排查：

  • 确认Lambda函数的Node.js运行时版本和你的代码兼容，比如代码用了ES6+语法，要选对应支持的Node.js版本
  • 检查API Gateway的集成模式：如果用的是Lambda代理集成，Lambda必须返回符合格式的响应：

    exports.handler = async (event) => {
      return {
        statusCode: 200,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: "Success" })
      };
    };
    

  • 查看Lambda的CloudWatch日志，排查代码执行时的报错（比如未捕获的异常、权限问题）
  • 确认API Gateway已经完成部署，修改后的Lambda关联需要重新部署API才能生效
  • 检查Lambda的IAM角色是否有足够权限访问DynamoDB、Cognito等依赖服务

简单SAM模板示例 #

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

Resources:
  # Cognito用户池
  MyUserPool:
    Type: AWS::Cognito::UserPool
    Properties:
      UserPoolName: MyWebAppUserPool
      UsernameAttributes: [email]

  # Lambda函数
  MyApiFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: src/
      Handler: index.handler
      Runtime: nodejs18.x
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref MyDynamoDBTable
      Events:
        MyApi:
          Type: Api
          Properties:
            Path: /items
            Method: get

  # DynamoDB表
  MyDynamoDBTable:
    Type: AWS::DynamoDB::Table
    Properties:
      TableName: MyItemsTable
      AttributeDefinitions:
        - AttributeName: id
          AttributeType: S
      KeySchema:
        - AttributeName: id
          KeyType: HASH
      ProvisionedThroughput:
        ReadCapacityUnits: 1
        WriteCapacityUnits: 1

内容的提问来源于stack exchange，提问作者Erick Lima