Lesson 12 - Deployment

Deploy server với render

Sau khi đã hoàn thiện được dự án trong các buổi học, ta sẽ thực hiện triển khai trên môi trường cloud, sử dụng nền tảng render (thực hiện tương tự với phía FE).

Link resource tham khảo:

BE: https://github.com/Teachingk18/social-app

FE: https://github.com/Teachingk18/client-social-app

Có thể clone về, up lên repo git của cá nhân và thực hiện deploy.

Các API đã có trong resource BE tại file social-ap.postman_collection.json. Hãy import vào Postman, kết hợp chạy server để trải nghiệm.

Khi clone về, cần phải tạo file .env với các tham số để chạy dưới local, theo dõi ví dụ dưới:

PORT=8080
CONNECT_STRING=mongodb://localhost:27017/social-app
AT_SECRETKEY=At17*//i12--
RT_SECRETKEY=Rt-77123nhkajsdf@05

Render

Render là một dịch vụ đám mây được sử dụng cho việc triển khai ứng dụng web và ứng dụng khác một cách dễ dàng và linh hoạt. Render cung cấp một số tính năng và dịch vụ như hosting, cơ sở dữ liệu, và các dịch vụ khác để giúp các nhà phát triển xây dựng và triển khai ứng dụng của họ một cách hiệu quả.

Đăng ký tài khoản render tại: https://dashboard.render.com/register

(Recommend đăng ký với github)

Một số điểm chính về Render:

1. Hosting đám mây: Render cung cấp dịch vụ hosting đám mây cho ứng dụng web, cho phép bạn triển khai và quản lý các ứng dụng web một cách dễ dàng.

2. Cơ sở dữ liệu: Render hỗ trợ cơ sở dữ liệu, cho phép bạn lưu trữ và truy xuất dữ liệu trong ứng dụng của bạn.

3. Quản lý triển khai: Render giúp bạn quản lý các phiên bản triển khai của ứng dụng, cung cấp tính năng như triển khai tự động từ kho lưu trữ (GitHub, GitLab, Bitbucket), quản lý biến môi trường, và quản lý phiên bản ứng dụng.

4. Tự động hóa và mở rộng: Render giúp tự động hóa việc triển khai và mở rộng ứng dụng, giúp giảm thời gian và công sức cần thiết cho việc quản lý hệ thống.

5. Hỗ trợ nhiều ngôn ngữ và frameworks: Render hỗ trợ nhiều ngôn ngữ lập trình và framework, cho phép bạn triển khai ứng dụng dựa trên các công nghệ khác nhau.

Deploy

Sau khi đăng ký thành công và đã vào được trang chủ của render, ta sẽ lựa chọn New và Web service như bên dưới:

Chọn

Tiếp theo, lựa chọn với Git repository:

Lựa chọn

Chọn Connect Repository

Lựa chọn

Chọn chỉ định repository để deploy và chọn repo cần deploy:

Lựa chọn

Chọn install

Lựa chọn

Kết quả:

Kết quả

Thực hiện Connect với Repo và setup:

Cài đặt

Cài đặt

Kéo xuống và chọn Create Web Service:

Lựa chọn

Kết quả:

Kết quả

Kết quả

Nếu hiển thị Build successful tức đã deploy thành công

Lựa chọn Environment, Add Environment để tạo các tham số env:

Cấu hình ENV

Ví dụ cấu hình và chọn Save changes:

Ví dụ ENV

Kết quả (xem ở tab Logs):

Kết quả

Để truy cập server, ta sẽ sử dụng đường dẫn được cung cấp

Kết quả

Kết quả:

Kết quả

Link tham khảo: https://social-app-server-5kj7.onrender.com/

Thực hiện tương tự với phía FE, tuy nhiên, với cách cài đặt phía trên, ta phải chỉ định source cần deploy.

Chọn New và Static Site:

Lựa chọn

Lướt xuống phía dưới và điền link repo của resource FE:

Lựa chọn

Sau đó thực hiện cài đặt tương tự như deploy BE.

Link tham khảo: https://social-app-client-5yj2.onrender.com/

Một bản hướng dẫn sử dụng các API là rất quan trọng và cần thiết, có thể sử dụng file Readme.md để viết đặc tả API, hoặc sử dụng một nền tảng https://swagger.io/ để tạo tài liệu đặc tả, hướng dẫn sử dụng API.

Để update deployment với commit mới nhất ta sẽ chọn nút Manual Deploy và chọn Deploy latest commit như sau:

Lựa chọn

CORS

Trước khi thực hiện hoàn thiện ứng dụng, CORS là một vấn đề chúng ta cần quan tâm.

CORS là viết tắt của "Cross-Origin Resource Sharing" (Chia sẻ Tài nguyên Giữa các Miền), và nó là một cơ chế trong web development cho phép trình duyệt web yêu cầu tài nguyên từ một miền (domain) khác. CORS là một phần quan trọng của bảo mật trình duyệt và đảm bảo an toàn khi truy cập tài nguyên từ các miền khác nhau.

Nếu không cài đặt cors, sẽ dẫn tới lỗi khi client call API tới server. Ví dụ:

Lỗi CORS

Cài đặt

Cài đặt thư viện cors:

npm i cors

Sử dụng:

import express from 'express';
import cors from'cors';

const app = express();

// Sử dụng middleware CORS cho phát triển
// luôn để trên cùng
app.use(cors());

// Các cấu hình Express khác
// ...

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Lưu ý:

• Nếu chỉ sử dụng: app.use(cors()); mọi Client đều có thể truy cập được

• Cần tìm hiểu thêm về các option cài đặt khác cho cors để định nghĩa các Client có thể truy cập

Demo

Thực hiện các chức năng sử dụng API với Client

Đăng ký

Thực hiện chức năng đăng ký:

1. Validate thông tin đăng ký sử dụng yup.

2. Lấy thông tin đăng ký từ form, gọi API /api/v1/users/sign-up thực hiện đăng ký.

Lưu ý: Cần phải thông báo được ra màn hình việc đăng ký thành công hoặc thất bại với thông tin trả về từ API.

Đăng nhập

Thực hiện chức năng đăng nhập:

1. Validate thông tin đăng nhập từ form.

2. Lấy thông tin từ form đăng nhập, gọi API /api/v1/users/sign-in thực hiện đăng nhập.

3. Chuyển hướng sang trang /home nếu đăng nhập thành công hoặc thông báo thất bại với thông tin trả về từ API.

4. Lưu trữ thông tin access token và refresh token tại localStorage.