使用SST v3部署Flutter Web应用到AWS CloudFront的完整指南

概述

本文将详细介绍如何利用SST（Serverless Stack Toolkit）v3框架，将Flutter开发的Web应用部署到AWS CloudFront服务上。SST是一个强大的基础设施即代码（IaC）工具，特别适合无服务器架构的应用部署。

技术背景

SST v3简介

SST v3是一个现代化的基础设施即代码框架，专为无服务器应用设计。它允许开发者使用TypeScript定义云资源，并提供了热重载等开发友好功能。

Flutter Web特点

Flutter Web允许开发者使用Dart语言构建跨平台的Web应用，具有高性能和一致性的UI体验。构建后的产物是标准的静态文件，非常适合部署到CDN服务。

环境准备

在开始部署前，请确保已安装以下工具：

1. Flutter SDK：用于构建Web应用
2. Node.js：运行SST CLI的基础环境
3. AWS CLI：管理AWS凭证
4. SST CLI：核心部署工具

详细部署步骤

第一步：创建Flutter项目

使用Flutter CLI创建一个新项目：

flutter create aws_flutter_web

这个命令会生成一个标准的Flutter项目结构，包含一个简单的计数器示例应用。

第二步：初始化SST项目

在项目根目录下执行：

sst init

选择AWS作为云服务提供商，这将生成基本的SST项目结构。

第三步：配置SST部署

编辑sst.config.ts文件，这是SST的核心配置文件。以下是关键配置说明：

export default $config({
  app(input) {
    return {
      name: "aws-flutter-web", // 应用名称
      removal: input?.stage === "production" ? "retain" : "remove", // 生产环境保留资源
      home: "aws", // 云服务提供商
    };
  },
  async run() {
    new sst.aws.StaticSite("MySite", {
      build: {
        command: "flutter build web", // Flutter构建命令
        output: "build/web", // 构建输出目录
      },
    });
  },
});

StaticSite构造器会自动处理以下AWS资源：

• S3存储桶：存放静态文件
• CloudFront分发：全球CDN加速
• Route53记录（可选）：自定义域名

第四步：构建与部署

执行部署命令：

sst deploy --stage production

部署过程会：

1. 执行flutter build web构建Web应用
2. 将构建产物上传到S3
3. 配置CloudFront分发
4. 输出访问URL

第五步：测试与验证

部署完成后，控制台会输出CloudFront的访问URL。打开浏览器访问该URL，应该能看到Flutter的计数器示例应用。

高级配置选项

自定义域名

如需使用自定义域名，可以在StaticSite配置中添加：

domain: "yourdomain.com",

环境变量管理

Flutter应用可以通过--dart-define参数注入环境变量：

build: {
  command: "flutter build web --dart-define=API_URL=https://api.example.com",
}

缓存策略优化

默认情况下，SST会配置合理的缓存策略。如需自定义：

cdk: {
  distribution: {
    defaultBehavior: {
      cachePolicy: new cloudFront.CachePolicy(this, "CachePolicy", {
        defaultTtl: Duration.hours(1),
      }),
    },
  },
},

资源清理

当不再需要部署的应用时，执行：

sst remove --stage production

这会清理所有创建的AWS资源，避免产生不必要的费用。

常见问题解决

1. 构建失败：确保Flutter环境配置正确，可先本地执行flutter build web测试
2. 权限问题：检查AWS凭证是否有足够权限
3. 部署缓慢：Flutter Web构建过程可能较耗时，特别是首次构建

最佳实践建议

1. 使用CI/CD管道自动化部署流程
2. 为生产环境配置自定义域名和HTTPS
3. 监控CloudFront的访问日志和性能指标
4. 考虑使用SST的环境变量管理不同阶段的配置

通过本文的指导，您应该能够顺利地将Flutter Web应用部署到AWS全球基础设施上，享受CloudFront带来的高性能内容分发服务。