前言

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

Amazon Amplify 簡介

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

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

Amplify Studio 構建 Vue 全棧應用

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

三步走

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

1. 構建數據模型
2. 構建并測試應用程序
3. 發布到Amazon

選擇數據模型及開發語言

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

• Blog
• To-do List
• Blank Data model

定義數據模型

Amplify Studio 定義數據模型，主要有三步

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

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

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

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

本地構建以及測試

Amplify Studio 本地構建測試步驟分為4步：

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

使用 vue/cli 創建新 vue 項目

全局安裝腳手架

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

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

創建項目

打開命令行工具，執行下面命令。myapp 是項目名稱，也是創建的文件夾名稱。
Nginx

vue create myapp

如果 vue 腳手架是最新版的。需要選擇創建項目的 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的網絡下仍然安裝不成功。建議使用 npm 安裝：npm i -g @aws-amplify/cli
從項目的根文件夾下 運行以下命令 myapp：
Apache

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

命令執行結束之后，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)

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

通過查看 Amazon-amplify 源碼發現，在 Amazon-amplify 是通過命名導出的方式導出 Amplify。

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

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

Amplify.configure(awsconfig)

使用 Amplify DataStore 在本地測試 CRUD API

測試新增接口

新增 ToDo 頁面

因為本文主要是講解如何使用 Amazon 來構架部署全棧應用，所以編寫代碼，我們簡單帶過！在 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="請填寫代辦名稱"
        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>

DataStore .save()

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

JavaScript

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

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

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)
    },

添加數據，點擊新增按鈕。查看控制臺輸出的結果，調用接口成功！

測試查詢列表接口

JavaScript

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

在 mounted 生命周期調用。

JavaScript

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

在新增之后調用。
JavaScipt

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();
},

總結

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

發布到 Amazon

進入到發布階段，此時需要你有 Amazon 賬號。如果已經有賬號，請選擇

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

賬號注冊流程

根用戶與郵箱

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

驗證碼

填寫驗證碼進入下一步！

根用戶密碼

聯系人信息

銀行卡號

銀行卡號最好是國內的銀行卡，我用的是江蘇銀行的信用卡。可能有的銀行不支持。

確認身份

是否付費

這里選擇免費就可以啦！

正式發布

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

此時點擊

。進入發布流程。

填寫信息

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

，等待系統自動跳轉！

后端自動部署

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

前端

打包

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

yarn build

上傳代碼

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

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

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

測試

總結

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

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

【專屬福利】

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

福利二：最新優惠大禮包，200$數據與分析抵扣券，200$機器學習抵扣券，200$微服務與應用開發抵扣券。??https://www.amazonaws.cn/campaign/??

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

原文來自亞馬遜云科技開發者文章：

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