Ứng dụng ngăn xếp MEAN không máy chủ trên MongoDB Atlas và Cloud Run

1. Giới thiệu

Trong bài đăng này,chúng ta sẽ xem cách Cloud Run và MongoDB kết hợp với nhau để mang đến trải nghiệm phát triển ứng dụng MEAN stack hoàn toàn không máy chủ. Chúng ta sẽ tìm hiểu cách tạo một ứng dụng MEAN không máy chủ bằng Cloud Run và MongoDB Atlas, nền tảng dữ liệu ứng dụng đa đám mây của MongoDB.

Cloud Run là gì?

Cloud Run cho phép bạn tạo và triển khai các ứng dụng vùng chứa có thể mở rộng, được viết bằng bất kỳ ngôn ngữ nào (bao gồm Go, Python, Java, Node.js, .NET và Ruby) trên một nền tảng được quản lý toàn diện. Cloud Run nổi bật so với các nền tảng khác bằng cách cho phép chúng ta:

Đóng gói mã trong nhiều vùng chứa không trạng thái, nhận biết yêu cầu và gọi mã đó thông qua các yêu cầu HTTP
Chỉ bị tính phí cho đúng những tài nguyên mà bạn sử dụng
Hỗ trợ mọi ngôn ngữ lập trình hoặc mọi thư viện hệ điều hành mà bạn chọn, hoặc mọi tệp nhị phân

Hãy xem đường liên kết này để biết thêm các tính năng trong bối cảnh đầy đủ.

Cơ sở dữ liệu không máy chủ với MongoDB Atlas

MongoDB đã ra mắt các thực thể không máy chủ, một bản triển khai cơ sở dữ liệu không máy chủ, được quản lý toàn diện mới trong Atlas để giải quyết vấn đề này. Với các thực thể không máy chủ, bạn không bao giờ phải lo lắng về cơ sở hạ tầng – chỉ cần triển khai cơ sở dữ liệu và cơ sở dữ liệu đó sẽ tự động mở rộng và thu hẹp dựa trên nhu cầu – không cần quản lý trực tiếp. Và điều tuyệt vời nhất là bạn sẽ chỉ bị tính phí cho các thao tác mà bạn chạy. Để kiến trúc của chúng ta thực sự không máy chủ, chúng ta sẽ kết hợp các tính năng của Cloud Run và MongoDB Atlas.

Ngăn xếp MEAN

Ngăn xếp MEAN là một ngăn xếp công nghệ để tạo các ứng dụng web full-stack hoàn toàn bằng JavaScript và JSON. Ngăn xếp MEAN bao gồm 4 thành phần chính: MongoDB, Express, Angular và Node.js.

MongoDB chịu trách nhiệm lưu trữ dữ liệu.
Express.js là một khung ứng dụng web Node.js để tạo API.
Angular là một nền tảng JavaScript phía máy khách.
Node.js là một môi trường thời gian chạy JavaScript phía máy chủ. Máy chủ sử dụng trình điều khiển MongoDB Node.js để kết nối với cơ sở dữ liệu, truy xuất và lưu trữ dữ liệu.

Sản phẩm bạn sẽ tạo ra

Bạn sẽ viết một ứng dụng full-stack Employee-Job Role (Nhân viên – Vai trò công việc) trong MongoDB, Express JS, Angular JS và Node JS. Ứng dụng này bao gồm:

Một ứng dụng máy chủ trong Node JS và Express JS, được đóng gói trong vùng chứa
Một bản dựng ứng dụng máy khách trong AngularJS, được đóng gói trong vùng chứa
Cả hai ứng dụng đều được triển khai trong Cloud Run
Ứng dụng máy chủ kết nối với thực thể MongoDB không máy chủ bằng trình điều khiển MongoDB NodeJS
API máy chủ thực hiện các tương tác đọc-ghi với cơ sở dữ liệu
Ứng dụng máy khách là giao diện người dùng cho ứng dụng Employee-Job Role (Nhân viên – Vai trò công việc)

Kiến thức bạn sẽ học được

Cách tạo các thực thể MongoDB không máy chủ
Cách thiết lập một dự án Cloud Run
Cách triển khai các ứng dụng web trong Google Cloud Run
Cách tạo và triển khai một ứng dụng MEAN Stack

2. Yêu cầu

Một trình duyệt, chẳng hạn như Chrome hoặc Firefox
Một dự án Google Cloud Platform chứa thực thể Cloud Run và MongoDB Atlas
Phần tiếp theo có danh sách các bước để tạo ứng dụng MEAN Stack

3. Tạo thực thể và cơ sở dữ liệu MongoDB không máy chủ

Để bắt đầu, hãy làm quen với MongoDB Atlas trên Google Cloud

Sau khi đăng ký, hãy nhấp vào nút "Build a Database" (Tạo cơ sở dữ liệu) để tạo một thực thể không máy chủ mới. Chọn cấu hình sau:

Sau khi thực thể không máy chủ được cung cấp, bạn sẽ thấy thực thể đó đang hoạt động

Nhấp vào nút "Connect" (Kết nối) để thêm địa chỉ IP kết nối và người dùng cơ sở dữ liệu
Trong lớp học lập trình này, chúng ta sẽ sử dụng chế độ cài đặt "Allow Access from Anywhere" (Cho phép truy cập từ mọi nơi). MongoDB Atlas đi kèm với một bộ tính năng bảo mật và truy cập. Bạn có thể tìm hiểu thêm về các tính năng này trong bài viết tài liệu về các tính năng bảo mật
Sử dụng thông tin xác thực mà bạn chọn cho tên người dùng và mật khẩu cơ sở dữ liệu. Sau khi hoàn tất các bước này, bạn sẽ thấy như sau:

Tiếp tục bằng cách nhấp vào nút "Choose a connection method" (Chọn phương thức kết nối), sau đó chọn "Connect your application" (Kết nối ứng dụng của bạn)

Sao chép chuỗi kết nối mà bạn thấy và thay thế mật khẩu bằng mật khẩu của riêng bạn. Chúng ta sẽ sử dụng chuỗi đó để kết nối với cơ sở dữ liệu trong các phần sau

4. Thiết lập một dự án Cloud Run

Trước tiên, hãy đăng nhập vào Cloud Console, tạo một dự án mới hoặc sử dụng lại một dự án hiện có
Ghi nhớ mã dự án cho dự án mà bạn đã tạo
Dưới đây là hình ảnh cho thấy trang dự án mới, nơi bạn có thể thấy mã dự án khi tạo dự án

Sau đó, hãy bật Cloud Run API từ Cloud Shell:
Kích hoạt Cloud Shell từ Cloud Console. Chỉ cần nhấp vào Kích hoạt Cloud Shell
Sau khi kết nối với Cloud Shell, bạn sẽ thấy rằng bạn đã được xác thực và dự án đã được đặt thành MÃ DỰ ÁN của bạn. Nếu vì lý do nào đó mà dự án không được đặt, chỉ cần đưa ra lệnh sau:

gcloud config set project PROJECT_ID

Sử dụng lệnh bên dưới:

gcloud services enable run.googleapis.com

Chúng ta sẽ sử dụng Cloud Shell và Trình chỉnh sửa Cloud Shell để tham chiếu mã. Để truy cập vào Trình chỉnh sửa Cloud Shell, hãy nhấp vào Mở trình chỉnh sửa từ Cửa sổ dòng lệnh Cloud Shell:

5. Nhân bản dự án MEAN Stack

Chúng ta sẽ triển khai một ứng dụng web quản lý nhân viên. API REST được xây dựng bằng Express và Node.js; giao diện web được xây dựng bằng Angular; và dữ liệu sẽ được lưu trữ trong thực thể MongoDB Atlas mà chúng ta đã tạo trước đó
Nhân bản kho lưu trữ dự án bằng cách thực thi lệnh sau trong Cửa sổ dòng lệnh Cloud Shell:

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

6. Triển khai REST API Express và Node.js

Tệp cấu hình Docker

Trước tiên, chúng ta sẽ triển khai một dịch vụ Cloud Run cho Express API REST. Tệp quan trọng nhất cho quá trình triển khai của chúng ta là tệp cấu hình Docker. Hãy cùng xem tệp đó:

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

Cấu hình thiết lập Node.js, đồng thời sao chép và tạo dự án. Khi vùng chứa bắt đầu, lệnh bên dưới sẽ khởi động dịch vụ

node dist/server.js

Để bắt đầu một bản triển khai Cloud Run mới, hãy nhấp vào biểu tượng Cloud Run trên thanh bên bên trái:

Sau đó, hãy nhấp vào biểu tượng Triển khai lên Cloud Run:

Điền thông tin cấu hình dịch vụ như sau:
Tên dịch vụ: node-express-api
Nền tảng triển khai: Cloud Run (được quản lý toàn diện)
Khu vực: Chọn một khu vực gần với khu vực cơ sở dữ liệu của bạn để giảm độ trễ
Xác thực: Cho phép các lệnh gọi chưa xác thực
Trong phần Cài đặt bản sửa đổi, hãy nhấp vào Hiển thị các tuỳ chọn cài đặt nâng cao để mở rộng các tuỳ chọn này:
Cổng vùng chứa: 5200
Biến môi trường. Thêm cặp khoá-giá trị sau đây và đảm bảo bạn thêm chuỗi kết nối cho bản triển khai MongoDB Atlas của riêng bạn:

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

Đối với môi trường tạo bản dựng, hãy chọn Cloud Build
Cuối cùng, trong phần Cài đặt bản dựng, hãy chọn:
Trình tạo: Docker
Docker: mean-stack-example/server/Dockerfile
Nhấp vào nút Triển khai, sau đó nhấp vào Hiển thị nhật ký chi tiết để theo dõi quá trình triển khai dịch vụ Cloud Run đầu tiên của bạn!
Sau khi bản dựng hoàn tất, bạn sẽ thấy URL của dịch vụ đã triển khai:

Mở URL và thêm "/employees" vào cuối
Bạn sẽ thấy một mảng trống vì hiện tại, không có tài liệu nào trong cơ sở dữ liệu.

Hãy triển khai giao diện người dùng để chúng ta có thể thêm một số tài liệu!

7. Triển khai ứng dụng web Angular

Ứng dụng Angular của chúng ta nằm trong thư mục máy khách. Để triển khai ứng dụng này, chúng ta sẽ sử dụng máy chủ Nginx và Docker. Chỉ là một ý tưởng, bạn cũng có thể sử dụng Lưu trữ Firebase để triển khai ứng dụng Angular vì bạn có thể phân phát trực tiếp nội dung của mình đến một CDN (mạng phân phối nội dung).

Tệp cấu hình

Hãy cùng xem các tệp cấu hình:

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

Trong cấu hình Nginx, chúng ta chỉ định cổng mặc định – 8080 và tệp bắt đầu – 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;"]

Trong cấu hình Docker, chúng ta cài đặt các phần phụ thuộc Node.js và tạo dự án. Sau đó, chúng ta sao chép các tệp đã tạo vào vùng chứa, định cấu hình và khởi động dịch vụ Nginx
Cuối cùng, chúng ta cần định cấu hình URL cho API REST để ứng dụng máy khách có thể gửi yêu cầu đến API đó. Vì chúng ta chỉ sử dụng URL trong một tệp duy nhất trong dự án, nên chúng ta sẽ mã hoá cứng URL. Ngoài ra, bạn có thể đính kèm biến môi trường vào đối tượng cửa sổ và truy cập vào biến đó từ đó.

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

Chúng ta đã sẵn sàng triển khai lên Cloud Run! Bắt đầu một bản triển khai mới với các chế độ cài đặt cấu hình sau:
```
  - Service Settings: Create a service
```
Tên dịch vụ: angular-web-app
Nền tảng triển khai: Cloud Run (được quản lý toàn diện)
Xác thực: Cho phép các lệnh gọi chưa xác thực
Đối với môi trường tạo bản dựng, hãy chọn Cloud Build
Cuối cùng, trong phần Cài đặt bản dựng, hãy chọn:
Trình tạo: Docker
Docker: mean-stack-example/client/Dockerfile
Nhấp lại vào nút Triển khai đó và xem nhật ký khi ứng dụng của bạn được chuyển đến đám mây! Khi quá trình triển khai hoàn tất, bạn sẽ thấy URL cho ứng dụng máy khách

Mở URL và dùng thử ứng dụng của bạn!

8. Dọn dẹp

Để tránh bị tính phí vào tài khoản Google Cloud cho các tài nguyên được sử dụng trong bài đăng này, hãy làm theo các bước sau.

Chấm dứt các thực thể MongoDB

Chuyển đến các cụm Thực thể MongoDB
Chọn cụm, thực thể mà bạn đã tạo
Nhấp vào dấu ba chấm bên cạnh tên cụm rồi chọn Chấm dứt trong danh sách

Xoá các bản triển khai Cloud Run

Chuyển đến trang Cloud Run trong Google Cloud Console
Chọn dịch vụ Cloud Run mà bạn muốn xoá
Nhấp vào biểu tượng xoá ở đầu bảng điều khiển

9. Xin chúc mừng

Xin chúc mừng, bạn đã tạo thành công Ứng dụng web MEAN Stack trên Cloud Run!

Ứng dụng ngăn xếp MEAN không máy chủ trên MongoDB Atlas và Cloud Run Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.