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 の 4 つの主なコンポーネントで構成されています。

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 の使用を開始します。

登録が済んだら、[Build a Database] ボタンをクリックして、新規のサーバーレスインスタンスを作成します。次の構成を選択します。

サーバーレスインスタンスがプロビジョニングされると、起動して実行されていることがわかります。

[Connect] ボタンをクリックし、接続 IP アドレスとデータベースのユーザーを追加します。
この Codelab では、[Allow Access from Anywhere] 設定を使用します。MongoDB Atlas には、一連のセキュリティとアクセス機能が搭載されています。詳細については、セキュリティ機能のドキュメント記事をご覧ください。
データベースのユーザー名とパスワードには、任意の認証情報を使用してください。これらの手順が完了すると、次のようになります。

[Choose a connection method] ボタンをクリックし、[Connect your application] を選択して続行します。

表示された接続文字列をコピーし、ご自身のパスワードに置き換えます。文字列は、次のセクションでデータベースに接続する際に使用します。

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 スタックプロジェクトのクローンを作成する

従業員管理ウェブアプリケーションをデプロイします。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（フルマネージド）
リージョン: レイテンシを短縮するために、データベースのリージョンに近いリージョンを選択
認証: 未認証の呼び出しを許可する
[Revision Settings] で、[Show Advanced Settings] をクリックして展開します。
コンテナポート: 5200
環境変数。次の Key-Value ペアを追加します。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 サービスをデプロイします。
構築が完了すると、デプロイしたサービスの URL が表示されます。

URL を開き、末尾に「/employees」を追加します。
今のところはまだデータベースにドキュメントがないため、空の配列が表示されます。

では、ユーザーインターフェースをデプロイし、追加していきましょう。

7. Angular ウェブアプリケーションをデプロイする

Angular アプリケーションは、クライアントディレクトリにあります。デプロイするためには、Nginx サーバーと Docker を使用します。> また、CDN（コンテンツ配信ネットワーク）に直接、コンテンツを提供できるので、Angular アプリケーションデプロイに Firebase Hosting を使用するという選択肢もあります。

構成ファイル

それでは、構成ファイルを確認していきます。

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 の URL を構成する必要があります。プロジェクト内の単一のファイルのみで URL を使用しているため、URL をハードコードします。別の方法としては、環境変数を 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
もう一度、[Deploy] ボタンをクリックし、アプリがクラウドに送られたことをログで確認します。デプロイが完了したら、クライアントアプリに URL が表示されます。

URL を開き、アプリケーションを操作してみましょう。

8. クリーンアップ

この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順に従います。

MongoDB インスタンスを終了する

MongoDB インスタンスクラスタに移動します。
作成したクラスタ、インスタンスを選択します。
クラスタ名の横にある省略記号をクリックし、リストから [Terminate] を選択します。

Cloud Run デプロイを削除する

Google Cloud コンソールの [Cloud Run ページ] に移動します。
削除する Cloud Run サービスを選択します。
コンソールの上部にある削除アイコンをクリックします。

9. 完了

お疲れさまでした。Cloud Run で MEAN スタックウェブアプリケーションを作成できました。

MongoDB Atlas と Cloud Run でのサーバーレス MEAN スタック アプリケーション コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。