📝 前言

作为一个专注前端开发的切图仔，平时想开发个全栈系统是真的难！不会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/?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 的工具进行详细的操作，通过实现一个ToDoList的Vue全栈项目，让大家也能快速上手。

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来构建一个Vue全栈应用程序。

Amplify Studio是一个可视化构建工具。目标是数小时内构建和交付完整的WEB和移动应用程序。

更多内容可以访问：https://aws.amazon.com/cn/amplify/studio/

话不多说，直接上手。打开studio控制台！

img

三步走

通过Quick start我们可以看到通过Amplify Studio构建应用程序主要包含三步。

  1. 构建数据模型
  2. 构建并测试应用程序
  3. 发布到AWS

img

选择数据模型及开发语言

Amplify Studio提供了三种数据模型。我们这里选择To-do List数据模型，开发语言选择Vue。

  • Blog

  • To-do List

  • Blank Data model

img

定义数据模型

Amplify Studio定义数据模型，主要有三步

  1. 创建模型
  2. 定义模型字段
  3. 定义不同模型之间的关系

如果你稍微了解MySql，PostgreSql等数据库的话，这三步映射到数据库中

  1. 创建数据表
  2. 定义数据库字段
  3. 定义表字段之间的关系。1对1 ，1对N ,N对N。

img

这里AWS默认定义了一个ToDo模型以及三个字段。我们在此基础上新增字段

  • id 自增主键

  • name String 任务名称

  • description String 任务描述

  • isCompleted int 是否完成(1完成，0未完成)

  • isDeleted int 是否删除(1删除，0未删除)

img

定义好实体之后，我们就开始进入构建及测试阶段。

img

本地构建以及测试

Amplify Studio本地构建测试步骤分为4步：

  1. 使用vue/cli 创建新vue项目
  2. 全局安装Amplify CLI，保证可以和后端程序通信。
  3. vue项目安装Amplify并使用
  4. 使用 Amplify DataStore 在本地测试 CRUD API

使用vue/cli 创建新vue项目

img

全局安装脚手架

使用vue/cli脚手架的前提是：需要全局安装。

这里我推荐使用yarn来进行安装。

npm install -g @vue/cli
yarn global add @vue/cli

创建项目

打开命令行工具，执行下面命令。myapp是项目名称，也是创建的文件夹名称。

vue create myapp

如果vue脚手架是最新版的。需要选择创建项目的Vue版本。这里我们选择默认的Vue2版本。

img

安装完成后，启动项目。

cd myapp

yarn serve/npm run serve

img

使用Amplify CLI

img

Amplify CLI 是一个在本地运行的命令行工具链，用于与您的应用后端进行通信。

安装

curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

亲测：上面官方推荐的方式，在fq的网络下仍然安装不成功。

建议使用npm安装：npm i -g @aws-amplify/cli

从项目的根文件夹下 运行以下命令myapp：

amplify pull --sandboxId 25b8706b-6835-4162-9f72-9ad551b0318e

img

命令执行结束之后，Amplify CLI 会在myapp项目下

  • 新增amplify文件夹，用来连接后端

  • 新增src\models\schema.js文件，该文件定义ToDo模型

  • src\models\index.js 引入Todo模型。

  • package.json 新增脚本命令

使用 Amplify 库

img

vue项目安装Amplify

yarn add aws-amplify

配置使用Amplify

打开myapp项目，找到main,js，官方推荐加入下面几行代码。

import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

请注意，上面的代码目前已经不适用。在实际实践过程中，配置使用之后，使用yarn serve启动项目，控制台会出现warning

img

通过查看aws-amplify源码发现，在aws-amplify是通过命名导出的方式导出Amplify。

img

所以我们的代码需要修改成：

import {Amplify} from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

使用Amplify DataStore 在本地测试 CRUD API

img

Amplify DataStore 允许您管理您的应用程序数据，而无需为离线和在线场景编写额外的代码。

测试新增接口

新增ToDo页面

因为本文主要是讲解如何使用aws来构架部署全栈应用，所以编写代码，我们简单带过！

在components增加src\components\ToDo.vue文件，APP.vue中引入并使用import ToDo from './components/ToDo.vue'。

newTodo: {
    name: "",
    description: "",
    isCompleted: 0,
    isDelete: 0,
},
<div class="d-flex mb-5">
      <input
        v-model="newTodo.name"
        type="text"
        placeholder="请填写代办名称"
        class="form-control form-input me-3"
      />
       <input
        v-model="newTodo.description"
        type="text"
        placeholder="请填写代办明细"
        class="form-control form-input me-3"
      />
      <button type="submit" class="submit-btn" @click="addTodo()">
        新增代办
      </button>
    </div>

img

DataStore .save()

img

然后我们在新增代办按钮，添加addToDo事件，并调用DataStore.save方法保存数据

引入DataStore和To模型。

import { DataStore } from "@aws-amplify/datastore";
import { Todo } from "../models";

在addToDo中调用DataStore .save()

这里isCompleted和isDeleted使用默认值。

 async addTodo() {
       console.log("新增数据");
      let res = await DataStore.save(
        new Todo({
          name: this.newTodo.name,
          description: this.newTodo.description,
          isCompleted: 0,
          isDeleted: 0,
        })
      );
      console.log(res)
    },

添加数据，点击新增按钮。查看控制台输出的结果，调用接口成功！

img

测试查询列表接口

img

async queryTodo() {
    const models = await DataStore.query(Todo);
    this.todos=models
    console.log(models);
},

在mounted生命周期调用。

 mounted() {
    this.queryTodo();
  },

在新增之后调用。

async addTodo() {
    console.log("新增数据");
    let res = await DataStore.save(
        new Todo({
            name: this.newTodo.name,
            description: this.newTodo.description,
            isCompleted: 0,
            isDeleted: 0,
        })
    );
    console.log(res)
    this.queryTodo();
},

img

总结

定义好模型之后，Aws Amplify会自动根据模型结构，生成增删改查代码。因为篇幅的问题，这里只测试了两个接口。

发布到AWS

img

进入到发布阶段，此时需要你有AWS账号。如果已经有账号，请选择

img

这里默认新用户，还没有注册账号。

点击

img

账号注册流程

根用户与邮箱

填写电子邮箱以及用户名，然后验证电子邮件地址！

img

验证码

填写验证码进入下一步！

img

根用户密码

img

联系人信息

img

银行卡号

银行卡号最好是国内的银行卡，我用的是江苏银行的信用卡。可能有的银行不支持。

img

确认身份

img

是否付费

这里选择免费就可以啦！

img

正式发布

注册成功之后，会跳到第二步，

img

此时点击

img

。进入发布流程。

填写信息

填写APP名称，选择部署区域，也就是服务器所在的位置。填写完成，点击

img

，等待系统自动跳转！

img

后端自动部署

后端代码AWS Amplify 会自动部署，不需要人为干预。

img

前端

打包

在muyapp目录下执行，build命令，会在myapp目录下，自动生成dist文件，这里存放的就是我们的打包后的代码。

yarn build

img

上传代码

AWS Amplify默认打开的是后台窗口，点击Hosting environments切换到前台部署页面。这里我们并没有用到仓库，我们直接选择最后一个。

img

系统跳转到上传文件页面，我们需要填写一个环境的名称，例如dev、 test、 prod等等.然后将dist文件夹拖拽上传。

img

点击save and deploy，AWS Amplify开始部署前端代码。部署完成之后会生成一个网址，点击访问。

网站访问正常！

img

测试

img

总结

AWS Amplify 是Amplify Studio、Amplify 库、Amplify CLI、Amplify 托管工具合集。可以可视化的构建和部署web和app应用程序。通过定义模型，AWS Amplify会自动生成对应的后端代码，包括增删改查。本地通过Amplify CLI连接后台，可以方便访问接口。仅仅通过拖拽上传打包后的前台文件，就可以快速部署前台项目，而后台项目AWS Amplify会自动部署，无需人工干预！

作为一个程序员，真的推荐使用亚马逊云。
亚马逊云科技专为开发者们打造了多种学习平台：

  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/getting-started/?nc1=h_ls&trk=32540c74-46f0-46dc-940d-621a1efeedd0&sc_channel=el

  1. 构建者库：了解亚马逊云科技如何构建和运营软件
    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

  2. 用于在亚马逊云科技平台上开发和管理应用程序的工具包：

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

# aws # vue.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue