将 Flutter 项目部署到 AWS Amplify

包括预发布环境和生产环境

目录

当你创建了使用 AWS Amplify 后端的 Flutter 项目，下一步就是部署它。
以下是将 Flutter 项目部署到 AWS Amplify 托管的方法。

AWS Amplify 是亚马逊用于开发和托管全栈应用程序的服务。
有些人认为它只适合原型设计，但我们不在此讨论其适用性，而是来回顾如何实现这种托管。

Flutter 到 Amplify 推土机

Flutter 全栈应用结构

Flutter 全栈应用由两个主要组件组成：

  • Flutter 前端
  • 某些后端

前端可以编译为 Web 应用、Android 应用、iOS 应用，这些都需要不同的部署方式。
我们在此只回顾 Web 应用的部署方式。

当 Flutter 全栈项目使用 AWS Amplify 时，其后端是一组 JavaScript Lambda 函数，更准确地说是 TypeScript。
选项不多，包括 GraphQL 函数、使用 DynamoDB 的 REST、一些 AWS S3 访问等。不过，快速且容易。

配置 AWS Amplify 部署

好的，让我们创建 AWS Amplify 部署。

  1. 访问 https://console.aws.amazon.com/amplify/apps，选择你最喜欢的区域。
  2. 点击 创建新应用 按钮。
  3. 选择你的 Git 提供商。如果你在 2024 年 8 月之前创建了 AWS 账户，那么你很幸运，因为之后 AWS 不再为新客户提供 AWS CodeCommit 服务。但我是，所以在本次测试中使用 AWS CodeCommit。点击 下一步 按钮。
  4. 选择你的 Flutter 应用的仓库和分支以进行部署。点击 下一步 按钮。
  5. 现在我们到了 应用设置 页面，向导检测到了 Amplify Gen2 应用，并错误地配置了前端构建。我们稍后会修复它。点击 下一步。

检测到 Amplify Gen2 应用

  1. 查看摘要，点击 保存并部署。
  2. 你将看到你的新部署正在进行中。

Amplify 正在部署

  1. 然后你将看到它奇迹般地部署完成。

Amplify 已部署

当你点击这个 域名 链接时，你会看到一个空白的浏览器屏幕。这是因为目前还没有构建你的 Flutter 应用。
不要担心，我们只需要做一件事来修复它。

  1. 在左侧的面板中点击 托管 / 构建设置，你将看到类似以下内容：

Amplify 构建设置

  1. 点击编辑并粘贴前端构建配置，保留工件和缓存部分。
frontend:
  phases:
    preBuild:
      commands:
        - echo "安装 Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "安装依赖"
        - flutter pub get
        - echo "生成后端连接"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "构建不带 WASM 支持的 Flutter Web 应用"
        - flutter build web

请参阅下面的完整编译和部署脚本示例。

  1. 点击 保存，进入你的部署页面，点击 重新部署此版本。或者提交并推送一些更改到你的分支。

  2. 等待重建和重新部署完成，然后导航到你的应用。

预发布和生产环境

你不需要为生产、预发布和其他环境分别设置特殊配置或额外的环境变量。
Amplify 部署已经提供了环境变量 $AWS_BRANCH 和 $AWS_APP_ID。

因此，当部署不同分支时，我们的脚本会将后端部署到不同的阶段，并将前端连接到该阶段。
你只需要创建一个新的部署并选择不同的分支。这就是全部。

请参阅下面的详细说明。

当你编译后端时，会看到以下内容：

npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

它会生成文件 amplify_outputs.json，这是 React 前端所需的：

[INFO]: 文件已写入：amplify_outputs.json

但 Flutter 前端需要 amplify_outputs.dart。

原始文档 对 Flutter 前端没有太多说明，但有一个重要的点：

通过运行以下命令为分支环境生成配置：

npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format dart --out-dir lib

此脚本会为 Flutter 前端生成 Dart 后端连接代码（文件 lib/amplify_outputs.dart）。 由于你指定了参数 --app-id <your-amplify-app-id> 和 --branch <your-git-branch-name>，每个部署的分支的后端将不同。

此文件不应包含在 Git 仓库中。请检查你的项目中的 .gitignore 文件是否包含以下内容：

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

如果你将 lib/amplify_outputs.dart 推送到 Git 并没有运行 npx ampx generate outputs...，那么你部署的前端将尝试连接到开发沙箱，而不是正确的预发布或生产后端。

在 Amplify 托管上构建配置的真正脚本应该是：

npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID

Amplify.yaml 示例

在 Reddit 上某处找到的，我们在这里保留它。

一个完整的 Amplify.yaml 示例，用于构建和部署 Flutter Web 应用到 AWS Amplify 托管：

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - echo "安装 Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "安装依赖"
        - flutter pub get
        - echo "生成后端连接"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "构建不带 WASM 支持的 Flutter Web 应用"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

有用的链接