Aplikasi MEAN Stack serverless di MongoDB Atlas dan Cloud Run

1. Pengantar

Dalam postingan ini,kita akan melihat bagaimana Cloud Run dan MongoDB bekerja sama untuk memungkinkan pengalaman pengembangan aplikasi MEAN stack yang sepenuhnya serverless. Kita akan mempelajari cara membuat aplikasi MEAN serverless dengan Cloud Run dan MongoDB Atlas, platform data aplikasi multi-cloud dari MongoDB.

Apa itu Cloud Run?

Cloud Run memungkinkan Anda membangun dan men-deploy aplikasi dalam container yang skalabel yang ditulis dalam bahasa apa pun (termasuk Go, Python, Java, Node.js, .NET, dan Ruby) pada platform yang terkelola sepenuhnya. Cloud Run unggul karena memungkinkan kita untuk:

Mengemas kode dalam beberapa container stateless yang mengetahui permintaan dan memanggilnya melalui permintaan HTTP
Hanya dikenai biaya untuk resource yang Anda gunakan
Mendukung bahasa pemrograman atau library sistem operasi pilihan Anda, atau biner apa pun

Buka link ini untuk mengetahui fitur selengkapnya dalam konteks penuh.

Database serverless dengan MongoDB Atlas

MongoDB meluncurkan instance serverless, yaitu deployment database serverless yang terkelola sepenuhnya di Atlas untuk mengatasi masalah ini. Dengan instance serverless, Anda tidak perlu memikirkan infrastruktur — cukup deploy database Anda dan database tersebut akan melakukan penskalaan ke atas dan ke bawah secara lancar berdasarkan permintaan — tanpa memerlukan pengelolaan langsung. Yang lebih bagus lagi, Anda hanya akan dikenai biaya untuk operasi yang Anda jalankan. Untuk membuat arsitektur kita benar-benar serverless, kita akan menggabungkan kemampuan Cloud Run dan MongoDB Atlas.

MEAN Stack

MEAN stack adalah stack teknologi untuk membangun aplikasi web stack lengkap sepenuhnya dengan JavaScript dan JSON. Stack MEAN terdiri dari empat komponen utama—MongoDB, Express, Angular, dan Node.js.

MongoDB bertanggung jawab atas penyimpanan data.
Express.js adalah framework aplikasi web Node.js untuk membangun API.
Angular adalah platform JavaScript sisi klien.
Node.js adalah lingkungan runtime JavaScript sisi server. Server menggunakan driver MongoDB Node.js untuk terhubung ke database serta mengambil dan menyimpan data.

Yang akan Anda build

Anda akan menulis aplikasi Employee-Job Role full stack di MongoDB, Express JS, Angular JS, dan Node JS. File tersebut berisi:

Aplikasi server di Node JS dan Express JS, dalam container
Aplikasi klien yang dibuat di AngularJS, dalam container
Kedua aplikasi di-deploy di Cloud Run
Aplikasi server terhubung ke instance MongoDB Serverless menggunakan driver MongoDB NodeJS
Server API melakukan interaksi baca-tulis dengan database
Aplikasi klien adalah antarmuka pengguna untuk aplikasi Employee-Job Role

Yang akan Anda pelajari

Cara membuat Instance MongoDB serverless
Cara menyiapkan project Cloud Run
Cara men-deploy aplikasi web di Google Cloud Run
Cara membuat dan men-deploy Aplikasi MEAN Stack

2. Persyaratan

Browser, seperti Chrome atau Firefox
Project Google Cloud Platform yang berisi instance Cloud Run dan MongoDB Atlas Anda
Bagian selanjutnya berisi daftar langkah-langkah untuk membuat aplikasi MEAN Stack

3. Membuat instance dan database MongoDB Serverless

Untuk memulai, mulai gunakan MongoDB Atlas di Google Cloud

Setelah mendaftar, klik tombol "Build a Database" untuk membuat instance serverless baru. Pilih konfigurasi berikut:

Setelah instance serverless Anda disediakan, Anda akan melihatnya berjalan

Klik tombol "Connect" untuk menambahkan alamat IP koneksi dan pengguna database
Untuk codelab ini, kita akan menggunakan setelan "Izinkan Akses dari Mana Saja". MongoDB Atlas dilengkapi dengan serangkaian fitur keamanan dan akses. Anda dapat mempelajari lebih lanjut fitur tersebut dalam artikel dokumentasi fitur keamanan
Gunakan kredensial pilihan Anda untuk nama pengguna dan sandi database. Setelah langkah-langkah ini selesai, Anda akan melihat hal berikut:

Lanjutkan dengan mengklik tombol "Pilih metode koneksi", lalu pilih "Hubungkan aplikasi Anda"

Salin string koneksi yang Anda lihat dan ganti sandi dengan sandi Anda sendiri. Kita akan menggunakan string tersebut untuk terhubung ke database di bagian berikutnya

4. Menyiapkan Project Cloud Run

Pertama, login ke Cloud Console, buat project baru, atau gunakan kembali project yang sudah ada
Ingat Project ID untuk project yang Anda buat
Di bawah ini adalah gambar yang menampilkan halaman project baru, tempat Anda dapat melihat ID project saat membuatnya

Kemudian, aktifkan Cloud Run API dari Cloud Shell:
Aktifkan Cloud Shell dari Konsol Cloud. Cukup klik Activate Cloud Shell
Setelah terhubung ke Cloud Shell, Anda akan melihat bahwa Anda sudah diautentikasi dan project sudah ditetapkan ke PROJECT ID Anda. Jika, untuk beberapa alasan, project belum disetel, cukup jalankan perintah berikut:

gcloud config set project PROJECT_ID

Gunakan perintah di bawah ini:

gcloud services enable run.googleapis.com

Kita akan menggunakan Cloud Shell dan Cloud Shell Editor untuk referensi kode. Untuk mengakses Cloud Shell Editor, klik Open Editor dari Cloud Shell Terminal:

5. Meng-clone Project MEAN Stack

Kita akan men-deploy aplikasi web pengelolaan karyawan. REST API dibangun dengan Express dan Node.js; antarmuka web, dengan Angular; dan data akan disimpan di instance MongoDB Atlas yang kita buat sebelumnya
Buat clone repositori project dengan menjalankan perintah berikut di Terminal Cloud Shell:

git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Men-deploy Express dan Node.js REST API

File Konfigurasi Docker

Pertama, kita akan men-deploy layanan Cloud Run untuk Express REST API. File terpenting untuk deployment kita adalah file konfigurasi Docker. Mari kita lihat:

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"]

Konfigurasi ini akan menyiapkan Node.js, serta menyalin dan membangun project. Saat container dimulai, perintah di bawah akan memulai layanan

node dist/server.js

Untuk memulai deployment Cloud Run baru, klik ikon Cloud Run di sidebar kiri:

Kemudian, klik ikon Deploy to Cloud Run:

Isi konfigurasi layanan sebagai berikut:
Nama layanan: node-express-api
Platform deployment: Cloud Run (terkelola sepenuhnya)
Region: Pilih region yang dekat dengan region database Anda untuk mengurangi latensi
Autentikasi: Izinkan pemanggilan tanpa autentikasi
Di bagian Setelan Revisi, klik Tampilkan Setelan Lanjutan untuk meluaskannya:
Port container: 5200
Variabel lingkungan. Tambahkan pasangan nilai kunci berikut dan pastikan Anda menambahkan string koneksi untuk deployment MongoDB Atlas Anda sendiri:

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

Untuk Lingkungan build, pilih Cloud Build
Terakhir, di bagian Setelan Build, pilih:
Builder: Docker
Docker: mean-stack-example/server/Dockerfile
Klik tombol Deploy, lalu Show Detailed Logs untuk mengikuti deployment layanan Cloud Run pertama Anda.
Setelah build selesai, Anda akan melihat URL layanan yang di-deploy:

Buka URL dan tambahkan ‘/employees' di bagian akhir
Anda akan melihat array kosong karena saat ini tidak ada dokumen di database.

Mari kita deploy antarmuka pengguna agar kita dapat menambahkan beberapa pengguna.

7. Men-deploy Aplikasi Web Angular

Aplikasi Angular kita berada di direktori klien. Untuk men-deploy-nya, kita akan menggunakan server Nginx dan Docker. Sebagai pertimbangan, ada juga opsi untuk menggunakan Firebase Hosting untuk deployment aplikasi Angular karena Anda dapat menayangkan konten langsung ke CDN (jaringan penayangan konten).

File Konfigurasi

Mari kita lihat file konfigurasi:

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;
       }
   }
}

Dalam konfigurasi Nginx, kita menentukan port default—8080, dan file awal—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;"]

Dalam konfigurasi Docker, kita menginstal dependensi Node.js dan membangun project. Kemudian, kita menyalin file yang dibuat ke container, mengonfigurasi, dan memulai layanan Nginx
Terakhir, kita perlu mengonfigurasi URL ke REST API agar aplikasi klien dapat mengirim permintaan ke API tersebut. Karena kita hanya menggunakan URL dalam satu file di project, kita akan meng-hard code URL. Atau, Anda dapat melampirkan variabel lingkungan ke objek jendela dan mengaksesnya dari sana.

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'; 
...

Kita siap men-deploy ke Cloud Run. Mulai deployment baru dengan setelan konfigurasi berikut:
```
  - Service Settings: Create a service
```
Nama layanan: angular-web-app
Platform deployment: Cloud Run (terkelola sepenuhnya)
Autentikasi: Izinkan pemanggilan tanpa autentikasi
Untuk Lingkungan build, pilih Cloud Build
Terakhir, di bagian Setelan Build, pilih:
Builder: Docker
Docker: mean-stack-example/client/Dockerfile
Klik tombol Deploy lagi dan lihat log saat aplikasi Anda dikirim ke cloud. Setelah deployment selesai, Anda akan melihat URL untuk aplikasi klien

Buka URL, dan coba aplikasi Anda.

8. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam posting ini, ikuti langkah-langkah berikut.

Menghentikan instance MongoDB

Buka cluster MongoDB Instance
Pilih cluster dan instance yang Anda buat
Klik elipsis di samping nama cluster, lalu pilih Terminate dari daftar

Menghapus Deployment Cloud Run

Buka halaman Cloud Run di Konsol Google Cloud
Pilih layanan Cloud Run yang ingin Anda hapus
Klik ikon hapus di bagian atas konsol

9. Selamat

Selamat, Anda telah berhasil membuat Aplikasi Web MEAN Stack di Cloud Run.

Aplikasi MEAN Stack serverless di MongoDB Atlas dan Cloud Run Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.