前言

作為一個專注前端開發(fā)的切圖仔，平時想開發(fā)個全棧系統(tǒng)是真的難！不會 Java，不會 Python，不會 PHP。沒法寫接口，只能搞個靜態(tài)網(wǎng)站，真的好煩惱！想搭建個人博客網(wǎng)站，也只能是 VuePress，GithubPage 這種的！數(shù)據(jù)不能永久儲存！沒辦法，還是得搭建一個全棧的項目，我找到了類似halo 這種的，面對復雜的部署上線，明明是按照官方的文章去部署的，卻總是各種環(huán)境異常，不知名的 BUG，我又一次放棄了。萬念俱灰時，Amazon Amplify救世主一般出現(xiàn)在我的面前。幾分鐘，我就上手了 Amazon Amplify 的周邊工具。從前端到后端，到數(shù)據(jù)庫，再到上線部署，原本復雜的流程，我?guī)追昼娋屯耆珜W會了！借助官方的示例，沒有敲一行后端代碼，我就成功上線的自己的個人博客網(wǎng)站！這速度堪比中國基建。通過 Amazon Amplify，無需操作數(shù)據(jù)庫，通過表單，填寫字段，就可以快速的生成數(shù)據(jù)庫！通過 Amazon Amplify，無需操作數(shù)據(jù)庫，通過表單，填寫字段，就可以快速的生成數(shù)據(jù)庫！通過 Amazon Amplify，我沒有敲一行代碼，自動生成了后端接口，無論是本地測試還是線上使用，自動搞定。拋棄了復雜的部署流程，我僅僅是上傳了我的前端代碼，Amazon Amplify 就自動的幫我部署好了，同時還貼心的生成了訪問的鏈接！不能我一個人受惠，這么好的東西還是要分享給大家。亞馬遜云科技提供了100余種產(chǎn)品免費套餐。其中，計算資源Amazon EC2首年12個月免費，750小時/月；存儲資源 Amazon S3 首年12個月免費，5GB標準存儲容量。??https://aws.amazon.com/cn/free/??本文就 Amazon Amplify 的工具進行詳細的操作，通過實現(xiàn)一個 ToDoList 的 Vue 全棧項目，讓大家也能快速上手。

Amazon Amplify 簡介

Amazon Amplify 是一組專門構(gòu)建的工具和功能，可以讓 WEB 和 APP 開發(fā)人員可以快速輕松的在 Amazon 部署全棧應用程序。借助 Amplify，您可以在幾分鐘內(nèi)配置 web 或移動應用程序后端并連接應用程序，可視化地構(gòu)建 web 前端 UI，并在 Amazon 控制臺外輕松管理應用程序內(nèi)容。無需云專業(yè)知識，就可更快發(fā)布和擴展。更多內(nèi)容可以訪問：??https://aws.amazon.com/cn/amplify/?? 它主要包含以下套件。

• Amplify Studio 構(gòu)建應用程序 可視化地構(gòu)建一個全堆棧應用程序，包括前端 UI 和后端
• Amplify Libraries 連接應用程序 將應用程序連接到新的或現(xiàn)有的 Amazon 服務(wù)（Cognito、S3等）。
• Amplify CLI 配置應用程序 為應用程序后端配置一個有指南的 CLI 工作流。
• Amplify Hosting 托管應用程序 通過 Amazon 內(nèi)容分發(fā)網(wǎng)絡(luò)托管安全的、可靠的、快速的 web 應用程序或網(wǎng)站。

Amplify Studio 構(gòu)建 Vue 全棧應用

在本文，我們主要使用 Amplify Studio 來構(gòu)建一個 Vue 全棧應用程序。
Amplify Studio 是一個可視化構(gòu)建工具。目標是數(shù)小時內(nèi)構(gòu)建和交付完整的WEB和移動應用程序。更多內(nèi)容可以訪問：??https://aws.amazon.com/cn/amplify/studio/?? 話不多說，直接上手。打開 studio 控制臺！

三步走

通過 Quick start 我們可以看到通過 Amplify Studio 構(gòu)建應用程序主要包含三步。

1. 構(gòu)建數(shù)據(jù)模型
2. 構(gòu)建并測試應用程序
3. 發(fā)布到Amazon

選擇數(shù)據(jù)模型及開發(fā)語言

Amplify Studio 提供了三種數(shù)據(jù)模型。我們這里選擇 To-do List 數(shù)據(jù)模型，開發(fā)語言選擇 Vue。

• Blog
• To-do List
• Blank Data model

定義數(shù)據(jù)模型

Amplify Studio 定義數(shù)據(jù)模型，主要有三步

1. 創(chuàng)建模型
2. 定義模型字段
3. 定義不同模型之間的關(guān)系 如果你稍微了解 MySql，PostgreSql 等數(shù)據(jù)庫的話，這三步映射到數(shù)據(jù)庫中
4. 創(chuàng)建數(shù)據(jù)表
5. 定義數(shù)據(jù)庫字段
6. 定義表字段之間的關(guān)系。1對1 ，1對N ,N對N。

這里 Amazon 默認定義了一個 ToDo 模型以及三個字段。我們在此基礎(chǔ)上新增字段

• id 自增主鍵
• name String 任務(wù)名稱
• description String 任務(wù)描述
• isCompleted int 是否完成(1完成，0未完成)
• isDeleted int 是否刪除(1刪除，0未刪除)

定義好實體之后，我們就開始進入構(gòu)建及測試階段。

本地構(gòu)建以及測試

Amplify Studio 本地構(gòu)建測試步驟分為4步：

1. 使用 vue/cli 創(chuàng)建新 vue 項目
2. 全局安裝 Amplify CLI，保證可以和后端程序通信。
3. vue 項目安裝 Amplify 并使用
4. 使用 Amplify DataStore 在本地測試

使用 vue/cli 創(chuàng)建新 vue 項目

全局安裝腳手架

使用 vue/cli 腳手架的前提是：需要全局安裝。這里我推薦使用 yarn 來進行安裝。

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

創(chuàng)建項目

打開命令行工具，執(zhí)行下面命令。myapp 是項目名稱，也是創(chuàng)建的文件夾名稱。
Nginx

vue create myapp

如果 vue 腳手架是最新版的。需要選擇創(chuàng)建項目的 Vue 版本。這里我們選擇默認的 Vue2版本。

安裝完成后，啟動項目。
Dockerfile

cd
yarn serve/npm run serve

使用Amplify CLI

Amplify CLI 是一個在本地運行的命令行工具鏈，用于與您的應用后端進行通信。

安裝

CSS

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

親測：上面官方推薦的方式，在fq的網(wǎng)絡(luò)下仍然安裝不成功。建議使用 npm 安裝：npm i -g @aws-amplify/cli
從項目的根文件夾下 運行以下命令 myapp：
Apache

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

命令執(zhí)行結(jié)束之后，Amplify CLI 會在 myapp 項目下

• 新增 amplify 文件夾，用來連接后端
• 新增 src\models\schema.js 文件，該文件定義 ToDo 模型
• src\models\index.js 引入 Todo 模型。
• package.json 新增腳本命令

使用 Amplify 庫

vue 項目安裝 Amplify

Dockerfile

yarn add

配置使用 Amplify

打開 myapp 項目，找到 main,js，官方推薦加入下面幾行代碼。
CoffeeScript

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

Amplify.configure(awsconfig)

請注意，上面的代碼目前已經(jīng)不適用。在實際實踐過程中，配置使用之后，使用yarn serve啟動項目，控制臺會出現(xiàn)warning

通過查看 Amazon-amplify 源碼發(fā)現(xiàn)，在 Amazon-amplify 是通過命名導出的方式導出 Amplify。

所以我們的代碼需要修改成：
JavaScript

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

Amplify.configure(awsconfig)

使用 Amplify DataStore 在本地測試 CRUD API

測試新增接口

新增 ToDo 頁面

因為本文主要是講解如何使用 Amazon 來構(gòu)架部署全棧應用，所以編寫代碼，我們簡單帶過！在 components 增加 src\components\ToDo.vue 文件，APP.vue 中引入并使用 import ToDo from './components/ToDo.vue'。
JavaScript

newTodo:
    name: "",
   
description: "",
   
isCompleted: 0,
   
isDelete: 0,
},
HTML
<div class="d-flex mb-5">
      <input
       
v-model="newTodo.name"
        type="text"
       
placeholder="請?zhí)顚懘k名稱"
        class="form-control form-input me-3"
      />
       <input
       
v-model="newTodo.description"
        type="text"
       
placeholder="請?zhí)顚懘k明細"
        class="form-control form-input me-3"
      />
     
<button type="submit"
class="submit-btn"
@click="addTodo()">
        新增代辦
     
</button>
   
</div>

DataStore .save()

然后我們在新增代辦按鈕，添加 addToDo 事件，并調(diào)用DataStore.save 方法保存數(shù)據(jù)引入 DataStore 和 To 模型。

JavaScript

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

在 addToDo 中調(diào)用 DataStore .save()
這里 isCompleted 和 isDeleted 使用默認值。
JavaScript

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

添加數(shù)據(jù)，點擊新增按鈕。查看控制臺輸出的結(jié)果，調(diào)用接口成功！

測試查詢列表接口

JavaScript

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

在 mounted 生命周期調(diào)用。

JavaScript

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

在新增之后調(diào)用。
JavaScipt

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

總結(jié)

定義好模型之后，Amazon Amplify 會自動根據(jù)模型結(jié)構(gòu)，生成增刪改查代碼。因為篇幅的問題，這里只測試了兩個接口。

發(fā)布到 Amazon

進入到發(fā)布階段，此時需要你有 Amazon 賬號。如果已經(jīng)有賬號，請選擇

這里默認新用戶，還沒有注冊賬號。點擊

賬號注冊流程

根用戶與郵箱

填寫電子郵箱以及用戶名，然后驗證電子郵件地址！

驗證碼

填寫驗證碼進入下一步！

根用戶密碼

聯(lián)系人信息

銀行卡號

銀行卡號最好是國內(nèi)的銀行卡，我用的是江蘇銀行的信用卡?？赡苡械你y行不支持。

確認身份

是否付費

這里選擇免費就可以啦！

正式發(fā)布

注冊成功之后，會跳到第二步，

此時點擊

。進入發(fā)布流程。

填寫信息

填寫 APP 名稱，選擇部署區(qū)域，也就是服務(wù)器所在的位置。填寫完成，點擊

，等待系統(tǒng)自動跳轉(zhuǎn)！

后端自動部署

后端代碼 Amazon Amplify 會自動部署，不需要人為干預。

前端

打包

在 muyapp 目錄下執(zhí)行，build 命令，會在 myapp 目錄下，自動生成 dist 文件，這里存放的就是我們的打包后的代碼。
Nginx

yarn build

上傳代碼

Amazon Amplify 默認打開的是后臺窗口，點擊 Hosting environments 切換到前臺部署頁面。這里我們并沒有用到倉庫，我們直接選擇最后一個。

系統(tǒng)跳轉(zhuǎn)到上傳文件頁面，我們需要填寫一個環(huán)境的名稱，例如 dev、 test、 prod 等等.然后將 dist 文件夾拖拽上傳。

點擊 save and deploy，Amazon Amplify 開始部署前端代碼。部署完成之后會生成一個網(wǎng)址，點擊訪問。網(wǎng)站訪問正常！

測試

總結(jié)

Amazon Amplify 是 Amplify Studio、Amplify 庫、Amplify CLI、Amplify 托管工具合集?？梢钥梢暬臉?gòu)建和部署 web 和 app 應用程序。通過定義模型，Amazon Amplify 會自動生成對應的后端代碼，包括增刪改查。本地通過 Amplify CLI 連接后臺，可以方便訪問接口。僅僅通過拖拽上傳打包后的前臺文件，就可以快速部署前臺項目，而后臺項目 Amazon Amplify 會自動部署，無需人工干預！作為一個程序員，真的推薦使用亞馬遜云。亞馬遜云科技專為開發(fā)者們打造了多種學習平臺：

1. 入門資源中心：從0到1 輕松上手云服務(wù)，內(nèi)容涵蓋：成本管理，上手訓練，開發(fā)資源。??https://aws.amazon.com/cn/getting-started/??
2. 架構(gòu)中心：亞馬遜云科技架構(gòu)中心提供了云平臺參考架構(gòu)圖表、經(jīng)過審查的架構(gòu)解決方案、Well-Architected 最佳實踐、模式、圖標等。??https://aws.amazon.com/cn/architecture/??
3. 構(gòu)建者庫：了解亞馬遜云科技如何構(gòu)建和運營軟件。??https://aws.amazon.com/cn/builders-library/??
4. 用于在亞馬遜云科技平臺上開發(fā)和管理應用程序的工具包：??https://aws.amazon.com/cn/tools/??

【專屬福利】

福利一：100余種產(chǎn)品免費套餐。其中，計算資源 Amazon EC2首年12個月免費，750小時/月；存儲資源 Amazon S3 首年12個月免費，5GB標準存儲容量。??https://aws.amazon.com/cn/free/??

福利二：最新優(yōu)惠大禮包，200$數(shù)據(jù)與分析抵扣券，200$機器學習抵扣券，200$微服務(wù)與應用開發(fā)抵扣券。??https://www.amazonaws.cn/campaign/??

福利三：解決方案 CloudFormation 一鍵部署模版庫??https://aws.amazon.com/cn/quickstart/??

原文來自亞馬遜云科技開發(fā)者文章：

??https://dev.amazoncloud.cn/column/articleDetail?id=63200547add61f4be9754a66??