前言

作为一个专注前端开发的切图仔，平时想开发个全栈系统是真的难！不会Java，不会Python，不会PHP。没法写接口，只能搞个静态 站，真的好烦恼！

想搭建个人博客 站，也只能是VuePress，GithubPage 这种的！数据不能永久储存！没办法，还是得搭建一个全栈的项目，我找到了类似halo这种的，面对复杂的部署上线，明明是按照官方的文章去部署的，却总是各种环境异常，不知名的BUG，我又一次放弃了。

万念俱灰时，AWS Amplify救世主一般出现在我的面前。几分钟，我就上手了AWS Amplify的周边工具。从前端到后端，到数据库，再到上线部署，原本复杂的流程，我几分钟就完全学会了！

借助官方的示例，没有敲一行后端代码，我就成功上线的自己的个人博客 站！这速度堪比中国基建。通过AWS Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过AWS Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过AWS Amplify，我没有敲一行代码，自动生成了后端接口，无论是本地测试还是线上使用，自动搞定。抛弃了复杂的部署流程，我仅仅是上传了我的前端代码，AWS Amplify就自动的帮我部署好了，同时还贴心的生成了访问的链接！

不能我一个人受惠，这么好的东西还是要分享给大家。

亚马逊云科技提供了100余种产品免费套餐。其中，计算资源Amazon EC2首年12个月免费，750小时/月；存储资源 Amazon S3 首年12个月免费，5GB标准存储容量。

https://aws.amazon.com/cn/free/c2=h_ql_pr_ft&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all&trk=e0213267-9c8c-4534-bf9b-ecb1c06e4ac6&sc_channel=el

AWS Amplify 简介

AWS Amplify 是一组专门构建的工具和功能，可以让WEB和APP 开发人员可以快速轻松的在AWS部署全栈应用程序。借助 Amplify，您可以在几分钟内配置 web 或移动应用程序后端并连接应用程序，可视化地构建 web 前端 UI，并在 AWS 控制台外轻松管理应用程序内容。无需云专业知识，就可更快发布和扩展。更多内容可以访问：https://aws.amazon.com/cn/amplify/

它主要包含以下套件。

• Amplify Studio 构建应用程序 可视化地构建一个全堆栈应用程序，包括前端 UI 和后端

• Amplify Libraries 连接应用程序 将应用程序连接到新的或现有的 AWS 服务（Cognito、S3等）。

• Amplify CLI 配置应用程序 为应用程序后端配置一个有指南的 CLI 工作流。

• Amplify Hosting 托管应用程序 通过 AWS 内容分发 络托管安全的、可靠的、快速的 web 应用程序或 站。

Amplify Studio 构建Vue全栈应用

Amplify Studio是一个可视化构建工具。目标是数小时内构建和交付完整的WEB和移动应用程序。

更多内容可以访问：https://aws.amazon.com/cn/amplify/studio/

话不多说，直接上手。打开studio控制台！

选择数据模型及开发语言

Amplify Studio提供了三种数据模型。我们这里选择To-do List数据模型，开发语言选择Vue。

• Blog

• To-do List

• Blank Data model

这里AWS默认定义了一个ToDo模型以及三个字段。我们在此基础上新增字段

• id 自增主键

• name String 任务名称

• description String 任务描述

• isCompleted int 是否完成(1完成，0未完成)

• isDeleted int 是否删除(1删除，0未删除)

本地构建以及测试

Amplify Studio本地构建测试步骤分为4步：

1. 使用vue/cli 创建新vue项目
2. 全局安装Amplify CLI，保证可以和后端程序通信。
3. vue项目安装Amplify并使用
4. 使用 Amplify DataStore 在本地测试 CRUD API

使用vue/cli 创建新vue项目

安装完成后，启动项目。

Amplify CLI 是一个在本地运行的命令行工具链，用于与您的应用后端进行通信。

安装

亲测：上面官方推荐的方式，在fq的 络下仍然安装不成功。

建议使用npm安装：npm i -g @aws-amplify/cli

从项目的根文件夹下 运行以下命令：

vue项目安装Amplify

配置使用Amplify

打开myapp项目，找到main,js，官方推荐加入下面几行代码。

请注意，上面的代码目前已经不适用。在实际实践过程中，配置使用之后，使用启动项目，控制台会出现warning

所以我们的代码需要修改成：

使用Amplify DataStore 在本地测试 CRUD API

然后我们在新增代办按钮，添加addToDo事件，并调用DataStore.save方法保存数据

引入DataStore和To模型。

在addToDo中调用DataStore .save()

这里isCompleted和isDeleted使用默认值。

添加数据，点击新增按钮。查看控制台输出的结果，调用接口成功！

在mounted生命周期调用。

在新增之后调用。

进入到发布阶段，此时需要你有AWS账 。如果已经有账 ，请选择

账 注册流程

根用户与邮箱

填写电子邮箱以及用户名，然后验证电子邮件地址！

根用户密码

银行卡

银行卡 最好是国内的银行卡，我用的是江苏银行的信用卡。可能有的银行不支持。

是否付费

这里选择免费就可以啦！

此时点击

，等待系统自动跳转！

前端

打包

在muyapp目录下执行，build命令，会在myapp目录下，自动生成dist文件，这里存放的就是我们的打包后的代码。

系统跳转到上传文件页面，我们需要填写一个环境的名称，例如dev、 test、 prod等等.然后将dist文件夹拖拽上传。

测试