AWS Amplify Studio 构建全栈应用程序
时间:2022-10-10 23:00:00
- ?? 个人网站:【海拥】【钓鱼游戏】【文档导航开发】
- ?? 幽默的人工智能学习网站:人工智能
- ?? 如果您想找到合作伙伴一起学习和交流,请点击全栈技术交流小组
- ?? 免费实用的计算机相关知识题库:
AWS Amplify Studio 构建全栈应用程序
-
- 前言
- AWS Amplify Studio
-
- 优点
-
- 1.快速创建功能丰富的功能 UI
- 2.全栈应用程序轻松发布
- 3.提高生产率
- 4.改善设计师与开发者的合作
- 实现步骤
-
- 一.创建数据模型
-
- 数据建模的工作原理
-
- 1.添加模型
- 2.添加字段
- 3. 建立关系
- 二. 在应用中进行测试
-
-
- 1.安装 Amplify CLI 提取数据模型
- 2.安装 Amplify 库并初始化 Amplify
- 3.使用 Amplify DataStore 在本地测试 CRUD API
-
- 三.部署到 AWS
-
-
- 1.创建并确认密码
- 2.完善联系人信息
- 3.填写银行卡号信息
- 4.确认身份(手机号确认)
- 5.选择收费版(这里建议免费)
- 6.正式发布
-
- 总结
前言
现在个人网站很受欢迎,我以前看过别人的个人网站,感觉很酷,所以我想建立自己的个人网站。然而,我只对前端有更多的研究,我对如何构建后端感到非常困惑。我偶然看到了AWS亚马逊云服务可以使用最少的代码UI连接到后端,很容易完成整个堆栈应用程序的开发,特别适合我理解前端,但后端可以说是一个无知的小白色。
亚马逊云技术提供了100多个免费包装。其中,计算资源Amazon EC第一年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 Tier Types=*all&awsf.Free Tier Categories=*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