# Lesson 12 - Deployment

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](https://github.com/Teachingk18/social-app/blob/main/social-ap.postman_collection.json). Hãy import vào Postman, kết hợp chạy server để trải nghiệm.

{% hint style="info" %}
&#x20;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:

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

{% endhint %}

## 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:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/JjdKdgxJoW9mVXfMADh7/image.png" alt=""><figcaption><p>Chọn</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/ZOfPFb0IvXHQim6kwsiF/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

Chọn Connect Repository

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/3NDdLASM2vMVA837wUiV/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/UeTnsbxDOq6mu0MKDaR8/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

Chọn install

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/9ghfGWJwbK2yc9toBT5i/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

Kết quả:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/SUT7miwQaYfjFX4jrmWy/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/0qQWOhS7k0zhBzrIS7zY/image.png" alt=""><figcaption><p>Cài đặt</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/tYN9DRc2Vsh0vfdqoPxJ/image.png" alt=""><figcaption><p>Cài đặt</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/YcLz5zCQRTOsYcvHIW9z/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

Kết quả:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/VKwOlaTTtSjz9RgpRvVY/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/qm0fs7pqQ5WpRDaZG2wf/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

{% hint style="info" %}
Nếu hiển thị Build successful tức đã deploy thành công
{% endhint %}

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/5vgOZTvICUjzfFdJOzWI/image.png" alt=""><figcaption><p>Cấu hình ENV</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/0oXkweGrG2c00juACQgF/image.png" alt=""><figcaption><p>Ví dụ ENV</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/NZf5Anr4RvWHoesdgzWp/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/AilKJL0glDYxhAWJVSkQ/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

Kết quả:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/WeVaHvgsojifOrkhDJkH/image.png" alt=""><figcaption><p>Kết quả</p></figcaption></figure>

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:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/vquFxTSb4Zm1vF6TZN8d/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/kKmX7f4CmYdhjuPjTHU7/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

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/>

{% hint style="info" %}
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.
{% endhint %}

Để 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:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/0GMJy7klfKaFTJ9tdgNZ/image.png" alt=""><figcaption><p>Lựa chọn</p></figcaption></figure>

## 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ụ:

<figure><img src="https://content.gitbook.com/content/bApz6rKK01BWUpp5sM0n/blobs/rJq45y4vwsYquzp6dM91/image.png" alt=""><figcaption><p>Lỗi CORS</p></figcaption></figure>

### Cài đặt

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

```
npm i cors
```

Sử dụng:

```javascript
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}`);
});

```

{% hint style="info" %}
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
  {% endhint %}

## 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.