MongoDB Atlas 和 Cloud Run 上的无服务器 MEAN 堆栈应用

1. 简介

在这篇博文中,我们将了解 Cloud Run 和 MongoDB 如何结合使用,从而实现完全无服务器的 MEAN 堆栈应用开发体验。我们将学习如何使用 Cloud Run 和 MongoDB 的多云应用数据平台 MongoDB Atlas 构建无服务器 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 构建全栈 Web 应用。MEAN 堆栈由四个主要组件组成:MongoDB、Express、Angular 和 Node.js。

  • MongoDB 负责数据存储。
  • Express.js 是一个用于构建 API 的 Node.js Web 应用框架。
  • 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 中部署 Web 应用
  • 如何创建和部署 MEAN 堆栈应用

2. 要求

  • 一个浏览器,例如 ChromeFirefox
  • 包含 Cloud Run 和 MongoDB Atlas 实例的 Google Cloud Platform 项目
  • 下一部分列出了创建 MEAN Stack 应用的步骤

3. 创建 MongoDB Serverless 实例和数据库

e5cc775a49f2fb0.png

  • 注册后,点击“构建数据库”按钮以创建新的无服务器实例。选择以下配置:

fca10bf6f031af7a.png

  • 无服务器实例配置完毕后,您应该会看到它已启动并正在运行

d13c4b8bdd9569fd.png

  • 点击“连接”按钮,添加连接 IP 地址和数据库用户
  • 在此 Codelab 中,我们将使用“允许从任何位置访问”设置。MongoDB Atlas 随附一系列安全和访问权限功能。如需详细了解这些功能,请参阅安全功能文档文章
  • 为数据库用户名和密码使用您选择的凭据。完成这些步骤后,您应该会看到以下内容:

bffeef16de1d1cd2.png

  • 点击“选择连接方法”按钮,然后选择“关联您的应用”,继续操作

75771e64427acd5e.png

  • 复制您看到的连接字符串,并将密码替换为您自己的密码。我们将在后续部分中使用该字符串连接到数据库

4. 设置 Cloud Run 项目

  • 首先,登录 Cloud 控制台,然后创建一个新项目或重复使用现有项目
  • 记住您创建的项目的项目 ID
  • 下图显示了新项目页面,您可以在创建项目时看到项目 ID

f32dbd4eb2b7501e.png

  • 然后,在 Cloud Shell 中启用 Cloud Run API:
  • 从 Cloud 控制台激活 Cloud Shell。只需点击“激活 Cloud Shell”
  • 在连接到 Cloud Shell 后,您应该会看到自己已通过身份验证,并且相关项目已设置为您的项目 ID。如果出于某种原因未设置项目,只需发出以下命令即可:
gcloud config set project PROJECT_ID

3da173210a016316.png

  • 使用以下命令:
gcloud services enable run.googleapis.com
  • 我们将使用 Cloud Shell 和 Cloud Shell 编辑器来引用代码。如需访问 Cloud Shell 编辑器,请在 Cloud Shell 终端中点击“打开编辑器”:

83793a577f08e4d4.png

5. 克隆 MEAN 堆栈项目

  • 我们将部署一个员工管理 Web 应用。REST API 使用 Express 和 Node.js 构建;Web 界面使用 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 图标:

48c73bda3aa4ea02.png

  • 然后,点击“部署到 Cloud Run”图标:

cde124ba8ec23b34.png

  • 按如下所示填写服务配置:
  • 服务名称: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
  • 点击“部署”按钮,然后点击“显示详细日志”,即可跟踪第一个 Cloud Run 服务的部署情况!
  • 构建完成后,您应该会看到已部署服务的网址:

759c69ba52a85b10.png

  • 打开网址,并在末尾添加“/employees”
  • 您应该会看到一个空数组,因为目前数据库中没有任何文档。

我们先部署界面,以便添加一些内容!

7. 部署 Angular Web 应用

我们的 Angular 应用位于客户端目录中。为了部署它,我们将使用 Nginx 服务器和 Docker。只是一个想法,您还可以选择使用 Firebase Hosting 进行 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 的网址,以便客户端应用可以向其发送请求。由于我们仅在项目中的单个文件中使用该网址,因此我们将对该网址进行硬编码。或者,您也可以将环境变量附加到 window 对象,然后从该对象访问环境变量。

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
  • 再次点击该“部署”按钮,并观看日志,了解应用如何发布到云端!部署完成后,您应该会看到客户端应用的网址

5da1d7defc1082fc.png

  • 打开网址,然后开始使用您的应用!

db154f1cd57e38f0.png

8. 清理

为避免系统因本博文中使用的资源向您的 Google Cloud 账号收取费用,请按照以下步骤操作。

终止 MongoDB 实例

  1. 前往 MongoDB 实例集群
  2. 选择您创建的集群、实例
  3. 点击集群名称旁边的省略号,然后从列表中选择“终止”

删除 Cloud Run 部署

  1. 前往 Google Cloud 控制台中的 Cloud Run 页面
  2. 选择要删除的 Cloud Run 服务
  3. 点击控制台顶部的删除图标

9. 恭喜

恭喜,您已在 Cloud Run 上成功创建 MEAN Stack Web 应用!