体验亚马逊云科技产品使用 Amazon Amplify 构建和部署一个 Web 应用程序

API
React
re:Invent
0
0
### 前言 如果你是IT从业者,会有一个非常明显的感觉,那就是上云已经成为了趋势。 以前公司如果有什么互联网业务,都要自己买服务器,自建机房,或者搬到运营商的IDC机房里面去进行托管。 但现在,大家都是找云服务器厂商,租几台云服务器了事,不用自己买服务器,配置也非常灵活,也省了很多运维工程师,这就是云计算带来的好处。 我们从全球范围内看一下这个21年的市场占比就知道亚马逊云科技到底有多厉害,当然近几年其它厂商占比逐渐在增加,处于你追我敢的势头,但是亚马逊云科技依然是带头大哥。 ![image.png](https://dev-media.amazoncloud.cn/d24adfad5b0c42e785ed705d6d3e2b1f_image.png "image.png") 注册账号 主要分为5个步骤,按照提示填写即可,中途会给你发邮件或者短信验证码验证。 ![image.png](https://dev-media.amazoncloud.cn/4d60d1783bf24cf59ea97a5c21978992_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/d0946ad44fae4acead2e1415a4e43d89_image.png "image.png") 这里需要填写一个 visa 卡或者借记卡,我用的招商的 visa 卡。 验证身份,使用短信验证码加语音提示。 ![image.png](https://dev-media.amazoncloud.cn/e278f21900f54cad95ce40a3e52083c8_image.png "image.png") 选择白嫖一年。 到这里注册成功,它会发邮件问候你一下,让你快速入门。 项目构建 创建第一个 Amplify 项目 使用 [React](https://reactjs.org/?trk=cndc-detail) (用于构建用户界面的 JavaScript 库) 新建一个 Web 应用程序。 检查 node 版本。 ![image.png](https://dev-media.amazoncloud.cn/17fa2d1b5b324f4492635906a1aa7ea4_image.png "image.png") 检查 npm 版本 ![image.png](https://dev-media.amazoncloud.cn/55ec06ad885f4afaba12d34eb349fe0c_image.png "image.png") 安装 Amplify CLI ![image.png](https://dev-media.amazoncloud.cn/bbc56c783157497caae30047a6cee9fc_image.png "image.png") 配置 Amplify amplify configure 创建 IAM 用户 ![image.png](https://dev-media.amazoncloud.cn/9d8488301e9a4f6dbea58cfa34cd6fd2_image.png "image.png") 创建 AdministratorAccess 权限的用户 ![image.png](https://dev-media.amazoncloud.cn/712f4b5d046f413d8a164bb7ee51348d_image.png "image.png") 创建 React 应用程序 创建名为 amplify-app 的应用程序, ![image.png](https://dev-media.amazoncloud.cn/7c2230d1ecea4e2699ff5e46be169ded_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/ec0d63191b864366aa3d04fd09ce775b_image.png "image.png") 使用 CD 命令进入 amplify-app 文件夹下 ![image.png](https://dev-media.amazoncloud.cn/7a6d08df5faa4e8caa7ab8bf757e6dd5_image.png "image.png") 使用 amplify init 对其进行初始化: ![image.png](https://dev-media.amazoncloud.cn/4ebb2b1e1dbd4207bcb9708527db6b62_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/a56e13f0c3bc4978bad6aa29ad2d3e51_image.png "image.png") 在 [Amazon Amplify 控制台](https://console.aws.amazon.com/amplify?trk=cndc-detail)中为查看和管理自己的云 Amplify 项目。 ![image.png](https://dev-media.amazoncloud.cn/55efaa1938c94059b3f7d93603f01dc6_image.png "image.png") 安装 Amplify 库 ![image.png](https://dev-media.amazoncloud.cn/76860910a6fe4e0083d6ff459683900f_image.png "image.png") 在电脑端找到这个文件 ![image.png](https://dev-media.amazoncloud.cn/dc9beb729cf54f5dad1e83b932a525e5_image.png "image.png") 使用记事本工具打开并替换如下代码 ![image.png](https://dev-media.amazoncloud.cn/facd4f74b4ce4e3287ba88f67e329989_image.png "image.png") 使用 Amplify 添加 GraphQL API GraphQL 架构是对象及其字段的表示。定义 GraphQL 架构, Amplify 将创建所需的 DynamoDB 表,并配置 GraphQL 来自动处理读取、写入、更新和删除。打开 amplify/backend/api/amplifyapp/schema.graphql 文件并将内容替换为以下代码: ![image.png](https://dev-media.amazoncloud.cn/fc04f571af4248b8b0249d80b23a6503_image.png "image.png") 输入 Yes 来编辑架构。 创建 GraphQL 架构 GraphQL 架构是对象及其字段的表示。定义 GraphQL 架构,而 Amplify 将创建所需的 DynamoDB 表,并配置 GraphQL 来自动处理读取、写入、更新和删除。打开 amplify/backend/api/amplifyapp/schema.graphql 文件并将内容替换为以下代码: ![image.png](https://dev-media.amazoncloud.cn/3f155029b0b94fc2afb806ee8cd11cb7_image.png "image.png") 此架构定义了一个以 id 和文本作为必填字段的备注类型。它还包含若干指令,这些指令属于 Amplify 的 GraphQL 转换库: @model:以 @model 注释的类型存储在 DynamoDB 中,系统自动为其创建 CRUDL (创建、读取、更新、删除、列表) 操作。 @auth:以 @auth 注释的类型受一组授权规则的保护。在这里,我们使用拥有者授权来确保只有备注的拥有者才能访问和修改。 部署应用程序 通过运行 amplify push 来部署自己的 Amplify Web 应用程序。将应用程序上传到自己的 AWS 账户,而 Amplify 将显示正在部署的更改,并要求确认部署: ![image.png](https://dev-media.amazoncloud.cn/305b572a8cf246f5b53291c667ea2127_image.png "image.png") 确认后,根据提示选择后续问题的原定设置值: ![image.png](https://dev-media.amazoncloud.cn/97d6198b2e324db3be71bc38c89c24d7_image.png "image.png") ## 更新前端以使用 API 要使用刚部署的新 API,通过将其中的内容替换为以下代码来更新 src/App.js 文件: ![image.png](https://dev-media.amazoncloud.cn/db80f8e459854d57b7bd95e226586a2c_image.png "image.png") 现在就有了一个运转的应用程序。使用多重验证登录,应用程序现在可以与 API 通信以保存/更新/删除备注。可以运行 npm start 进行确认。 ### 总结 官方的文档和教程比较全,作为一名不是特别专业的人员很难提出一些专业性的见解,不过从日常的开发中,我们可以学习一些他们优秀且成熟的架构思维及已有的科技成果。也看一下亚马逊云科技平台的计算服务、网络服务、存储服务、数据库服务、安全责任共担模型、身份和访问管理服务、架构框架及弹性和高可用架构,我比较感兴趣的还是他们的计算服务和网络服务,这个主要是因为平时也玩一些阿里云、华为云、腾讯云的服务器,发现都大同小异,把自己的应用部署到服务器是值得自豪的一件事,比如DNS解析域名,安全组放行,安全管理等。这里有一个比较好的东西是他们的架构思维,值得我们好好学习。还专门花时间了解了一下。 比如他们负载均衡的处理: ![image.png](https://dev-media.amazoncloud.cn/1a2936b0ed4c422680adc475c33c841b_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/674a63c87861408f89f670170fdce51d_image.png "image.png") 不同云产品每次迭代性能提升30%\~50%,价格还降低了,推荐大家使用数字较大的产品,性价比很高,比如T2和T5,选择T5,这个系列最新的产品性价比之王。 ![image.png](https://dev-media.amazoncloud.cn/25ffe97f4e6b406fa202a7dfda984e75_image.png "image.png") 不用产品的优化迭代速度很快,基本现在都是指数级增长了。 ![image.png](https://dev-media.amazoncloud.cn/df59d2c3e5064ebeae3bcbbc7348960f_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/b36d1c78aab9488ba217fc075f71d5de_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/8a78301bd2a6498094ebece688c44365_image.png "image.png") ![image.png](https://dev-media.amazoncloud.cn/951e9c4ff6d84e6db085ca56f0c32749_image.png "image.png") 在国内主要有两个点,北京和宁夏两个AZ地区,区域之间主要使用亚马逊云科技主干网络通信。可以充分发挥云产品的价值。 ![image.png](https://dev-media.amazoncloud.cn/334bbaab53ae4177be9603507989350e_image.png "image.png") 我们可以借助亚马逊云科技的基础设施和服务,在边缘运行延迟敏感性的应用程序,主要依赖于它的低延迟、全托管、还提供最终用户更近的计算、存储、网络和亚马逊云科技服务,为云大哥点赞。 ### 拓展 官方文档:[<https://docs.aws.amazon.com/?nc2=h_ql_doc_do?trk=cndc-detail>] 了解亚马逊云科技:<https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs?trk=cndc-detail> ![image.png](https://dev-media.amazoncloud.cn/738ad55fad234ebda80b2125a9544277_image.png "image.png")
0
目录
关闭