Deploy and Run an Interactive Roadmap Web App on Alibaba Cloud

概要

このソリューションは、Next.js と MongoDB ベースのソーシャル Web アプリをデプロイして実行します。このアプリはオリジナルプロジェクト https://github.com/hoangvvo/nextjs-mongodb-app をベースに、Alibaba Cloud ECS および MongoDB で動作するように修正とカスタマイズを加えたものです。

リファレンスアーキテクチャ

手順

リソースのデプロイ

この main.tf ファイルを Terraform で使用して、このソリューションの ECS、EIP、および ApsaraDB for MongoDB のインスタンスをプロビジョニングします。

Alibaba Cloud の ECS コンソールと MongoDB コンソールにアクセスして、作成したインスタンスを確認してください。

ECS 上での Node.js とその他の基本コンポーネントのセットアップ

1. 作成したばかりの「mongodb-tech」インスタンスのパブリック IP アドレスをコピーし、SSH でログインします：
ssh root@ECS_EIP

ECS インスタンスのデフォルトのアカウント名とパスワードは以下のとおりです：
アカウント名：root
パスワード：Aliyuntest123

2. Node.js のインストールパッケージをダウンロードします：
wget https://labex-ali-data.oss-us-west-1.aliyuncs.com/nodejs/node-v16.9.1-linux-x64.tar.xz

3. インストールパッケージを解凍します：
tar xf node-v16.9.1-linux-x64.tar.xz

4. 解凍したディレクトリを /usr/local ディレクトリに移動します。
mv node-v16.9.1-linux-x64 /usr/local/node

5. vim /etc/profile コマンドを実行して、環境変数の設定ファイルを開きます。ファイルの末尾に下記の内容を追加します。

export NODE_HOME=/usr/local/node
 export PATH=$PATH:$NODE_HOME/bin

6. 変更を有効化します：
source /etc/profile

7. 下記のコマンドを実行します。各サービスのバージョンが表示され、インストールが完了したことを確認できます。

node -v
  npm -v

Web アプリのビルドとデプロイ

1. Git をインストールします。
apt update && apt -y install git

2. projects ディレクトリを作成し、そのディレクトリに移動します。
mkdir projects && cd projects

3. サンプルプロジェクトをダウンロードします。

git clone https://github.com/hoangvvo/nextjs-mongodb-app
ls

4. サンプルプロジェクトのディレクトリに移動します：
cd nextjs-mongodb-app

5. Next.js フレームワークの依存パッケージをインストールします：
npm install next react react-dom

6. あらかじめ ".env" 設定ファイルをコピーします。 cp .env.example .env

7. vim .env コマンドを実行して ".env" 設定ファイルを開き、MongoDB のエンドポイントを変更します。

8. プロジェクトを起動します。
npm run dev

9. ブラウザーで現在の ECS のパブリック IP アドレスにアクセスすると、プロジェクトが正常にインストールされたことを確認できます。

10. PM2 をインストールして、Node.js Web アプリのライフサイクルを管理します。まず Ctrl + C を押して、事前に npm run dev で起動した Web アプリのプロセスを停止します。その後、下記のコマンドで PM2 をインストールし、Web アプリを起動します。

npm i -g pm2
 npm run build
 pm2 start npm -- run start

11. ブラウザーで、ポート 3000 を指定して現在の ECS のパブリック IP アドレスに再度アクセスします。PM2 によりプロジェクトが正常に起動されたことを確認できます。

ECS に Mongoku をインストールして MongoDB のデータを管理

1. オープンソースの MongoDB Web 管理ツール Mongoku を ECS にインストールして、MongoDB のデータを管理します：

cd ~
 npm install -g mongoku
 mongoku start --pm2

2. Web ブラウザーで http://ECS_EIP:3100 に再度アクセスし、Mongoku Web 管理画面を開きます。Mongoku はデフォルトでポート 3100 を使用します。
Mongoku に MongoDB 接続 URI をサーバーとして追加し、このソーシャル Web アプリのデータを管理できます。