AWS Amplify Studio 构建全栈应用程序
前言
现在个人网站很流行,我之前看过别人的个人网站,觉得很酷,于是萌生了搭建属于自己的个人网站的念头。不过自己只对前端有比较多的研究,对于后端该如何搭建感到非常困惑。偶然的机会我看到了AWS亚马逊云服务,可以使用最少的代码将UI连接到后端,很轻松地就可以完成全栈应用程序的开发,特别适合我这种了解前端,但后端可以说是一窍不通的小白了。
亚马逊云科技提供了100余种产品免费套餐。其中,计算资源Amazon EC2首年12个月免费,750小时/月;存储资源 Amazon S3 首年12个月免费,5GB标准存储容量。
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
AWS Amplify Studio
AWS Amplify Studio 是一个可视化开发环境,可让开发人员在数小时而不是数周内轻松构建和交付完整的 Web 和移动应用程序。使用 Amplify Studio,您可以快速构建应用程序后端、创建丰富的用户界面 (UI) 组件,并以最少的编码将 UI 连接到后端。Amplify Studio 将所有 UI 和基础架构工件导出为代码,因此你可以保持对应用程序设计和行为的完全控制。更快地交付并顺利扩展 — 无需云或 AWS 专业知识。
优点
1.快速创建功能丰富的 UI
使用可视化界面和预构建 UI 组件库,以最少的编码为您的应用创建和自定义 UI。
2.轻松发布全栈应用程序
在 AWS 上设置您的前端 UI 和相应的后端,只需单击几下即可完成一个全栈应用程序。
3.提高生产率
自动化 UI 和基础设施样板代码,以便您可以专注于业务逻辑。
4.改善设计师与开发者的协作
简化设计交接流程并减少代价高昂且耗时的错误。
实现步骤
首先我们打开 Amplify Studio :https://aws.amazon.com/cn/amplify/studio/
找到下方 Get started with AWS Amplify Studio
通过上面的提示,我们可以使用以下三步完成应用程序的构建
1.创建数据模型
2.在你的应用中测试
3.部署到 AWS(需要用到 AWS 账户)
一.创建数据模型
这里 Amplify Studio 给我们提供了三种数据模型,分别是 Blog、To-do list 和 Blank data model
我采用的是 Blog,开发语言我所选择的是 Vue 。
点击 Get started 创建完成后我们需要进行数据建模
数据建模的工作原理
1.添加模型
模型(例如:BlogPosts 或 Authors)是您在应用程序中定义数据类型的方式。
2.添加字段
字段是单独的数据类型(例如:blogTitle 是 String 或 Rating 是 Integer)。
3. 建立关系
创建多个模型并指定它们之间的关系(例如,BlogPost 有一个或多个作者)。
这里已经默认定义了 Post 和 Comment 模型 以及各自三个字段。我们可以在这个基础上添加自己所需要的字段,定义好数据模型之后点击 Next:Test locally in your app
二. 在应用中测试
首先我们在本地创建新的 vue 项目
npm uninstall -g vue-cli
以管理员身份打开命令行界面,进入任意一个想要创建项目的文件夹,输入
vue create myapp
启动项目
npm run serve
接下来就是在应用构建项目并测试,需要三个步骤,操作流程如下:
1.安装 Amplify CLI 以提取数据模型
npm i -g @aws-amplify/cli
从项目的根文件夹下 运行以下命令
amplify pull --sandboxId b122629e-66d1-433c-a9de-22bc66b9878d
2.安装 Amplify 库并初始化 Amplify
安装 Amplify
yarn add aws-amplify
打开myapp项目,找到main,js,官方推荐加入下面几行代码。
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
3.使用 Amplify DataStore 在本地测试 CRUD API
三.部署到 AWS
这里我们需要创建一个新的 AWS 账户,如果已经有一个帐户,我们的应用程序将自动部署。
点击 Create an AWS account
,输入邮箱和账户名称,然后验证邮箱
接下来根据流程走,一共五步。
1.创建并确认密码
2.完善联系人信息
3.填写银行卡号信息
4.确认身份(手机号确认)
5.选择收费版本(这里建议免费的就可以啦)
注意:如果是个人使用,需要有个人的VISA国际信用卡,注册信息时要用到。
6.正式发布
注册完成后点击 Deploy app to AWS
进入发布。
填写 app 名称并选择部署区域点击 confirm deployment
。
后端代码会自动部署,然后将前端代码打包上传。
在myapp目录下执行下面的命令,会在myapp目录下自动生成dist文件,这里存放的就是我们的打包后的代码。
yarn build
点击后台中的 Hosting environments,选择 deploy without Git provider
为环境确定一个名称然后将我们的 dist 文件夹拖拽过来
部署完成后点击 Domain下面的连接即可访问我们的前端页面
网站可正常访问,我做了一个简单的导航页面:https://dev2.d2l8gkqbsil8ic.amplifyapp.com/
到这里我们就完成了一个简单的导航页面,当然还有更多功能还有待完善。
总结
我们在 AWS 云上部署 Web 应用程序,可实现自动编写代码和部署,AWS 负责处理基础设施,具有以下一些优点:
- 与 CD 集成,自动构建和部署。完全无需担心底层服务的配置
- 实现对后端编程语言的最广泛支持,例如 Java、.NET、Go、Ruby、PHP、Node.js 和 Python
- 部署 Web 应用程序的最简单快捷方式,简单上手,灵活自定义
- 全球可扩展性、完全托管的基础设施
亚马逊云科技专为开发者们打造了多种学习平台:
1.入门资源中心:从0到1 轻松上手云服务,内容涵盖:成本管理,上手训练,开发资源。https://aws.amazon.com/cn/getting-started/?nc1=h_ls&trk=32540c74-46f0-46dc-940d-621a1efeedd0&sc_channel=el
2.架构中心:亚马逊云科技架构中心提供了云平台参考架构图表、经过审查的架构解决方案、Well-Architected 最佳实践、模式、图标等。https://aws.amazon.com/cn/architecture/?intClick=dev-center-2021_main&trk=3fa608de-d954-4355-a20a-324daa58bbeb&sc_channel=el
3.构建者库:了解亚马逊云科技如何构建和运营软件。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
4.用于在亚马逊云科技平台上开发和管理应用程序的工具包:https://aws.amazon.com/cn/tools/?intClick=dev-center-2021_main&trk=972c69e1-55ec-43af-a503-d458708bb645&sc_channel=el
【专属福利】
福利一:100余种产品免费套餐。其中,计算资源Amazon EC2首年12个月免费,750小时/月;存储资源 Amazon S3 首年12个月免费,5GB标准存储容量。
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
福利二:最新优惠大礼包,200 数 据 与 分 析 抵 扣 券 , 200 数据与分析抵扣券,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
福利三:解决方案CloudFormation一键部署模版库
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