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

前言

作为一个专注前端开发的切图仔,平时想开发个全栈系统是真的难!不会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文件夹拖拽上传。

测试

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2022年4月20日
下一篇 2022年4月20日

相关推荐