0%

Full Stack Serverless

發表於 更新於 分類於 ，

人們通常將雲計算與後端(backend)開發和開發與維運(DevOps)相關聯。但是，在過去幾年中，這種情況已經開始改變。隨著功能即服務(functions as a service, FaaS)的興起以及強大抽象式的託管服務，雲提供商降低了雲計算新手和傳統前端開發人員的進入門檻。

使用現代工具、框架和服務，例如 Amazon Web Services（AWS）Amplify 和 Firebase 等，獨立的開發人員可以利用他們現有的技能，以及對單個框架和生態系統(例如 JavaScript)的知識，來構建過去需要技術熟練的後端團隊和 DevOps 工程師團隊來構建和維護的全棧應用程序，而無須擔心伺服器的問題。

現代的無伺服器概念

Serverless 通常與 FaaS 相關聯。儘管您會對其含義有所不同的定義，但該術語最近已包含更多的意義而不只是共享的定義。

很多時候，人們談論無伺服器時，他們實際上是在描述如何最有效地編寫業務邏輯以呈現業務的價值。重點是編寫業務邏輯，而不是為編寫業務邏輯而必須建構和維護的基礎設施。採用 FaaS 的思維，您可以快速有效的做到這一點。 你不需要其他的託管服務和一些抽象化的思維，也可以構建自定義的解決方案。

越來越多的公司和開發人員正在採用這種方法，隨著這種哲學的日益普及，初創企業和雲提供商可以使用提供的服務和工具來提供簡化後端複雜性的產品和服務。

對於無伺服器在學術研究中認為這是一種 “簡化的雲編程”:

雖然雲將功能打包為 FaaS(功能即服務)，代表了無伺服器計算的核心，但雲平台還提供了專門的無伺服器框架，可像 BaaS(後端即服務)一樣滿足特定的應用需求。 簡單地說，無伺服器計算 = FaaS + BaaS。

後端即服務(BaaS)通常是指託管服務，例如資料庫(Firestore，Amazon DynamoDB)、身份驗證服務(Auth0，Amanzon Cognito)和人工智能服務(Amanzon Relognition，Amazon Comprehend)等託管服務。在學術的研究中重新定義了無伺服器的含義，這突顯了隨著雲提供商開始構建更多，管理更好的服務。這種無伺服器的思維正在蓬勃的發生中。

無伺服器應用程序的特徵

  • 降低運營責任
    使用 FaaS，您唯一需要擔心的是代碼中的函式是否正確的運行。不再需要負責伺服器的所有修補，更新，維護和升級。
  • 大量使用託管服務

無伺服器架構的好處

  • 可擴展性
    您不必擔心你的應用程序突然湧入了大量的新用戶，雲提供商將為您處理此事。
  • 成本
    使用無伺服器技術，您只需為使用的東西付費。使用 FaaS，將根據對功能的請求數，執行功能代碼所花費的時間以及每個功能使用的記憶體來向您收費。
  • 開發速度
    開發人員只需構建較少的功能，提高工作效率。開發人員不必費心在大多數應用程序所需的典型功能類型，例如，資料庫，身份驗證，存儲和 API，可以快速專注於編寫要交付的核心功能和業務邏輯。
  • 實驗與測試
    如果您沒有花大量的時間構建一些典型所需的重複功能，就可以低風險輕鬆地進行實驗及測試。
  • 安全穩定
    你所使用的核心服務是由雲提供商所提供，所以通常比您自己建立的更加穩定和安全。
  • 更少的代碼
    代碼是一種責任。有價值的是代碼提供的功能，而不是代碼本身。當您找到實現這些功能的方法，同時限制了您需要維護的代碼量，甚至完全取消了代碼時，您就可以降低應用程序的整體複雜性。複雜性降低，錯誤減少，新工程師更容易上手，維護和添加新功能的人員的總體負載也更少。開發人員可以專注於功能的實現，而無需了解實際的後端運作，並且幾乎不需要編寫後端代碼。

不同的無伺服器的實現

  • Serverless Framework

    最早與最受歡迎的的無伺務器框架 Severless Framework，是一個免費開放源代碼框架，於2015年10月以 JAWS 的名稱啟動，使用 Node.js 編寫。最初，這個框架僅支援 AWS，但隨後又增加了對 Google 和 Microsoft Azure 等雲提供商的支援。

    Serverless Framework 利用配置文件，CLI 和功能代碼的組合，為希望從本地環境將無伺服器功能和其他 AWS 服務部署到雲的人們提供良好的體驗。要使用此框架可能會有一些陡峭的學習曲線，特別是對於不熟悉雲計算的開發人員而言，有很多術語需要學習，還有很多知識需要理解雲服務如何工作，以便構建不僅僅是 “Hello World” 的應用程序。

    總體而言，如果您某種程度上了解除了 AWS 之外的雲提供商的能力，那麼 Serverless Framework 是一個不錯的選擇。

  • The AWS Serverless Application Model

    AWS Serverless Applicaton Model(AWS SAM) 是一個開源框架，於2016年11月18日發布，由 AWS 和社區構建和維護。 該框架僅支援 AWS。

    SAM 允許您透過在 YAML 文件中定義無伺務器應用程序所需的 API Gateway APIs，AWS Lambda 函式和 Amazon DynamoDB 來構建無伺服器應用程序。它結合使用 YAML 配置和功能代碼以及 CLI 來創建、管理和部署無伺務器應用程序。

  • Amplify Framework

    Amplify Framework 是四項內容的組合：CLI、客戶端程式庫、工具鍊和 Web 託管平台。Amplify 的目的是為開發人員提供一種簡便的方法來構建和部署利用雲的全棧 Web 和移動應用程序。它不僅啟用無伺務器功能和身份驗證等功能，而且還啟用 GraphQL API、機器學習(ML)、存儲、分析、推送通知等功能。

    Amplify 消除了 AWS 的新手可能不熟悉的術語，使用類別名稱方法來引用服務，從而提供了一個輕鬆進入雲的切入點。它不是將身份驗證服務稱為 Amazon Cognito，而是稱為 auth，避免新手搞得一頭霧水。

Full Stack Serverless on AWS

Full stack serverless 旨在為開發人員提供前、後兩端全棧所需的一切，以實現他們盡快構建應用程序的目標。在這裡，我們將使用 AWS 工具和服務以這種方式構建應用程序。

Amplify CLI

如果您剛開始使用 AWS，那麼大量的服務可能會讓你卻步。除了要識別許多服務之外，每個服務通常都有自己的陡峭的學習曲線。為了緩解這種情況，AWS 創建了 Amplify CLI。

Amplify CLI 為希望在 AWS 上構建應用程序的開發人員提供了一個簡單的入口點。 CLI 允許開發人員直接從其前端環境創建、配置、更新和刪除雲服務。

CLI 使用諸如 storage(Amazon S3)、auth(Amazon Cognito)和 analytics(Amazon Pinpoint)之類的名稱為您提供了一種了解服務實際功能的方法，而不僅僅是提供讓人迷惑的服務名稱。

Amplify client

構建全棧應用程序需要客戶端工具和後端服務的結合。過去，與 AWS 服務互動的主要方式是使用 AWS 軟件開發套件(SDK)，例如 Java、.NET、Node.js、和 Python。 這些 SDK 運作良好，但沒有一個特別適合客戶端開發。在 Amplify 之前，還沒有使用 AWS 構建客戶端應用程序的簡單方法。如果查看 AWS Node.js SDK 的文件，您會了解到，這是一條陡峭的學習曲線。

Amplify 客戶端是一個程式庫，專門為需要與 AWS 服務互動的 JavaScript 應用程序提供了易於使用的 API。 Amplify 還提供用於 React Native、iOS 和 Addroid 的客戶端 SDK。

Amplify 還為流行的前端和移動框架提供 UI 組件，包括 React、React Native、Vue、Angular、Ionic、Android 和 iOS。

Amplify Framework 不支持整套 AWS 服務。相反的，它支持要開發無伺務器類型的應用程序所需要的服務。使用 Amplify，為與 EC2 的互動提供支援並沒有多大意義，但為 REST 和 GraphQL API 提供支援則會比較實際。

AWS AppSync

AWS AppSync 是使用 GraphQL 的託管 API 層，使應用程序易於與任何數據源，REST API 或微服務進行互動。

API 層是應用程序最重要的部分之一。現代應用程序通常與大量後端服務和 API 進行互動。諸如資料庫、託管服務、第三方 API 和存儲解決方案之類的東西。

微服務架構是使用模塊化組件或服務組合構建的大型應用程序的常用術語。大多數服務和 API 都有不同的實現細節，這在您使用微服務體系結構時會帶來一些挑戰。這導致不一致的代碼，有時甚至是混亂的代碼，以及對這些 API 發出請求的前端開發人員的認知負荷。

使用微服務體系結構的一種好方法是提供一個一致的 API 層，該 API 層將接收所有請求並將其轉發到後端服務。這為你的客戶提供了一個一致的互動層，從而使您的前端開發更加輕鬆。

GraphQL 為創建 API 提供了特別好的抽象層。 GraphQL 引入了一種定義和一致的規範，透過三種操作形式與 API 進行互動：queries(讀取)、mutations(寫入/更新)和 subscriptions(實時數據 real-time data)。這些操作被定義為主要模式的一部分，該主要模式還以 GraphQL 提示的形式提供了客戶端和伺務器之間的協定。GraphQL 操作未綁定到任何特定的數據源，因此，作為開發人員，您可以自由地使用它們與資料庫、HTTP 端點、微服務、甚至是無伺服器功能中的任何內容進行互動。

通常，在構建 GraphQL API 時，您需要處理構建，部署維護和配置自己的 API 的問題。借助 AWS AppSync，您可以卸載伺服器和 API 管理以及使用 AWS 的安全性機制。

現代應用程序通常還涉及 real-time 和 offline 等問題。 AppSync 的另一個好處是，它具有對 offline(Amplify client)和 real time(GraphQL subscriptions)的內建支援，以使開發人員能夠構建這些類型的應用程序。

初步認識 AWS Amplify CLI

安裝和設定 Amplify CLI

要使用 Amplify CLI，首先需要安裝 Node.js 10 以上的版本，以及 npm 5 以上的版本。也可以選擇使用 yarn。　

當然也需要一個 AWS 帳戶，你可以選擇從免費的帳戶開始，會要求綁定信用卡，註冊費 1 美元。當你沒有用超過免費的額度，不會收取任何費用。在私人的一般學習的專案應該都不會超過免費的額度。

首先安裝 Amplify CLI:

$ npm install -g @aws-amplify/cli

安裝 CLI 後，我們將會使用 Amplify CLI 與 AWS 服務互動，這需要用戶憑證。我們不會使用註冊的 AWS 帳戶來連結 AWS 服務，這個註冊的 AWS 帳戶只用來付帳單或登入 AWS 管理用。程式、API 等與 AWS 服務的互動我們要使用 IAM (identify and access management) user。所以我們首先需要使用 IAM 用戶來設定 Amplify CLI。這將會使用一組用戶憑據（accesss key ID 和 secret access key）來設定 CLI。 使用這些憑證，您將能夠直接從 CLI 使用這個 IAM 用戶創建 AWS 服務。

要創建 IAM 新用戶並設定 CLI，要執行 configure 指令：

$ amplify configure

這將引導你完成以下步驟:

  1. 指定 AWS 區域
    您可以選擇要在那區域個創建 IAM 用戶(以及與此用戶相關聯的服務)。選擇離您最近的區域或你偏好的區域。
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

這會開啟瀏覽器要求你登入 AWS:

回到 CLI 操作畫面，按 Enter 繼續，選擇 AWS 區域，這裡我選擇使用 ap-southeast-1 位於新加坡：

Specify the AWS Region
? region: 
  eu-central-1
  ap-northeast-1
  ap-northeast-2
> ap-southeast-1
  ap-southeast-2
  ap-south-1
  ca-central-1
(Move up and down to reveal more choices)

  1. 指定 IAM 用戶名

    該名稱將是您的 AWS 帳戶中創建的 IAM 用戶。我建議你使用一個稍後在引用時可以識別的名稱，例如 amplify-cli-ap-southeast-1-user 或 mycompany-cli-admin。

Specify the username of the new IAM user:
? user name:  pec-amplify-cli-admin

輸入名稱後，CLI 將打開 AWS IAM dashboard。我們可以在這個 dashboard 建立 IAM 用戶。

IAM 用戶的權限全都透過 Groups 群組設定，所以首先先建立一個群組：

這裡我建立一個 admin 群組，權限選擇 AdministratorAccess。剛開始，所以給較大的權限，有經驗後再來建立其他的群組與權限。

現在創建 IAM 用戶。Access type 勾選 Programmatic access。

你可以透過單擊 Next 接受 Permissions、Tags、Reviews 等預設值並創建 IAM 用戶。在下一個畫面中，將會提供 IAM 用戶憑據：Access key ID 和 Secret access key。

返回 CLI 操作畫面，複製貼上 access key ID 和 secret access key。

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

現在，您已經成功設定了 CLI，可以開始創建新服務了。

初始化第一個 Amplify 專案

現在已經安裝和設定了 CLI，可以開始創建第一個專案。在接下來序列的範例中，客戶端我都會使用 React 架構，API 則會使用 GraphQL。

之前在 Oracle APEX 中學習到的 React 技術正好可以用在這裡。你也可以學習到創建一個 React 所使用的工具以及如何部署。

所以這裡我們將從初始化一個新的 React 專案開始：

npx create-react-app first-amplify-app

我則習慣使用 yarn: 

yarn create react-app first-amplify-app

創建 React 專案後，切換到所產生的專案目錄。

cd first-amplify-app

你可以瀏覽一下 React 專案目錄的結構。

現在啟動 React 專案應用程序開發伺服器，看看初始專案是甚麼樣子。

npm start

或用 yarn:

yarn start

React 專案初始畫面:

關掉 React 應用程序開發伺服器。

現在，需要在 React 客戶端上安裝 Amplify。我們將安裝 AWS Amplify 程式庫與適用於 React 特定 UI 組件的 AWS Amplify React 程式庫。

yarn add aws-amplify @aws-amplify/ui-react

接下來，你可以創建一個 Amplify 專案。 執行 init 命令初始化 Amplify 專案：

amplify init

這將引導您完成以下步驟：

  1. Enter a name for the project.
    這將是專案的本地名稱，通常是用來描述專案是什麼或做什麼的。

  2. Enter a name for the environment.
    這將是您將要使用的初始環境的參考。典型環境可能是諸如 dev、local 或 prod 之類的，但可以是對你有意義的任何名稱。

  3. Choose your default editor.
    這將設置您的編輯器。 CLI 稍後將使用此編輯器打開專案中的文件。

  4. Choose the type of app that you’re building.
    如果你使用 JavaScript，這將確定 CLI 是否應配置、構建和運行命令。在此範例中，選擇 javascript。

  5. What JavaScript framework are you using?
    這將確定一些基本的構建和啟動命令。對於此範例，請選擇 react。

  6. Source Directory Path.
    這使您可以設置源代碼所在的目錄。對於此範例，請選擇 src。

  7. Distribution Directory Path.
    對於 Web 專案，這將是包含編譯的 JavaScript 源代碼以及你的 favicon 圖標、HTML、和 CSS 文檔的文件夾。對於此範例，選擇 build。

  8. Build Command.
    這指定用於編譯和捆綁 JavaScript 代碼的命令。 對於此範例，請使用 npm run-script build。

  9. Start Command.
    這指定在本地端啟動應用程序開發伺服器的命令。對於此範例，請使用 npm run-script start。

  10. Do you want to use an AWS profile
    在這裡，選擇 Y，然後選擇你先前用 amplify configure 設定的的 AWS profile。

這是這個範例初始化的過程：

? Enter a name for the project firstamplifyapp
? Enter a name for the environment local
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm.cmd run-script build  
? Start Command: npm.cmd run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

現在，Amplify CLI 將初始化您的新 Amplify 專案。初始化完成後，將會在專案中為您創建兩個資源： 位於 src 目錄中的 aws-exports 的文件檔和位於專案根目錄中的名為 amplify 的文件夾。

  • aws-exports
    aws-exports 文件是 CLI 根據憑據所建立的 key-value 鍵值對資源類別。

  • amplify 目錄
    此文件夾包含 Amplify 專案的所有代碼和配置文件。 在此文件夾中，您將看到兩個子文件夾： backend 和 #current-cloud-backend

    • backend 目錄
      此文件夾包含專案的所有本地代碼，例如 AppSync API 的 GraphQL schema，任何無伺服器功能的源代碼以及 Amplify 專案當前本地狀態的代碼的基礎結構。

    • #current-cloud-backend 目錄
      該文件夾保存的代碼和配置反映了最後一個 Amplify push 命令在雲中部署了哪些資源。它可幫助 CLI 區分雲中已配置的資源配置和本地 backend 目錄中的當前配置有甚麼不同(反映本地端的更改)。

現在，您已經初始化了專案，你可以添加第一個雲服務：身份驗證 (authentication)。

創建和部署雲服務

要創建新服務，可以使用 Amplify 的 add 命令：

amplify add auth

這將引導您完成以下步驟：

  1. Do you want to use the default authentication and security configuration?
    這使您可以選擇使用預設的配置（sign-up 使用 MFA，sign-in 使用 password）創建身份驗證服務(authentication service)、或使用 social providers 創建身份驗證配置、或者創建完全自定義的身份驗證配置。 對於此範例，請選擇 Default configuration。

    MFA
    多重要素驗證(Multi-factor authentication，縮寫為 MFA)，又譯多因子認證、多因素驗證、多因素認證，是一種電腦存取控制的方法，用戶要通過兩種以上的認證機制之後，才能得到授權，使用電腦資源。

  2. How do you want users to be able to sign in?
    這將允許您指定所需的 sign-in 屬性。 對於此範例，選擇預設值 Username。

  3. Do you want to configure advanced settings?
    這將使您逐步設置一些更高階的認證，例如其他的 sign-up 屬性和 Lambda 觸發器。在此範例中，您不需要任何這些，因此請選擇 No, I am done. 接受預設的設置。

    現在，您已經成功配置了身份驗證服務，現在可以進行部署了。 要部署身份驗證服務，可以執行 push 命令：

    amplify push
  1. Are you sure you want to continue?
    選擇 Y。

部署完成後，您的身份驗證服務已成功創建。 恭喜，您已經部署了第一個功能。 現在，讓我們對其進行測試。

在 React 應用程序中有幾種與身份驗證服務互動的方法。你可以使用 Amplify 中的 Auth class，該類具有 30 多種可用方法，諸如 signUp、signIn、signOut 等方法。也可以使用特定的框架組件，例如 withAuthenticator 來構建完整的身份驗證流程，包括預配置的用戶界面。讓我們試用 withAuthenticator 高階(HOC higher-order)組件。

首先，在 React 應用程序中配置 Amplify。 打開 src/index.js 並將以下代碼添加到最後一個 import 語句下面。

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

現在，該應用已配置完畢，您可以開始與身份驗證服務進行互動。打開 src/App.js 並使用以下代碼更新文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'

function App() {
  return (
    <div style={{ width: "500px", textAlign: "center", margin: "auto" }}>
      <h1>Hello Tainan, 台南!</h1>
      <AmplifySignOut />    
    </div>
  );
}

export default withAuthenticator(App);

現在，可以啟動應用程序進行測試：

yarn start

現在，你的應用程序已啟動了預配置的身份驗證流程: sign-up 使用 MFA，sign-in 使用 password。

使用 Create account 建立一個新帳戶:

MFA 身份驗證流程，你需要到你的 email 取得驗證碼。

輸入驗證碼 (Comfirmation code):

現在使用新的 User account sign-in:

刪除資源

如果單一的服務或專案已不再需要，可以使用 CLI 刪除它。

要刪除單一的功能，可以執行 remove 命令。

amplify remove auth

要刪除整個 Amplify 專案以及帳戶中已部署的所有相應資源，可以執行 delete 命令。

amplify delete

隨著越來越多的公司開始依靠雲來處理大量的工作負載，雲計算正急速的增長中。隨著使用量的增長，雲計算的技能應該要納入你的職能規畫中。

Serverless 無伺務器模式是雲計算的子集，它在企業用戶中也迅速流行，因為它提供了雲計算的所有優勢，同時還具有自動擴展功能，而幾乎不需要維護。

諸如 Amplify Framework 之類的工具使所有背景的開發人員都可以更輕鬆地啟動和運行雲以及無伺服器運算。接下來將要利用雲服務和 Amplify Framework 在雲中構建真實的全棧無伺服器應用程序。這將會使用 AWS 的 auth、API、storage 等服務。使用的架構將會包含 GraphQL 與 React。