Ứ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 lại trải nghiệm phát triển ứng dụng ngăn xếp MEAN hoàn toàn không máy chủ. Chúng ta sẽ tìm hiểu cách xây dựng ứng dụng MEAN không máy chủ bằng Cloud RunMongoDB 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 xây dựng và triển khai các ứng dụng trong 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ý hoàn toàn. Cloud Run nổi bật hơn so với Cloud Run khi giúp chúng tôi:

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

Truy cập đường liên kết này để xem các tính năng khác một cách đầy đủ.

Cơ sở dữ liệu không máy chủ nhờ MongoDB Atlas

MongoDB đã ra mắt các thực thể không máy chủ, một hoạt động triển khai cơ sở dữ liệu mới được quản lý hoàn toàn, không máy chủ 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 suy nghĩ về cơ sở hạ tầng. Chỉ cần triển khai cơ sở dữ liệu là cơ sở dữ liệu của bạn sẽ tăng và giảm một cách liền mạch theo nhu cầu – không cần trực tiếp quản lý. Và điều tuyệt vời nhất là bạn sẽ chỉ bị tính phí cho các hoạt động mà bạn thực hiện. Để kiến trúc của chúng tôi thực sự không máy chủ, chúng tôi 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 bộ phần mềm cơ sở để xây dựng 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 để xây dựng 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 Node.js của MongoDB để kết nối với cơ sở dữ liệu cũng như 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 Vai trò nhân viên – công việc cho toàn bộ ngăn xếp trong MongoDB, Express JS, Angular JS và Node JS. Thành phần này bao gồm:

  • Một ứng dụng máy chủ trong Nút JS và Express JS, được chứa trong vùng chứa
  • Một bản dựng ứng dụng khách trong AngularJS, được chứa 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 phiên bản MongoDB của Serverless bằng trình điều khiển MongoDB NodeJS
  • API máy chủ thực hiện các hoạt động tương tác đọc-ghi với cơ sở dữ liệu
  • Ứng dụng khách là giao diện người dùng cho ứng dụng Vai trò nhân viên – công việc

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

  • Cách tạo các Phiên bản MongoDB không máy chủ
  • Cách thiết lập dự án trên Cloud Run
  • Cách triển khai ứng dụng web trong Google Cloud Run
  • Cách tạo và triển khai Ứ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 của bạn
  • Phần tiếp theo có danh sách các bước để tạo ứng dụng MEAN Stack (Ngăn xếp MEAN)

3. Tạo thực thể và cơ sở dữ liệu MongoDB Serverless

e5cc775a49f2fb0.png

  • Khi bạn đã đăng ký, nhấp vào "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:

fca10bf6f031af7a.png

  • Sau khi thực thể không máy chủ của bạn được cấp phép, bạn sẽ thấy phiên bản đó thiết lập và chạy

d13c4b8bdd9569fd.png

  • Nhấp vào nút "Kết nối" nút để thêm địa chỉ IP kết nối và người dùng cơ sở dữ liệu
  • Đối với lớp học lập trình này, chúng ta sẽ sử dụng chính sách "Cho phép truy cập từ mọi nơi" cài đặt. MongoDB Atlas đi kèm 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 trong bài viết 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ủa cơ sở dữ liệu. Sau khi hoàn tất các bước này, bạn sẽ thấy như sau:

bffeef16de1d1cd2.png

  • Tiếp tục bằng cách nhấp vào "Chọn phương thức kết nối" rồi chọn "Kết nối ứng dụng của bạn"

75771e64427acd5e.png.

  • 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 tôi 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 trê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 dự án hiện có
  • Ghi nhớ Mã dự án của dự án 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ể xem mã dự án khi tạo

f32dbd4eb2b7501e.png

  • Sau đó, bật Cloud Run API qua Cloud Shell:
  • Kích hoạt Cloud Shell từ Cloud Console. Bạn 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 mình đã được xác thực và dự án đã được đặt thành Mã dự án. Nếu vì lý do nào đó mà dự án không được thiết lập, chỉ cần phát hành lệnh sau:
gcloud config set project PROJECT_ID

3da173210a016316.pngS

  • Hãy 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à Cloud Shell Editor để tham khảo mã. Để truy cập vào Cloud Shell Editor, hãy nhấp vào Open Editor (Mở trình chỉnh sửa) trong Cloud Shell Terminal:

83793a577f08e4d4.png.

5. Dự án ngăn xếp MEAN sao chép

  • Chúng tôi sẽ triển khai ứ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, với Angular; và dữ liệu sẽ được lưu trữ trong phiên bản MongoDB Atlas mà chúng tôi đã tạo trước đó
  • Sao chép kho lưu trữ dự án bằng cách thực thi lệnh sau trong Cloud Shell Terminal:
git clone https://github.com/mongodb-developer/mean-stack-example.git

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

Tệp cấu hình Docker

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

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 này sẽ 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 quy trình triển khai Cloud Run mới, hãy nhấp vào biểu tượng Cloud Run ở thanh bên trái:

48c73bda3aa4ea02.pngs

  • Sau đó, nhấp vào biểu tượng Triển khai lên đám mây:

cde124ba8ec23b34.png

  • Điền thông tin vào 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ý hoàn toàn)
  • Khu vực: Chọn một khu vực gần khu vực cơ sở dữ liệu của bạn để giảm độ trễ
  • Xác thực: Cho phép lời gọi chưa được xác thực
  • Trong phần Cài đặt bản sửa đổi, hãy nhấp vào Hiển thị chế độ cài đặt nâng cao để mở rộng:
  • Cổng công-ten-nơ: 5200
  • Biến môi trường. Thêm cặp khoá-giá trị sau đây và nhớ thêm chuỗi kết nối để 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
  • Trong môi trường Xây 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: Nghĩa-stack-example/server/Dockerfile
  • Nhấp vào nút Triển khai rồi chọn Hiển thị nhật ký chi tiết để tiếp tục triển khai dịch vụ Cloud Run đầu tiên của bạn!
  • Sau khi quá trình tạo bản dựng hoàn tất, bạn sẽ thấy URL của dịch vụ đã triển khai:

759c69ba52a85b10.png.

  • Mở URL và thêm "/employees" đến 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 để thêm một vài tính năng!

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

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

Tệp cấu hình

Hãy 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 của chúng ta 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 tôi đã sẵn sàng triển khai Cloud Run! Bắt đầu một đợt triển khai mới bằng 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ý hoàn toàn)
  • Xác thực: Cho phép lời gọi chưa được xác thực
  • Trong môi trường Xây 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 vào nút Triển khai một lần nữa và xem nhật ký khi ứng dụng của bạn được chuyển lên đám mây! Khi triển khai xong, bạn sẽ thấy URL của ứng dụng

5da1d7defc1082fc.png.

  • Mở URL và chơi với ứng dụng của bạn!

db154f1cd57e38f0.png

8. Dọn dẹp

Để tránh bị tính phí vào tài khoản Google Cloud của bạn cho những tài nguyên 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

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

Xoá Cloud Run Deployments

  1. Truy cập vào trang Cloud Run trong Google Cloud Console
  2. Chọn dịch vụ Cloud Run mà bạn muốn xoá
  3. 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 ngăn xếp MEAN trên Cloud Run!