使用 Amazon Amplify 可视化构建部署 Vue 应用程序

{"value":"### **前言**\n作为一个专注前端开发的切图仔，平时想开发个全栈系统是真的难！不会 Java，不会 Python，不会 PHP。没法写接口，只能搞个静态网站，真的好烦恼！\n想搭建个人博客网站，也只能是 VuePress，GithubPage 这种的！数据不能永久储存！没办法，还是得搭建一个全栈的项目，我找到了类似halo 这种的，面对复杂的部署上线，明明是按照官方的文章去部署的，却总是各种环境异常，不知名的 BUG，我又一次放弃了。\n万念俱灰时，Amazon Amplify救世主一般出现在我的面前。几分钟，我就上手了 Amazon Amplify 的周边工具。从前端到后端，到数据库，再到上线部署，原本复杂的流程，我几分钟就完全学会了！\n借助官方的示例，没有敲一行后端代码，我就成功上线的自己的个人博客网站！这速度堪比中国基建。通过 Amazon Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过 Amazon Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过 Amazon Amplify，我没有敲一行代码，自动生成了后端接口，无论是本地测试还是线上使用，自动搞定。抛弃了复杂的部署流程，我仅仅是上传了我的前端代码，Amazon Amplify 就自动的帮我部署好了，同时还贴心的生成了访问的链接！\n不能我一个人受惠，这么好的东西还是要分享给大家。\n亚马逊云科技提供了100余种产品免费套餐。其中，计算资源Amazon EC2首年12个月免费，750小时/月；存储资源 Amazon S3 首年12个月免费，5GB标准存储容量。\n[https://aws.amazon.com/cn/free/?nc2=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](https://aws.amazon.com/cn/free/?nc2=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)\n本文就 Amazon Amplify 的工具进行详细的操作，通过实现一个 ToDoList 的 Vue 全栈项目，让大家也能快速上手。\n### **Amazon Amplify 简介**\nAmazon Amplify 是**一组**专门构建的工具和功能，可以让 WEB 和 APP 开发人员可以快速轻松的在 Amazon 部署全栈应用程序。借助 Amplify，您可以在几分钟内配置 web 或移动应用程序后端并连接应用程序，可视化地构建 web 前端 UI，并在 Amazon 控制台外轻松管理应用程序内容。无需云专业知识，就可更快发布和扩展。更多内容可以访问：[https://aws.amazon.com/cn/amplify/](https://aws.amazon.com/cn/amplify/)\n它主要包含以下套件。\n- Amplify Studio 构建应用程序 可视化地构建一个全堆栈应用程序，包括前端 UI 和后端\n- Amplify Libraries 连接应用程序 将应用程序连接到新的或现有的 Amazon 服务（Cognito、S3等）。\n- Amplify CLI 配置应用程序 为应用程序后端配置一个有指南的 CLI 工作流。\n- Amplify Hosting 托管应用程序 通过 Amazon 内容分发网络托管安全的、可靠的、快速的 web 应用程序或网站。\n### **Amplify Studio 构建 Vue 全栈应用**\n在本文，我们主要使用 Amplify Studio 来构建一个 Vue 全栈应用程序。\nAmplify Studio 是一个可视化构建工具。目标是数小时内构建和交付完整的WEB和移动应用程序。\n更多内容可以访问：[https://aws.amazon.com/cn/amplify/studio/](https://aws.amazon.com/cn/amplify/studio/)\n话不多说，直接上手。打开 studio 控制台！\n\n\n\n#### **三步走**\n通过 Quick start 我们可以看到通过 Amplify Studio 构建应用程序主要包含三步。\n1. 构建数据模型\n2. 构建并测试应用程序\n3. 发布到 Amazon\n\n\n\n### **选择数据模型及开发语言**\nAmplify Studio 提供了三种数据模型。我们这里选择 To-do List 数据模型，开发语言选择 Vue。\n- Blog\n- To-do List\n- Blank Data model\n\n\n\n### **定义数据模型**\nAmplify Studio 定义数据模型，主要有三步\n1. 创建模型\n2. 定义模型字段\n3. 定义不同模型之间的关系\n如果你稍微了解 MySql，PostgreSql 等数据库的话，这三步映射到数据库中\n1. 创建数据表\n2. 定义数据库字段\n3. 定义表字段之间的关系。1对1 ，1对N ,N对N。\n\n\n\n这里 Amazon 默认定义了一个 ToDo 模型以及三个字段。我们在此基础上新增字段\n- id 自增主键\n- name String 任务名称\n- description String 任务描述\n- isCompleted int 是否完成（1完成，0未完成）\n- isDeleted int 是否删除（1删除，0未删除）\n\n\n\n定义好实体之后，我们就开始进入构建及测试阶段。\n\n\n\n### **本地构建以及测试**\nAmplify Studio 本地构建测试步骤分为4步：\n1. 使用 vue/cli 创建新 vue 项目\n2. 全局安装 Amplify CLI，保证可以和后端程序通信。\n3. vue 项目安装 Amplify 并使用\n4. 使用 Amplify DataStore 在本地测试 CRUD API\n#### **使用 vue/cli 创建新 vue 项目**\n\n\n\n##### **全局安装脚手架**\n使用 vue/cli 脚手架的前提是：需要全局安装。\n这里我推荐使用 yarn 来进行安装。\n\nCoffeeScript\n```\nnpm install -g @vue/cli\nyarn global add @vue/cli\n```\n##### **创建项目**\n打开命令行工具，执行下面命令。myapp 是项目名称，也是创建的文件夹名称。\nNginx\n```\nvue create myapp\n```\n如果 vue 脚手架是最新版的。需要选择创建项目的 Vue 版本。这里我们选择默认的 Vue2版本。\n\n\n\n安装完成后，启动项目。\nDockerfile\n```\ncd myapp\n\nyarn serve/npm run serve\n```\n\n\n\n#### **使用Amplify CLI**\n\n\n\nAmplify CLI 是一个在本地运行的命令行工具链，用于与您的应用后端进行通信。\n\n##### **安装**\nCSS\n```\ncurl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd\n```\n\n亲测：上面官方推荐的方式，在fq的网络下仍然安装不成功。\n建议使用 npm 安装：npm i -g @aws-amplify/cli\n从项目的根文件夹下 运行以下命令 myapp：\nApache\n```\namplify pull --sandboxId 25b8706b-6835-4162-9f72-9ad551b0318e\n```\n\n\n命令执行结束之后，Amplify CLI 会在 myapp 项目下\n- 新增 amplify 文件夹，用来连接后端\n- 新增 src\\models\\schema.js 文件，该文件定义 ToDo 模型\n- src\\models\\index.js 引入 Todo 模型。\n- package.json 新增脚本命令\n\n#### **使用 Amplify 库**\n\n\n\n##### **vue 项目安装 Amplify**\nDockerfile\n```\nyarn add aws-amplify\n```\n##### **配置使用 Amplify**\n打开 myapp 项目，找到 main,js，官方推荐加入下面几行代码。\nCoffeeScript\n```\nimport Amplify from 'aws-amplify'\nimport awsconfig from './aws-exports'\n\nAmplify.configure(awsconfig)\n```\n请注意，上面的代码目前已经不适用。在实际实践过程中，配置使用之后，使用`yarn serve`启动项目，控制台会出现 warning\n\n\n\n通过查看 Amazon-amplify 源码发现，在 Amazon-amplify 是通过命名导出的方式导出 Amplify。\n\n\n\n所以我们的代码需要修改成：\nJavaScript\n```\nimport {Amplify} from 'aws-amplify'\nimport awsconfig from './aws-exports'\n\nAmplify.configure(awsconfig)\n```\n#### **使用 Amplify DataStore 在本地测试 CRUD API**\n\n\n\n##### **测试新增接口**\n###### **新增 ToDo 页面**\n因为本文主要是讲解如何使用 Amazon 来构架部署全栈应用，所以编写代码，我们简单带过！\n在 components 增加 src\\components\\ToDo.vue 文件，APP.vue 中引入并使用 ```import ToDo from './components/ToDo.vue'```。\nJavaScript\n```\nnewTodo: {\n name: \"\",\n description: \"\",\n isCompleted: 0,\n isDelete: 0,\n},\n```\nHTML\n```\n<div class=\"d-flex mb-5\">\n <input\n v-model=\"newTodo.name\"\n type=\"text\"\n placeholder=\"请填写代办名称\"\n class=\"form-control form-input me-3\"\n />\n <input\n v-model=\"newTodo.description\"\n type=\"text\"\n placeholder=\"请填写代办明细\"\n class=\"form-control form-input me-3\"\n />\n <button type=\"submit\" class=\"submit-btn\" @click=\"addTodo()\">\n 新增代办\n </button>\n </div>\n```\n\n\n###### **DataStore .save()**\n\n\n然后我们在新增代办按钮，添加 addToDo 事件，并调用 DataStore.save 方法保存数据\n引入 DataStore 和 To 模型。\n\nJavaScript\n```\nimport { DataStore } from \"@aws-amplify/datastore\";\nimport { Todo } from \"../models\";\n```\n在 addToDo 中调用 DataStore .save()\n这里 isCompleted 和 isDeleted 使用默认值。\nJavaScript\n```\nasync addTodo() {\n console.log(\"新增数据\");\n let res = await DataStore.save(\n new Todo({\n name: this.newTodo.name,\n description: this.newTodo.description,\n isCompleted: 0,\n isDeleted: 0,\n })\n );\n console.log(res)\n },\n```\n添加数据，点击新增按钮。查看控制台输出的结果，调用接口成功！\n\n\n\n#### **测试查询列表接口**\n\n\n\nJavaScript\n```\nasync queryTodo() {\n const models = await DataStore.query(Todo);\n this.todos=models\n console.log(models);\n},\n```\n在 mounted 生命周期调用。\n\nJavaScript\n```\n mounted() {\n this.queryTodo();\n },\n```\n在新增之后调用。\nJavaScipt\n```\nasync addTodo() {\n console.log(\"新增数据\");\n let res = await DataStore.save(\n new Todo({\n name: this.newTodo.name,\n description: this.newTodo.description,\n isCompleted: 0,\n isDeleted: 0,\n })\n );\n console.log(res)\n this.queryTodo();\n},\n```\n\n\n#### **总结**\n定义好模型之后，Amazon Amplify 会自动根据模型结构，生成增删改查代码。因为篇幅的问题，这里只测试了两个接口。\n\n### **发布到 Amazon**\n\n\n\n进入到发布阶段，此时需要你有 Amazon 账号。如果已经有账号，请选择\n\n\n\n这里默认新用户，还没有注册账号。\n点击\n\n\n\n#### **账号注册流程**\n##### **根用户与邮箱**\n填写电子邮箱以及用户名，然后验证电子邮件地址！\n\n\n\n##### **验证码**\n填写验证码进入下一步！\n\n\n\n##### **根用户密码**\n\n\n\n##### **联系人信息**\n\n\n\n##### **银行卡号**\n银行卡号最好是国内的银行卡，我用的是江苏银行的信用卡。可能有的银行不支持。\n\n\n\n##### **确认身份**\n\n\n\n##### **是否付费**\n这里选择免费就可以啦！\n\n\n\n#### **正式发布**\n注册成功之后，会跳到第二步，\n\n\n\n此时点击\n\n\n\n。进入发布流程。\n##### **填写信息**\n填写 APP 名称，选择部署区域，也就是服务器所在的位置。填写完成，点击\n\n\n\n，等待系统自动跳转！\n\n\n\n##### **后端自动部署**\n后端代码 Amazon Amplify 会自动部署，不需要人为干预。\n\n\n\n##### **前端**\n###### **打包**\n在 muyapp 目录下执行，build 命令，会在 myapp 目录下，自动生成 dist 文件，这里存放的就是我们的打包后的代码。\nNginx\n```\nyarn build\n```\n\n\n###### **上传代码**\nAmazon Amplify 默认打开的是后台窗口，点击 Hosting environments 切换到前台部署页面。这里我们并没有用到仓库，我们直接选择最后一个。\n\n\n\n系统跳转到上传文件页面，我们需要填写一个环境的名称，例如 dev、 test、 prod 等等.然后将 dist 文件夹拖拽上传。\n\n\n\n点击 save and deploy，Amazon Amplify 开始部署前端代码。部署完成之后会生成一个网址，点击访问。\n网站访问正常！\n\n\n\n###### **测试**\n\n\n\n### **总结**\nAmazon Amplify 是 Amplify Studio、Amplify 库、Amplify CLI、Amplify 托管工具合集。可以可视化的构建和部署 web 和 app 应用程序。通过定义模型，Amazon Amplify 会自动生成对应的后端代码，包括增删改查。本地通过 Amplify CLI 连接后台，可以方便访问接口。仅仅通过拖拽上传打包后的前台文件，就可以快速部署前台项目，而后台项目 Amazon Amplify 会自动部署，无需人工干预！\n作为一个程序员，真的推荐使用亚马逊云。亚马逊云科技专为开发者们打造了多种学习平台：\n1. 入门资源中心：从0到1 轻松上手云服务，内容涵盖：成本管理，上手训练，开发资源。[https://aws.amazon.com/cn/getting-started/?nc1=h_ls&trk=32540c74-46f0-46dc-940d-621a1efeedd0&sc_channel=el](https://aws.amazon.com/cn/getting-started/?nc1=h_ls&trk=32540c74-46f0-46dc-940d-621a1efeedd0&sc_channel=el)\n2. 架构中心：亚马逊云科技架构中心提供了云平台参考架构图表、经过审查的架构解决方案、Well-Architected 最佳实践、模式、图标等。[https://aws.amazon.com/cn/architecture/?intClick=dev-center-2021_main&trk=3fa608de-d954-4355-a20a-324daa58bbeb&sc_channel=el](https://aws.amazon.com/cn/architecture/?intClick=dev-center-2021_main&trk=3fa608de-d954-4355-a20a-324daa58bbeb&sc_channel=el)\n3. 构建者库：了解亚马逊云科技如何构建和运营软件。[https://aws.amazon.com/cn/builders-library/?cards-body.sort-by=item.additionalFields.sortDate&cards-body.sort-order=desc&awsf.filter-content-category=*all&awsf.filter-content-type=*all&awsf.filter-content-level=*all&trk=835e6894-d909-4691-aee1-3831428c04bd&sc_channel=el](https://aws.amazon.com/cn/builders-library/?cards-body.sort-by=item.additionalFields.sortDate&cards-body.sort-order=desc&awsf.filter-content-category=*all&awsf.filter-content-type=*all&awsf.filter-content-level=*all&trk=835e6894-d909-4691-aee1-3831428c04bd&sc_channel=el)\n4. 用于在亚马逊云科技平台上开发和管理应用程序的工具包：[https://aws.amazon.com/cn/tools/?intClick=dev-center-2021_main&trk=972c69e1-55ec-43af-a503-d458708bb645&sc_channel=el](https://aws.amazon.com/cn/tools/?intClick=dev-center-2021_main&trk=972c69e1-55ec-43af-a503-d458708bb645&sc_channel=el)\n\n\n【专属福利】\n 福利一：100余种产品免费套餐。其中，计算资源 Amazon EC2首年12个月免费，750小时/月；存储资源 Amazon S3 首年12个月免费，5GB标准存储容量。\n[https://aws.amazon.com/cn/free/?nc2=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](https://aws.amazon.com/cn/free/?nc2=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)\n 福利二：最新优惠大礼包，200$数据与分析抵扣券，200$机器学习抵扣券，200$微服务与应用开发抵扣券。[https://www.amazonaws.cn/campaign/?sc_channel=el&sc_campaign=credit-acts-ldr&sc_country=cn&sc_geo=chna&sc_category=mult&sc_outcome=field&trkCampaign=request-credit-glb-ldr&trk=f45email&trk=02faebcb-3f61-4bcb-b68e-c63f3ae33c99&sc_channel=el](https://www.amazonaws.cn/campaign/?sc_channel=el&sc_campaign=credit-acts-ldr&sc_country=cn&sc_geo=chna&sc_category=mult&sc_outcome=field&trkCampaign=request-credit-glb-ldr&trk=f45email&trk=02faebcb-3f61-4bcb-b68e-c63f3ae33c99&sc_channel=el)\n福利三：解决方案 CloudFormation 一键部署模版库\n[https://aws.amazon.com/cn/quickstart/?solutions-all.sort-by=item.additionalFields.sortDate&solutions-all.sort-order=desc&awsf.filter-tech-category=*all&awsf.filter-industry=*all&awsf.filter-content-type=*all&trk=afdbbdf0-610b-4421-ac0c-a6b31f902e4b&sc_channel=el](https://aws.amazon.com/cn/quickstart/?solutions-all.sort-by=item.additionalFields.sortDate&solutions-all.sort-order=desc&awsf.filter-tech-category=*all&awsf.filter-industry=*all&awsf.filter-content-type=*all&trk=afdbbdf0-610b-4421-ac0c-a6b31f902e4b&sc_channel=el)\n","render":"<h3><a id=\"_0\"></a><strong>前言</strong></h3>\n<p>作为一个专注前端开发的切图仔，平时想开发个全栈系统是真的难！不会 Java，不会 Python，不会 PHP。没法写接口，只能搞个静态网站，真的好烦恼！<br />\n想搭建个人博客网站，也只能是 VuePress，GithubPage 这种的！数据不能永久储存！没办法，还是得搭建一个全栈的项目，我找到了类似halo 这种的，面对复杂的部署上线，明明是按照官方的文章去部署的，却总是各种环境异常，不知名的 BUG，我又一次放弃了。<br />\n万念俱灰时，Amazon Amplify救世主一般出现在我的面前。几分钟，我就上手了 Amazon Amplify 的周边工具。从前端到后端，到数据库，再到上线部署，原本复杂的流程，我几分钟就完全学会了！<br />\n借助官方的示例，没有敲一行后端代码，我就成功上线的自己的个人博客网站！这速度堪比中国基建。通过 Amazon Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过 Amazon Amplify，无需操作数据库，通过表单，填写字段，就可以快速的生成数据库！通过 Amazon Amplify，我没有敲一行代码，自动生成了后端接口，无论是本地测试还是线上使用，自动搞定。抛弃了复杂的部署流程，我仅仅是上传了我的前端代码，Amazon Amplify 就自动的帮我部署好了，同时还贴心的生成了访问的链接！<br />\n不能我一个人受惠，这么好的东西还是要分享给大家。<br />\n亚马逊云科技提供了100余种产品免费套餐。其中，计算资源Amazon EC2首年12个月免费，750小时/月；存储资源 Amazon S3 首年12个月免费，5GB标准存储容量。<br />\n<a href=\"https://aws.amazon.com/cn/free/?nc2=h_ql_pr_ft&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all&amp;trk=e0213267-9c8c-4534-bf9b-ecb1c06e4ac6&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/free/?nc2=h_ql_pr_ft&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all&amp;trk=e0213267-9c8c-4534-bf9b-ecb1c06e4ac6&amp;sc_channel=el</a><br />\n本文就 Amazon Amplify 的工具进行详细的操作，通过实现一个 ToDoList 的 Vue 全栈项目，让大家也能快速上手。</p>\n<h3><a id=\"Amazon_Amplify__9\"></a><strong>Amazon Amplify 简介</strong></h3>\n<p>Amazon Amplify 是<strong>一组</strong>专门构建的工具和功能，可以让 WEB 和 APP 开发人员可以快速轻松的在 Amazon 部署全栈应用程序。借助 Amplify，您可以在几分钟内配置 web 或移动应用程序后端并连接应用程序，可视化地构建 web 前端 UI，并在 Amazon 控制台外轻松管理应用程序内容。无需云专业知识，就可更快发布和扩展。更多内容可以访问：<a href=\"https://aws.amazon.com/cn/amplify/\" target=\"_blank\">https://aws.amazon.com/cn/amplify/</a><br />\n它主要包含以下套件。</p>\n<ul>\n<li>Amplify Studio 构建应用程序 可视化地构建一个全堆栈应用程序，包括前端 UI 和后端</li>\n<li>Amplify Libraries 连接应用程序 将应用程序连接到新的或现有的 Amazon 服务（Cognito、S3等）。</li>\n<li>Amplify CLI 配置应用程序 为应用程序后端配置一个有指南的 CLI 工作流。</li>\n<li>Amplify Hosting 托管应用程序 通过 Amazon 内容分发网络托管安全的、可靠的、快速的 web 应用程序或网站。</li>\n</ul>\n<h3><a id=\"Amplify_Studio__Vue__16\"></a><strong>Amplify Studio 构建 Vue 全栈应用</strong></h3>\n<p>在本文，我们主要使用 Amplify Studio 来构建一个 Vue 全栈应用程序。<br />\nAmplify Studio 是一个可视化构建工具。目标是数小时内构建和交付完整的WEB和移动应用程序。<br />\n更多内容可以访问：<a href=\"https://aws.amazon.com/cn/amplify/studio/\" target=\"_blank\">https://aws.amazon.com/cn/amplify/studio/</a><br />\n话不多说，直接上手。打开 studio 控制台！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/87cdb698b84e40a48556670cbed95958_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"_24\"></a><strong>三步走</strong></h4>\n<p>通过 Quick start 我们可以看到通过 Amplify Studio 构建应用程序主要包含三步。</p>\n<ol>\n<li>构建数据模型</li>\n<li>构建并测试应用程序</li>\n<li>发布到 Amazon</li>\n</ol>\n<p><img src=\"https://dev-media.amazoncloud.cn/d6c53559752749269b601d8827c77e28_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_32\"></a><strong>选择数据模型及开发语言</strong></h3>\n<p>Amplify Studio 提供了三种数据模型。我们这里选择 To-do List 数据模型，开发语言选择 Vue。</p>\n<ul>\n<li>Blog</li>\n<li>To-do List</li>\n<li>Blank Data model</li>\n</ul>\n<p><img src=\"https://dev-media.amazoncloud.cn/005857bf7cb94ef1995957517cf2e8d3_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_40\"></a><strong>定义数据模型</strong></h3>\n<p>Amplify Studio 定义数据模型，主要有三步</p>\n<ol>\n<li>创建模型</li>\n<li>定义模型字段</li>\n<li>定义不同模型之间的关系<br />\n如果你稍微了解 MySql，PostgreSql 等数据库的话，这三步映射到数据库中</li>\n<li>创建数据表</li>\n<li>定义数据库字段</li>\n<li>定义表字段之间的关系。1对1 ，1对N ,N对N。</li>\n</ol>\n<p><img src=\"https://dev-media.amazoncloud.cn/d8272d408b934dc5bcf2806d36bafb08_image.png\" alt=\"image.png\" /></p>\n<p>这里 Amazon 默认定义了一个 ToDo 模型以及三个字段。我们在此基础上新增字段</p>\n<ul>\n<li>id 自增主键</li>\n<li>name String 任务名称</li>\n<li>description String 任务描述</li>\n<li>isCompleted int 是否完成（1完成，0未完成）</li>\n<li>isDeleted int 是否删除（1删除，0未删除）</li>\n</ul>\n<p><img src=\"https://dev-media.amazoncloud.cn/58a61d3d1d644c9b9cda5fc54b62c81f_image.png\" alt=\"image.png\" /></p>\n<p>定义好实体之后，我们就开始进入构建及测试阶段。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/cff42857b7af4083b60dd477031350d9_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_65\"></a><strong>本地构建以及测试</strong></h3>\n<p>Amplify Studio 本地构建测试步骤分为4步：</p>\n<ol>\n<li>使用 vue/cli 创建新 vue 项目</li>\n<li>全局安装 Amplify CLI，保证可以和后端程序通信。</li>\n<li>vue 项目安装 Amplify 并使用</li>\n<li>使用 Amplify DataStore 在本地测试 CRUD API</li>\n</ol>\n<h4><a id=\"_vuecli__vue__71\"></a><strong>使用 vue/cli 创建新 vue 项目</strong></h4>\n<p><img src=\"https://dev-media.amazoncloud.cn/729e8bcb2e574c0fa9ed079a622810ff_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_75\"></a><strong>全局安装脚手架</strong></h5>\n<p>使用 vue/cli 脚手架的前提是：需要全局安装。<br />\n这里我推荐使用 yarn 来进行安装。</p>\n<p>CoffeeScript</p>\n<pre><code class=\"lang-\">npm install -g @vue/cli\nyarn global add @vue/cli\n</code></pre>\n<h5><a id=\"_84\"></a><strong>创建项目</strong></h5>\n<p>打开命令行工具，执行下面命令。myapp 是项目名称，也是创建的文件夹名称。<br />\nNginx</p>\n<pre><code class=\"lang-\">vue create myapp\n</code></pre>\n<p>如果 vue 脚手架是最新版的。需要选择创建项目的 Vue 版本。这里我们选择默认的 Vue2版本。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/88d4d81716ff4c1b926b4f7401d4f0e2_image.png\" alt=\"image.png\" /></p>\n<p>安装完成后，启动项目。<br />\nDockerfile</p>\n<pre><code class=\"lang-\">cd myapp\n\nyarn serve/npm run serve\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/7d7adf4d096549e1bf0f66b942c9d149_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"Amplify_CLI_104\"></a><strong>使用Amplify CLI</strong></h4>\n<p><img src=\"https://dev-media.amazoncloud.cn/2ec56ddc7cdb44e0aba4ff6f7cf4c79b_image.png\" alt=\"image.png\" /></p>\n<p>Amplify CLI 是一个在本地运行的命令行工具链，用于与您的应用后端进行通信。</p>\n<h5><a id=\"_110\"></a><strong>安装</strong></h5>\n<p>CSS</p>\n<pre><code class=\"lang-\">curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd &amp;&amp; install.cmd\n</code></pre>\n<p>亲测：上面官方推荐的方式，在fq的网络下仍然安装不成功。<br />\n建议使用 npm 安装：npm i -g @aws-amplify/cli<br />\n从项目的根文件夹下 运行以下命令 myapp：<br />\nApache</p>\n<pre><code class=\"lang-\">amplify pull --sandboxId 25b8706b-6835-4162-9f72-9ad551b0318e\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/ce7aace8f9274b978ff133ef3334a688_image.png\" alt=\"image.png\" /></p>\n<p>命令执行结束之后，Amplify CLI 会在 myapp 项目下</p>\n<ul>\n<li>新增 amplify 文件夹，用来连接后端</li>\n<li>新增 src\\models\\schema.js 文件，该文件定义 ToDo 模型</li>\n<li>src\\models\\index.js 引入 Todo 模型。</li>\n<li>package.json 新增脚本命令</li>\n</ul>\n<h4><a id=\"_Amplify__131\"></a><strong>使用 Amplify 库</strong></h4>\n<p><img src=\"https://dev-media.amazoncloud.cn/1c35221370b845eeaaacf08eb6a3e8f9_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"vue__Amplify_135\"></a><strong>vue 项目安装 Amplify</strong></h5>\n<p>Dockerfile</p>\n<pre><code class=\"lang-\">yarn add aws-amplify\n</code></pre>\n<h5><a id=\"_Amplify_140\"></a><strong>配置使用 Amplify</strong></h5>\n<p>打开 myapp 项目，找到 main,js，官方推荐加入下面几行代码。<br />\nCoffeeScript</p>\n<pre><code class=\"lang-\">import Amplify from 'aws-amplify'\nimport awsconfig from './aws-exports'\n\nAmplify.configure(awsconfig)\n</code></pre>\n<p>请注意，上面的代码目前已经不适用。在实际实践过程中，配置使用之后，使用<code>yarn serve</code>启动项目，控制台会出现 warning</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/a346d171bdcd460b9db486b6c543ea90_image.png\" alt=\"image.png\" /></p>\n<p>通过查看 Amazon-amplify 源码发现，在 Amazon-amplify 是通过命名导出的方式导出 Amplify。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/8c518787f1874de99077ae8a6e62cacb_image.png\" alt=\"image.png\" /></p>\n<p>所以我们的代码需要修改成：<br />\nJavaScript</p>\n<pre><code class=\"lang-\">import {Amplify} from 'aws-amplify'\nimport awsconfig from './aws-exports'\n\nAmplify.configure(awsconfig)\n</code></pre>\n<h4><a id=\"_Amplify_DataStore__CRUD_API_165\"></a><strong>使用 Amplify DataStore 在本地测试 CRUD API</strong></h4>\n<p><img src=\"https://dev-media.amazoncloud.cn/33ac95d4fbbb46acb612b25e08660522_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_169\"></a><strong>测试新增接口</strong></h5>\n<h6><a id=\"_ToDo__170\"></a><strong>新增 ToDo 页面</strong></h6>\n<p>因为本文主要是讲解如何使用 Amazon 来构架部署全栈应用，所以编写代码，我们简单带过！<br />\n在 components 增加 src\\components\\ToDo.vue 文件，APP.vue 中引入并使用 <code>import ToDo from './components/ToDo.vue'</code>。<br />\nJavaScript</p>\n<pre><code class=\"lang-\">newTodo: {\n name: &quot;&quot;,\n description: &quot;&quot;,\n isCompleted: 0,\n isDelete: 0,\n},\n</code></pre>\n<p>HTML</p>\n<pre><code class=\"lang-\">&lt;div class=&quot;d-flex mb-5&quot;&gt;\n &lt;input\n v-model=&quot;newTodo.name&quot;\n type=&quot;text&quot;\n placeholder=&quot;请填写代办名称&quot;\n class=&quot;form-control form-input me-3&quot;\n /&gt;\n &lt;input\n v-model=&quot;newTodo.description&quot;\n type=&quot;text&quot;\n placeholder=&quot;请填写代办明细&quot;\n class=&quot;form-control form-input me-3&quot;\n /&gt;\n &lt;button type=&quot;submit&quot; class=&quot;submit-btn&quot; @click=&quot;addTodo()&quot;&gt;\n 新增代办\n &lt;/button&gt;\n &lt;/div&gt;\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/70d3d037f6b24c75a64d773bc056c5c3_image.png\" alt=\"image.png\" /></p>\n<h6><a id=\"DataStore_save_204\"></a><strong>DataStore .save()</strong></h6>\n<p><img src=\"https://dev-media.amazoncloud.cn/19b9d2db29f5452196001361f117a702_image.png\" alt=\"image.png\" /></p>\n<p>然后我们在新增代办按钮，添加 addToDo 事件，并调用 DataStore.save 方法保存数据<br />\n引入 DataStore 和 To 模型。</p>\n<p>JavaScript</p>\n<pre><code class=\"lang-\">import { DataStore } from &quot;@aws-amplify/datastore&quot;;\nimport { Todo } from &quot;../models&quot;;\n</code></pre>\n<p>在 addToDo 中调用 DataStore .save()<br />\n这里 isCompleted 和 isDeleted 使用默认值。<br />\nJavaScript</p>\n<pre><code class=\"lang-\">async addTodo() {\n console.log(&quot;新增数据&quot;);\n let res = await DataStore.save(\n new Todo({\n name: this.newTodo.name,\n description: this.newTodo.description,\n isCompleted: 0,\n isDeleted: 0,\n })\n );\n console.log(res)\n },\n</code></pre>\n<p>添加数据，点击新增按钮。查看控制台输出的结果，调用接口成功！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/67d9758764324e30a5693281f328e7e0_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"_236\"></a><strong>测试查询列表接口</strong></h4>\n<p><img src=\"https://dev-media.amazoncloud.cn/78645ad3606d43e79e7bbbc9a4ac1f30_image.png\" alt=\"image.png\" /></p>\n<p>JavaScript</p>\n<pre><code class=\"lang-\">async queryTodo() {\n const models = await DataStore.query(Todo);\n this.todos=models\n console.log(models);\n},\n</code></pre>\n<p>在 mounted 生命周期调用。</p>\n<p>JavaScript</p>\n<pre><code class=\"lang-\"> mounted() {\n this.queryTodo();\n },\n</code></pre>\n<p>在新增之后调用。<br />\nJavaScipt</p>\n<pre><code class=\"lang-\">async addTodo() {\n console.log(&quot;新增数据&quot;);\n let res = await DataStore.save(\n new Todo({\n name: this.newTodo.name,\n description: this.newTodo.description,\n isCompleted: 0,\n isDeleted: 0,\n })\n );\n console.log(res)\n this.queryTodo();\n},\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/cf1715a2bb60485cba1c8441f932a132_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"_275\"></a><strong>总结</strong></h4>\n<p>定义好模型之后，Amazon Amplify 会自动根据模型结构，生成增删改查代码。因为篇幅的问题，这里只测试了两个接口。</p>\n<h3><a id=\"_Amazon_278\"></a><strong>发布到 Amazon</strong></h3>\n<p><img src=\"https://dev-media.amazoncloud.cn/7695729e0a3547c1bbb12d02c4f7de86_image.png\" alt=\"image.png\" /></p>\n<p>进入到发布阶段，此时需要你有 Amazon 账号。如果已经有账号，请选择</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/84520dcdcd3c44f0a1b602bf419105ee_image.png\" alt=\"image.png\" /></p>\n<p>这里默认新用户，还没有注册账号。<br />\n点击</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/e8562481d4d041e6b4ef53f1cb5fb29c_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"_291\"></a><strong>账号注册流程</strong></h4>\n<h5><a id=\"_292\"></a><strong>根用户与邮箱</strong></h5>\n<p>填写电子邮箱以及用户名，然后验证电子邮件地址！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/484bf7fb8f0b454686bf1abf4ba88a67_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_297\"></a><strong>验证码</strong></h5>\n<p>填写验证码进入下一步！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/341e4765d3d5413b8d3ba629f99c1c5b_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_302\"></a><strong>根用户密码</strong></h5>\n<p><img src=\"https://dev-media.amazoncloud.cn/b6be79ad42b1456b93382c06a9199a3f_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_306\"></a><strong>联系人信息</strong></h5>\n<p><img src=\"https://dev-media.amazoncloud.cn/1789eb497f33486794a9345997ad348e_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_310\"></a><strong>银行卡号</strong></h5>\n<p>银行卡号最好是国内的银行卡，我用的是江苏银行的信用卡。可能有的银行不支持。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/fbb8f1ba3c4b46cfa955dbee72cfef2e_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_315\"></a><strong>确认身份</strong></h5>\n<p><img src=\"https://dev-media.amazoncloud.cn/90f1006d9c1740329fe8a431658c8e8d_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_319\"></a><strong>是否付费</strong></h5>\n<p>这里选择免费就可以啦！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/80e0326b42d846d8b333aaaa5c12edc9_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"_324\"></a><strong>正式发布</strong></h4>\n<p>注册成功之后，会跳到第二步，</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/50583f709bc748eaa22e98ef5ac80829_image.png\" alt=\"image.png\" /></p>\n<p>此时点击</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/65b5de83bca64c97b40973e5da9116a8_image.png\" alt=\"image.png\" /></p>\n<p>。进入发布流程。</p>\n<h5><a id=\"_334\"></a><strong>填写信息</strong></h5>\n<p>填写 APP 名称，选择部署区域，也就是服务器所在的位置。填写完成，点击</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/e66091ce093c423bae45d7bf555d394e_image.png\" alt=\"image.png\" /></p>\n<p>，等待系统自动跳转！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/ba5cf71eaaaa4e8bb742c25f65217eba_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_343\"></a><strong>后端自动部署</strong></h5>\n<p>后端代码 Amazon Amplify 会自动部署，不需要人为干预。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/c54ff69b06c8493bb717e5a0966d7245_image.png\" alt=\"image.png\" /></p>\n<h5><a id=\"_348\"></a><strong>前端</strong></h5>\n<h6><a id=\"_349\"></a><strong>打包</strong></h6>\n<p>在 muyapp 目录下执行，build 命令，会在 myapp 目录下，自动生成 dist 文件，这里存放的就是我们的打包后的代码。<br />\nNginx</p>\n<pre><code class=\"lang-\">yarn build\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/adddaff4df494ca396c525623416a448_image.png\" alt=\"image.png\" /></p>\n<h6><a id=\"_357\"></a><strong>上传代码</strong></h6>\n<p>Amazon Amplify 默认打开的是后台窗口，点击 Hosting environments 切换到前台部署页面。这里我们并没有用到仓库，我们直接选择最后一个。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/3d634e7f4a054f259f9d42b423d95ff3_image.png\" alt=\"image.png\" /></p>\n<p>系统跳转到上传文件页面，我们需要填写一个环境的名称，例如 dev、 test、 prod 等等.然后将 dist 文件夹拖拽上传。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/b8154b3f23384e7ea0a04f8c00ac62ee_image.png\" alt=\"image.png\" /></p>\n<p>点击 save and deploy，Amazon Amplify 开始部署前端代码。部署完成之后会生成一个网址，点击访问。<br />\n网站访问正常！</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/60cf6a7660dc4246be3f1b9520fe2780_image.png\" alt=\"image.png\" /></p>\n<h6><a id=\"_371\"></a><strong>测试</strong></h6>\n<p><img src=\"https://dev-media.amazoncloud.cn/03b2aa13b0ad4b0c98814b005afc4857_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_375\"></a><strong>总结</strong></h3>\n<p>Amazon Amplify 是 Amplify Studio、Amplify 库、Amplify CLI、Amplify 托管工具合集。可以可视化的构建和部署 web 和 app 应用程序。通过定义模型，Amazon Amplify 会自动生成对应的后端代码，包括增删改查。本地通过 Amplify CLI 连接后台，可以方便访问接口。仅仅通过拖拽上传打包后的前台文件，就可以快速部署前台项目，而后台项目 Amazon Amplify 会自动部署，无需人工干预！<br />\n作为一个程序员，真的推荐使用亚马逊云。亚马逊云科技专为开发者们打造了多种学习平台：</p>\n<ol>\n<li>入门资源中心：从0到1 轻松上手云服务，内容涵盖：成本管理，上手训练，开发资源。<a href=\"https://aws.amazon.com/cn/getting-started/?nc1=h_ls&amp;trk=32540c74-46f0-46dc-940d-621a1efeedd0&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/getting-started/?nc1=h_ls&amp;trk=32540c74-46f0-46dc-940d-621a1efeedd0&amp;sc_channel=el</a></li>\n<li>架构中心：亚马逊云科技架构中心提供了云平台参考架构图表、经过审查的架构解决方案、Well-Architected 最佳实践、模式、图标等。<a href=\"https://aws.amazon.com/cn/architecture/?intClick=dev-center-2021_main&amp;trk=3fa608de-d954-4355-a20a-324daa58bbeb&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/architecture/?intClick=dev-center-2021_main&amp;trk=3fa608de-d954-4355-a20a-324daa58bbeb&amp;sc_channel=el</a></li>\n<li>构建者库：了解亚马逊云科技如何构建和运营软件。<a href=\"https://aws.amazon.com/cn/builders-library/?cards-body.sort-by=item.additionalFields.sortDate&amp;cards-body.sort-order=desc&amp;awsf.filter-content-category=*all&amp;awsf.filter-content-type=*all&amp;awsf.filter-content-level=*all&amp;trk=835e6894-d909-4691-aee1-3831428c04bd&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/builders-library/?cards-body.sort-by=item.additionalFields.sortDate&amp;cards-body.sort-order=desc&amp;awsf.filter-content-category=*all&amp;awsf.filter-content-type=*all&amp;awsf.filter-content-level=*all&amp;trk=835e6894-d909-4691-aee1-3831428c04bd&amp;sc_channel=el</a></li>\n<li>用于在亚马逊云科技平台上开发和管理应用程序的工具包：<a href=\"https://aws.amazon.com/cn/tools/?intClick=dev-center-2021_main&amp;trk=972c69e1-55ec-43af-a503-d458708bb645&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/tools/?intClick=dev-center-2021_main&amp;trk=972c69e1-55ec-43af-a503-d458708bb645&amp;sc_channel=el</a></li>\n</ol>\n<p>【专属福利】<br />\n福利一：100余种产品免费套餐。其中，计算资源 Amazon EC2首年12个月免费，750小时/月；存储资源 Amazon S3 首年12个月免费，5GB标准存储容量。<br />\n<a href=\"https://aws.amazon.com/cn/free/?nc2=h_ql_pr_ft&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all&amp;trk=e0213267-9c8c-4534-bf9b-ecb1c06e4ac6&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/free/?nc2=h_ql_pr_ft&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all&amp;trk=e0213267-9c8c-4534-bf9b-ecb1c06e4ac6&amp;sc_channel=el</a><br />\n福利二：最新优惠大礼包，200数据与分析抵扣券，200机器学习抵扣券，200$微服务与应用开发抵扣券。<a href=\"https://www.amazonaws.cn/campaign/?sc_channel=el&amp;sc_campaign=credit-acts-ldr&amp;sc_country=cn&amp;sc_geo=chna&amp;sc_category=mult&amp;sc_outcome=field&amp;trkCampaign=request-credit-glb-ldr&amp;trk=f45email&amp;trk=02faebcb-3f61-4bcb-b68e-c63f3ae33c99&amp;sc_channel=el\" target=\"_blank\">https://www.amazonaws.cn/campaign/?sc_channel=el&amp;sc_campaign=credit-acts-ldr&amp;sc_country=cn&amp;sc_geo=chna&amp;sc_category=mult&amp;sc_outcome=field&amp;trkCampaign=request-credit-glb-ldr&amp;trk=f45email&amp;trk=02faebcb-3f61-4bcb-b68e-c63f3ae33c99&amp;sc_channel=el</a><br />\n福利三：解决方案 CloudFormation 一键部署模版库<br />\n<a href=\"https://aws.amazon.com/cn/quickstart/?solutions-all.sort-by=item.additionalFields.sortDate&amp;solutions-all.sort-order=desc&amp;awsf.filter-tech-category=*all&amp;awsf.filter-industry=*all&amp;awsf.filter-content-type=*all&amp;trk=afdbbdf0-610b-4421-ac0c-a6b31f902e4b&amp;sc_channel=el\" target=\"_blank\">https://aws.amazon.com/cn/quickstart/?solutions-all.sort-by=item.additionalFields.sortDate&amp;solutions-all.sort-order=desc&amp;awsf.filter-tech-category=*all&amp;awsf.filter-industry=*all&amp;awsf.filter-content-type=*all&amp;trk=afdbbdf0-610b-4421-ac0c-a6b31f902e4b&amp;sc_channel=el</a></p>\n"}