Deploy and Run an Interactive Roadmap Web App on Alibaba Cloud

0.0.201

Overview

This solution deploys and runs a social web app based on Next.js and MongoDB. This app was designed based on the original project https://github.com/hoangvvo/nextjs-mongodb-app, with modifications and customization to make it work on Alibaba Cloud ECS and MongoDB.

Reference Architecture

Steps

Deploy Resources

Use this main.tf file in Terraform to provision ECS, EIP, and ApsaraDB for MongoDB instances from this solution.

Go to the Alibaba Cloud ECS console and MongoDB console to see the instances you just created.

Set up Node.js and Other Basic Components on ECS

1. Copy the public IP address of the "mongodb-tech" instance just created, and log in remotely via SSH:
ssh root@ECS_EIP

The default account name and password of the ECS instance are:
Account name: root
Password: Aliyuntest123

2. Download the Node.js installation package:
wget https://labex-ali-data.oss-us-west-1.aliyuncs.com/nodejs/node-v16.9.1-linux-x64.tar.xz

3. Decompress the installation package:
tar xf node-v16.9.1-linux-x64.tar.xz

4. Move the decompressed directory to the /usr/local directory:
mv node-v16.9.1-linux-x64 /usr/local/node

5. Run the vim /etc/profile command to open the environment variable configuration file. Add the following content to the end of the file:

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

6. Activate the modifications:
source /etc/profile

7. Run the following command. You can see the corresponding service version, which indicates that the installation is completed:

node -v
  npm -v

Build and Deploy the Web App

1. Install Git:
apt update && apt -y install git

2. Create a projects directory and go to this directory:
mkdir projects && cd projects

3. Download the sample project:

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

4. Enter the sample project directory:
cd nextjs-mongodb-app

5. Install the Next.js framework dependency package:
npm install next react react-dom

6. Copy an ".env" configuration file first: cp .env.example .env

7. Run the command vim .env to open the ".env" configuration file, and modify the connection address of MongoDB.

8. Start the project:
npm run dev

9. Visit the public IP address of the current ECS in a web browser, and you can see that the project has been installed successfully.

10. Install PM2 to start or manage the lifecycle of the Node.js web app. First, enter Ctrl + C to stop the web app process started by executing npm run dev beforehand. Then, run the following command to install PM2 and start the web app:

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

11. Visit the public IP address of the current ECS with port 3000 again in the browser. You can see the project has been started by PM2 successfully.

Install Mongoku on ECS to Manage Data on MongoDB

1. Install the open-source MongoDB Web Admin tool Mongoku on ECS to manage data on MongoDB:

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

2. Visit http://ECS_EIP:3100 again in the web browser to visit the Mongoku Web Admin. Mongoku uses port 3100 for the web app by default.
You can add the MongoDB connection URI as the server to navigate and manage the data for this social web app via Mongoku.

Quick Start

Quick Start—Terraform Template for Initializing Resources

Deployment Guide

Related Products

Elastic Compute Service Elastic IP Address ApsaraDB for MongoDB

Database Migration Solution

Migrate to fully managed cloud databases.

Learn More >

Reach Alibaba Cloud experts for support