本頁面由 Cloud Translation API 翻譯而成。

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 是用於建構 API 的 Node.js 網頁應用程式架構。
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 堆疊應用程式

2. 需求條件

瀏覽器，例如 Chrome 或 Firefox
包含 Cloud Run 和 MongoDB Atlas 執行個體的 Google Cloud Platform 專案
下一節將提供建立 MEAN 堆疊應用程式的步驟清單

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

如要開始使用，請先在 Google Cloud 中使用 MongoDB Atlas

申請後，按一下 [建立資料庫]建立新的無伺服器執行個體。選取下列設定：

佈建了無伺服器執行個體之後，您應該就會看到執行個體正常運作

按一下「連線」新增連線 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 終端機中按一下「開啟編輯器」：

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」圖示：

接著，按一下「Deploy to 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

在「Build」環境中，選取 Cloud Build
最後，在「Build Settings」部分選取：
建構工具：Docker
Docker：average-stack-example/server/Dockerfile
按一下「部署」按鈕，然後點選「顯示詳細記錄檔」，即可追蹤您第一項 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，讓用戶端應用程式能向這個 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 (全代管)
驗證：允許未經驗證的叫用
在「Build」環境中，選取 Cloud Build
最後，在「Build Settings」部分選取：
建構工具：Docker
Docker：impl-stack-example/client/Dockerfile
再次按一下「Deploy」(部署) 按鈕，並查看應用程式傳送到雲端的記錄！部署完成後，您應該會看到用戶端應用程式的網址

開啟網址，開始使用您的應用程式！

8. 清除所用資源

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

終止 MongoDB 執行個體

前往 MongoDB 執行個體叢集
選取您建立的叢集、執行個體
按一下叢集名稱旁邊的刪節號，然後從清單中選取 [終止]

刪除 Cloud Run 部署作業

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

9. 恭喜

恭喜，您已成功在 Cloud Run 建立 MEAN 堆疊網頁應用程式！