前言
作为一个专注前端开发的切图仔,平时想开发个全栈系统是真的难!不会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步:
- 使用vue/cli 创建新vue项目
- 全局安装Amplify CLI,保证可以和后端程序通信。
- vue项目安装Amplify并使用
- 使用 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进行处理,非常感谢!