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

MongoDB はデータストレージを担当します。
Express.js は、API を構築するための Node.js ウェブアプリケーションフレームワークです。
Angular は、クライアントサイドの JavaScript プラットフォームです。
Node.js はサーバーサイドの JavaScript ランタイム環境です。サーバーは MongoDB Node.js ドライバを使用してデータベースに接続し、データを取得して保存します。

作成するアプリの概要

MongoDB、Express JS、Angular JS、Node JS で、フルスタックの Employee-Job Role アプリケーションを作成します。これには以下のものが含まれます。

コンテナ化された 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 Serverless のインスタンスとデータベースを作成する

まず、Google Cloud での MongoDB Atlas の利用を開始します。

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

サーバーレスインスタンスがプロビジョニングされると、稼働していることを確認します。

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

[接続方法を選択] をクリックして続行します[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 ターミナルで [エディタを開く] をクリックします。

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 アイコンをクリックします。

次に、[Cloud Run にデプロイ] アイコンをクリックします。

サービス構成を次のように入力します。
サービス名: node-express-api
デプロイプラットフォーム: Cloud Run（フルマネージド）
リージョン: レイテンシを短縮するために、データベースリージョンに近いリージョンを選択します
認証: 未認証の呼び出しを許可する
[リビジョンの設定] で、[詳細設定を表示] をクリックして展開します。
コンテナポート: 5200
環境変数。次の Key-Value ペアを追加し、独自の MongoDB Atlas デプロイの接続文字列を必ず追加してください。

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

[Build 環境] で [Cloud Build] を選択する
最後に、[Build Settings] セクションで、以下を選択します。
ビルダー: Docker
Docker: mean-stack-example/server/Dockerfile
[デプロイ] ボタンをクリックし、[詳細なログを表示] をクリックして、最初の Cloud Run サービスのデプロイを実施します。
ビルドが完了すると、デプロイされたサービスの URL が表示されます。

URL を開いて「/employees」を追加します最後まで
現在、データベースにドキュメントがないため、空の配列が表示されます。

ユーザーインターフェースをデプロイして、いくつか追加してみましょう。

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

Angular アプリケーションは client ディレクトリにあります。これをデプロイするには、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 を構成して、クライアントアプリケーションが REST API にリクエストを送信できるようにする必要があります。プロジェクト内の 1 つのファイル内の URL のみを使用するため、URL をハードコードします。または、環境変数をウィンドウオブジェクトにアタッチし、そこからアクセスすることもできます。

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 インスタンスクラスタに移動します。
作成したクラスタ、インスタンスを選択します。
クラスタ名の横にある省略記号をクリックし、リストから [終了] を選択します。

Cloud Run の Deployment を削除する

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

9. 完了

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

MongoDB Atlas と Cloud Run でのサーバーレス MEAN スタック アプリケーション