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

1. 简介

在这篇博文中,我们将了解 Cloud Run 和 MongoDB 如何协同工作,以实现完全无服务器的 MEAN 堆栈应用开发体验。我们将学习如何使用 Cloud RunMongoDB 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 堆栈

平均堆栈是一种完全使用 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

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

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

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

83793a577f08e4d4

5. 克隆 MEAN 堆栈项目

  • 我们将部署一个员工管理 Web 应用。REST API 使用 Express 和 Node.js 构建;以及 Angular 等 Web 界面而数据存储在我们之前创建的 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

  • 然后,点击“部署到 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:means-stack-example/server/Dockerfile
  • 点击“部署”按钮,然后点击“显示详细日志”,即可跟踪您的第一个 Cloud Run 服务的部署情况!
  • 构建完成后,您应该会看到已部署服务的网址:

759c69ba52a85b10

  • 打开网址并附加“/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 应用!