MongoDB Atlas 和 Cloud Run 上的無伺服器 MEAN 堆疊應用程式

1. 簡介

在這篇文章中，我們將瞭解如何結合 Cloud Run 和 MongoDB，打造完全無伺服器的 MEAN 堆疊應用程式開發體驗。我們將瞭解如何使用 Cloud Run 和 MongoDB Atlas (MongoDB 的多雲端應用程式資料平台)，建構無伺服器 MEAN 應用程式。

什麼是 Cloud Run？

在全代管平台上，您可以使用 Cloud Run 建構及部署以任何語言 (包括 Go、Python、Java、Node.js、.NET 和 Ruby) 編寫的可擴充容器化應用程式。Cloud Run 的優勢在於：

將程式碼封裝在多個可感知要求的無狀態容器中，並透過 HTTP 要求叫用
只須支付實際使用的資源費用
支援您選擇的任何程式語言、作業系統程式庫或二進位檔

如要瞭解更多功能，請參閱這個連結。

使用 MongoDB Atlas 的無伺服器資料庫

為解決這個問題，MongoDB 在 Atlas 中推出無伺服器執行個體，這是全新的全代管無伺服器資料庫部署作業。使用無伺服器執行個體時，您完全不必考慮基礎架構，只要部署資料庫，系統就會根據需求順暢地擴充及縮減資源，完全不需要手動管理。最棒的是，系統只會向您收取執行的作業費用。為了讓架構真正無伺服器化，我們將結合 Cloud Run 和 MongoDB Atlas 的功能。

MEAN 堆疊

MEAN 堆疊是技術堆疊，可完全使用 JavaScript 和 JSON 建構全端網頁應用程式。MEAN 堆疊由四個主要元件組成：MongoDB、Express、Angular 和 Node.js。

MongoDB 負責儲存資料。
Express.js 是 Node.js 網頁應用程式架構，用於建構 API。
Angular 是用戶端 JavaScript 平台。
Node.js 是伺服器端 JavaScript 執行階段環境。伺服器會使用 MongoDB Node.js 驅動程式連線至資料庫，並擷取及儲存資料。

建構項目

您將使用 MongoDB、Express JS、Angular JS 和 Node JS，編寫全端員工職務應用程式。內容如下：

以 Node JS 和 Express JS 容器化的伺服器應用程式
以 AngularJS 建構的用戶端應用程式 (已容器化)
兩個應用程式都部署在 Cloud Run 中
伺服器應用程式會使用 MongoDB NodeJS 驅動程式連線至無伺服器 MongoDB 執行個體
伺服器 API 會與資料庫進行讀寫互動
用戶端應用程式是「員工 - 職位角色」應用程式的使用者介面

課程內容

如何建立無伺服器 MongoDB 執行個體
如何設定 Cloud Run 專案
如何在 Google Cloud Run 中部署網頁應用程式
如何建立及部署 MEAN Stack 應用程式

2. 需求條件

Chrome 或 Firefox 瀏覽器
包含 Cloud Run 和 MongoDB Atlas 執行個體的 Google Cloud Platform 專案
下一節列出建立 MEAN Stack 應用程式的步驟

3. 建立 MongoDB 無伺服器執行個體和資料庫

如要開始使用，請先瞭解 Google Cloud 上的 MongoDB Atlas。

註冊後，按一下「Build a Database」按鈕，即可建立新的無伺服器執行個體。選取下列設定：

無伺服器執行個體佈建完成後，您應該會看到執行個體已啟動並執行中

按一下「連線」按鈕，新增連線 IP 位址和資料庫使用者
在本程式碼研究室中，我們將使用「允許從任何位置存取」設定。MongoDB Atlas 隨附一系列安全防護和存取功能。詳情請參閱安全性功能說明文章
使用您選擇的資料庫使用者名稱和密碼憑證。完成這些步驟後，您應該會看到下列內容：

按一下「選擇連線方法」按鈕，然後選取「連結應用程式」，即可繼續操作

複製畫面上的連線字串，並將密碼替換為您自己的密碼。我們會在後續章節中使用該字串連線至資料庫

4. 設定 Cloud Run 專案

首先，請登入 Cloud 控制台，建立新專案或重複使用現有專案
記下您建立的專案 ID
下圖顯示新專案頁面，您可以在建立專案時查看專案 ID

接著，從 Cloud Shell 啟用 Cloud Run API：
從 Cloud 控制台啟動 Cloud Shell。只要按一下「啟用 Cloud Shell」即可
連至 Cloud Shell 後，您應該會看到驗證已完成，專案也已設為獲派的專案 ID。如果專案未設定，請發出下列指令：

gcloud config set project PROJECT_ID

使用下列指令：

gcloud services enable run.googleapis.com

我們會使用 Cloud Shell 和 Cloud Shell 編輯器做為程式碼參考。如要存取 Cloud Shell 編輯器，請在 Cloud Shell 終端機中按一下「Open Editor」：

5. 複製 MEAN Stack 專案

我們將部署員工管理網頁應用程式。REST API 是以 Express 和 Node.js 建構而成；網路介面則是以 Angular 建構而成；資料會儲存在我們稍早建立的 MongoDB Atlas 執行個體中
在 Cloud Shell 終端機中執行下列指令，複製專案存放區：

git clone https://github.com/mongodb-developer/mean-stack-example.git

6. 部署 Express 和 Node.js REST API

Docker 設定檔

首先，我們要為 Express REST API 部署 Cloud Run 服務。部署作業最重要的檔案是 Docker 設定檔。我們來看看：

mean-stack-example/server/Dockerfile

# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:17-slim
 
WORKDIR /usr/app
COPY ./ /usr/app
 
# Install dependencies and build the project.
RUN npm install
RUN npm run build
 
# Run the web service on container startup.
CMD ["node", "dist/server.js"]

這項設定會設定 Node.js，並複製及建構專案。容器啟動時，下列指令會啟動服務

node dist/server.js

如要開始新的 Cloud Run 部署作業，請按一下左側邊欄的 Cloud Run 圖示：

然後按一下「部署至 Cloud Run」圖示：

填寫服務設定，如下所示：
服務名稱：node-express-api
部署平台：Cloud Run (全代管)
區域：選取靠近資料庫區域的區域，以縮短延遲時間
驗證：允許未經驗證的叫用
在「修訂版本設定」下方，按一下「顯示進階設定」展開設定：
容器通訊埠：5200
環境變數。新增下列鍵/值組合，並確認您已為自己的 MongoDB Atlas 部署作業新增連線字串：

ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority

在「建構環境」中，選取「Cloud Build」
最後，在「Build Settings」部分中，選取：
建構工具：Docker
Docker：mean-stack-example/server/Dockerfile
按一下「Deploy」按鈕，然後按一下「Show Detailed Logs」，即可追蹤第一個 Cloud Run 服務的部署作業！
建構完成後，您應該會看到已部署服務的網址：

開啟網址，並在結尾附加「/employees」
您應該會看到空陣列，因為資料庫目前沒有任何文件。

讓我們部署使用者介面，以便新增一些項目！

7. 部署 Angular 網頁應用程式

我們的 Angular 應用程式位於用戶端目錄中。如要部署，我們會使用 Nginx 伺服器和 Docker。僅供參考，您也可以使用 Firebase 託管功能部署 Angular 應用程式，直接將內容提供給 CDN (內容傳遞聯播網)。

設定檔

讓我們來看看設定檔：

mean-stack-example/client/nginx.conf

events{}
 
http {
   include /etc/nginx/mime.types;
   server {
       listen 8080;
       server_name 0.0.0.0;
       root /usr/share/nginx/html;
       index index.html;
 
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
}

在 Nginx 設定中，我們指定了預設通訊埠 (8080) 和起始檔案 (index.html)

mean-stack-example/client/Dockerfile

FROM node:17-slim AS build
 
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
 
# Install dependencies and copy them to the container
RUN npm install
COPY . .
 
# Build the Angular application for production
RUN npm run build --prod
 
# Configure the nginx web server
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/client /usr/share/nginx/html
 
# Run the web service on container startup.
CMD ["nginx", "-g", "daemon off;"]

在 Docker 設定中，我們會安裝 Node.js 依附元件並建構專案。然後，我們會將建構的檔案複製到容器、設定並啟動 Nginx 服務
最後，我們需要設定 REST API 的網址，讓用戶端應用程式可以傳送要求。由於我們只會在專案中的單一檔案使用網址，因此會將網址硬式編碼。或者，您也可以將環境變數附加至視窗物件，並從該處存取。

mean-stack-example/client/src/app/employee.service.ts

...
@Injectable({
 providedIn: 'root'
})
export class EmployeeService {
 // Replace with the URL of your REST API
 private url = 'https://node-express-api-vsktparjta-uc.a.run.app'; 
...

我們已準備好部署至 Cloud Run！使用下列設定啟動新的部署作業：
```
  - Service Settings: Create a service
```
服務名稱：angular-web-app
部署平台：Cloud Run (全代管)
驗證：允許未經驗證的叫用
在「建構環境」中，選取「Cloud Build」
最後，在「Build Settings」部分中，選取：
建構工具：Docker
Docker：mean-stack-example/client/Dockerfile
再次點選「Deploy」按鈕，並在應用程式傳送至雲端時查看記錄！部署完成後，您應該會看到用戶端應用程式的網址

開啟網址，即可開始使用應用程式！

8. 清理

如要避免系統向您的 Google Cloud 帳戶收取本文章所用資源的費用，請按照下列步驟操作。

終止 MongoDB 執行個體

前往 MongoDB 執行個體叢集
選取您建立的叢集和執行個體
按一下叢集名稱旁的省略號，然後從清單中選取「終止」

刪除 Cloud Run 部署作業

前往 Google Cloud 控制台的 Cloud Run 頁面
選取要刪除的 Cloud Run 服務
按一下控制台頂端的「刪除」圖示

9. 恭喜

恭喜！您已成功在 Cloud Run 上建立 MEAN Stack 網頁應用程式！

MongoDB Atlas 和 Cloud Run 上的無伺服器 MEAN 堆疊應用程式 透過集合功能整理內容 你可以依據偏好儲存及分類內容。