Bài 34.5: Bài tập thực hành deploy ứng dụng

Chào mừng bạn đến với khoảnh khắc đáng mong chờ nhất! Bạn đã dành rất nhiều thời gian và công sức để học HTML, CSS, JavaScript, TypeScript, xây dựng các ứng dụng bằng React và Next.js. Bạn đã tạo ra những giao diện đẹp, logic xử lý tuyệt vời. Nhưng tất cả những điều đó sẽ chỉ nằm yên trên máy tính của bạn nếu bạn không thực hiện bước cuối cùng và cực kỳ quan trọng: Deployment (Triển khai ứng dụng).

Deployment là quá trình đưa ứng dụng web của bạn từ môi trường phát triển cục bộ (local development) lên một máy chủ (server) công cộng, nơi mà mọi người trên internet đều có thể truy cập và sử dụng nó thông qua một địa chỉ URL. Nó giống như việc bạn hoàn thành xong một bức tranh và cuối cùng mang nó ra triển lãm cho mọi người cùng chiêm ngưỡng.

Tại sao Deployment lại quan trọng đến vậy?

Đơn giản thôi: vì mục đích cuối cùng của việc xây dựng ứng dụng web là để người khác sử dụng! Dù là một trang web cá nhân, một portfolio giới thiệu bản thân, một blog, hay một ứng dụng web phức tạp cho doanh nghiệp, chúng đều cần được "sống" trên internet. Deployment chính là cầu nối đưa sản phẩm của bạn từ ý tưởng và code thành hiện thực có thể truy cập được toàn cầu.

Nó cũng là bước cần thiết để bạn:

Chia sẻ công việc: Giới thiệu dự án cho nhà tuyển dụng, bạn bè, khách hàng.
Thu thập phản hồi: Nhận xét từ người dùng thực tế giúp bạn cải thiện sản phẩm.
Kiếm tiền: Nếu ứng dụng của bạn có mục đích kinh doanh.
Xây dựng thương hiệu cá nhân/doanh nghiệp: Có một trang web/ứng dụng hoạt động chuyên nghiệp trên internet.

"Build" là gì và tại sao cần nó trước khi Deploy?

Trước khi deploy, bạn thường cần thực hiện một bước gọi là "build". Code bạn viết trong môi trường phát triển (với các file JSX, TSX, Sass, sử dụng module imports...) thường không phải là định dạng tối ưu nhất để chạy trực tiếp trên trình duyệt hoặc server production.

Quá trình build (xây dựng) sử dụng các công cụ như Webpack, Parcel, Vite (trong các dự án React hiện đại) hoặc chính Next.js CLI để:

Transpile Code: Chuyển đổi mã JavaScript/TypeScript hiện đại (ES6+) và JSX thành phiên bản tương thích với hầu hết các trình duyệt.
Bundle Modules: Gộp các file code nhỏ lại thành các file lớn hơn, giảm số lượng request HTTP mà trình duyệt cần gửi đi.
Minify Code: Loại bỏ các ký tự không cần thiết (khoảng trắng, comment) và rút gọn tên biến để giảm kích thước file.
Optimize Assets: Nén ảnh, tối ưu CSS, v.v.
Generate Output: Tạo ra các file tĩnh (HTML, CSS, JS, assets) sẵn sàng để được phục vụ. Đối với các framework như Next.js, bước build này còn phức tạp hơn, bao gồm cả việc chuẩn bị cho Server-Side Rendering (SSR) hoặc Static Site Generation (SSG).

Kết quả của quá trình build thường là một thư mục (phổ biến là build, dist, hoặc .next đối với Next.js) chứa tất cả các file đã được tối ưu hóa, sẵn sàng để deploy.

Ví dụ về script build trong file package.json của một dự án React thông thường (sử dụng Create React App):

// package.json
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // ... các dependencies khác
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build", // <-- Đây là script build
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ...
}

Khi bạn chạy npm run build hoặc yarn build, câu lệnh "react-scripts build" sẽ được thực thi. Nó sẽ xử lý toàn bộ code của bạn và tạo ra thư mục build ở thư mục gốc của dự án, chứa phiên bản production đã được tối ưu.

Đối với Next.js, script build cũng tương tự nhưng sử dụng lệnh next build:

// package.json (Next.js)
{
  "name": "my-nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build", // <-- Script build của Next.js
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  // ...
}

Chạy npm run build hoặc yarn build trong dự án Next.js sẽ tạo ra thư mục .next. Thư mục này chứa các file cần thiết để Next.js có thể phục vụ ứng dụng ở chế độ production, bao gồm cả các bundle cho client-side, server-side code và serverless functions cho API routes.

Các Nền tảng Deployment Phổ Biến cho Front-end

Thế giới deployment có rất nhiều lựa chọn, nhưng đối với ứng dụng Front-end hiện đại, đặc biệt là các Single Page Application (SPA) được build thành file tĩnh hoặc các ứng dụng sử dụng framework có SSR/SSG như Next.js, một số nền tảng nổi bật vì sự đơn giản, hiệu quả và thường có gói miễn phí tuyệt vời:

Vercel: Được tạo ra bởi chính đội ngũ phát triển Next.js, Vercel cung cấp trải nghiệm deployment gần như không cấu hình (zero-configuration) cho các ứng dụng Next.js. Nó cũng hỗ trợ rất tốt các framework Front-end khác như React (Create React App, Vite), Vue, Angular, Svelte, v.v., dưới dạng Static Site hoặc Serverless Functions.
Netlify: Tương tự Vercel, Netlify là một nền tảng rất phổ biến để deploy các Static Site và SPA. Nó tích hợp mạnh mẽ với Git, cung cấp CDN (Content Delivery Network) toàn cầu, chứng chỉ SSL miễn phí và hỗ trợ Serverless Functions.
GitHub Pages / GitLab Pages: Miễn phí, dễ dàng deploy trực tiếp từ kho mã nguồn Git của bạn. Thích hợp cho các trang web tĩnh đơn giản hoặc portfolio. Hỗ trợ Jekyll cho các trang web phức động hơn một chút.
Firebase Hosting: Nền tảng hosting tĩnh của Google Firebase. Tích hợp tốt với các dịch vụ Firebase khác (Authentication, Database, Functions). Cung cấp CDN và SSL miễn phí.
Render: Một lựa chọn khác hỗ trợ Static Sites, Web Services (Node.js servers), Serverless Functions, Databases... Cung cấp nhiều lựa chọn hơn Vercel/Netlify nếu bạn cần backend.
Heroku: Một trong những nền tảng PaaS (Platform as a Service) đời đầu, hỗ trợ nhiều ngôn ngữ và framework thông qua "Dynos". Tốt cho các ứng dụng Node.js (đối với Next.js SSR đầy đủ) nhưng gói miễn phí đã bị loại bỏ.

Trong phạm vi bài thực hành này, chúng ta sẽ tập trung vào Vercel và Netlify vì sự phổ biến, dễ sử dụng và tích hợp Git mạnh mẽ của chúng, rất phù hợp cho các dự án React và Next.js.

Quy Trình Deploy Ứng Dụng Front-end (Sử Dụng Git Integration)

Cách phổ biến và hiệu quả nhất hiện nay để deploy ứng dụng web là kết nối nền tảng deployment của bạn với kho mã nguồn Git (GitHub, GitLab, Bitbucket). Quy trình điển hình sẽ như sau:

Chuẩn bị Code: Đảm bảo ứng dụng của bạn hoạt động tốt trên máy cục bộ và đã được push lên một kho mã nguồn Git (ví dụ: lên GitHub).
Tạo Tài Khoản & Kết Nối Git: Đăng ký tài khoản trên nền tảng deployment (Vercel hoặc Netlify) và cấp quyền cho nền tảng đó truy cập kho mã nguồn của bạn.
Import Dự Án: Chọn kho mã nguồn Git chứa ứng dụng của bạn từ danh sách các repository mà nền tảng có thể truy cập.
Cấu Hình Build & Deploy: Nền tảng sẽ cố gắng tự động phát hiện framework bạn đang sử dụng (React, Next.js, v.v.) và đề xuất các cài đặt build và deploy phù hợp. Bạn cần kiểm tra và xác nhận hoặc điều chỉnh:
- Build Command: Lệnh để xây dựng ứng dụng (ví dụ: npm run build hoặc yarn build).
- Publish Directory: Thư mục chứa output sau khi build (ví dụ: build, dist, .next).
- Branch: Nhánh Git nào sẽ kích hoạt deployment (thường là main hoặc master).
Deploy Lần Đầu: Kích hoạt deployment thủ công hoặc chờ nền tảng tự động build và deploy lần đầu tiên dựa trên commit hiện tại của nhánh đã chọn.
Nhận URL: Sau khi deploy thành công, nền tảng sẽ cung cấp cho bạn một URL công khai (ví dụ: https://my-app-12345.vercel.app hoặc https://my-app-abcdef.netlify.app).
Cập Nhật Tự Động (CI/CD): Từ giờ trở đi, mỗi khi bạn push code mới lên nhánh đã kết nối (ví dụ: nhánh main), nền tảng sẽ tự động chạy lại quy trình build và deploy, cập nhật ứng dụng của bạn trên server. Đây chính là khái niệm cơ bản của Continuous Deployment (CD) - một phần của CI/CD (Continuous Integration/Continuous Deployment).

Thực Hành: Deploy Ứng Dụng React (SPA) trên Netlify

Giả sử bạn có một ứng dụng React được tạo bằng Create React App hoặc Vite và đã push lên GitHub.

Truy cập Netlify: Đăng nhập vào tài khoản Netlify (hoặc đăng ký nếu chưa có).
Add New Site: Nhấn vào nút "Add new site".
Import from Git: Chọn tùy chọn "Import from Git".
Connect Git Provider: Chọn nền tảng Git của bạn (GitHub, GitLab, Bitbucket) và cấp quyền cho Netlify.
Pick a repository: Chọn repository chứa ứng dụng React của bạn.
Configure build settings: Netlify thường tự động nhận diện dự án React.
- Branch to deploy: Chọn nhánh muốn deploy tự động (ví dụ: main).
- Build command: Thường là npm run build hoặc yarn build (tùy thuộc vào cách bạn quản lý package). Netlify sẽ tự động chạy lệnh này.
- Publish directory: Thường là build (đối với Create React App) hoặc dist (đối với Vite). Đây là thư mục chứa output sau khi build.
- Code Example (Configuration):
```
# Build command:
npm run build

# Publish directory:
build
```
  - Explanation: Netlify sẽ thực thi npm run build. Sau khi lệnh này hoàn thành, Netlify sẽ lấy tất cả nội dung trong thư mục build và deploy nó lên các server CDN của họ.
Deploy site: Nhấn nút "Deploy site".

Netlify sẽ bắt đầu quá trình build và deploy. Bạn có thể theo dõi tiến trình trong mục "Deploys". Sau khi hoàn tất, bạn sẽ nhận được một URL ngẫu nhiên cho trang web của mình. Bạn có thể thay đổi tên miền phụ này trong cài đặt Site Settings > General > Site details > Change site name.

Thực Hành: Deploy Ứng Dụng Next.js trên Vercel

Vercel được tối ưu hóa đặc biệt cho Next.js, nên việc deploy còn đơn giản hơn nữa. Giả sử bạn có một ứng dụng Next.js và đã push lên GitHub.

Truy cập Vercel: Đăng nhập vào tài khoản Vercel (hoặc đăng ký nếu chưa có).
Add New... -> Project: Nhấn vào nút "Add New..." và chọn "Project".
Import Git Repository: Chọn nền tảng Git của bạn (GitHub, GitLab, Bitbucket) và cấp quyền cho Vercel.
Select Repository: Chọn repository chứa ứng dụng Next.js của bạn.
Configure Project: Vercel sẽ tự động nhận diện là dự án Next.js và đề xuất cấu hình mặc định.
- Root Directory: Thường là / nếu code nằm ở thư mục gốc của repo.
- Build and Output Settings: Vercel thường không yêu cầu bạn cấu hình Build Command và Output Directory cho Next.js vì họ đã tối ưu hóa quy trình này. Tuy nhiên, bạn có thể ghi đè nếu cần.
  - Code Example (Configuration - Default for Next.js):
```
# Build command: (Thường không cần cấu hình, Vercel dùng `next build`)
next build

# Output Directory: (Thường không cần cấu hình)
.next
```
  - Explanation: Vercel đã "biết" cách build một ứng dụng Next.js. Khi bạn import dự án, Vercel sẽ clone repo, chạy lệnh next build, và sau đó xử lý output trong thư mục .next để deploy hiệu quả, bao gồm cả việc thiết lập các serverless functions cho API routes và SSR/SSG.
- Environment Variables: Bạn có thể thêm các biến môi trường cần thiết cho ứng dụng production tại đây (ví dụ: API keys).
Deploy: Nhấn nút "Deploy".

Vercel sẽ clone repo, cài đặt dependencies, chạy next build, và deploy ứng dụng của bạn. Quá trình này có thể mất một vài phút. Sau khi thành công, bạn sẽ được cung cấp một URL công khai và có thể truy cập ứng dụng của mình. Tương tự Netlify, mỗi lần push code lên nhánh chính, Vercel sẽ tự động build và deploy lại.

Một Vài Lưu Ý Quan Trọng Khi Deploy

Biến Môi Trường (Environment Variables): Đừng bao giờ lưu trữ thông tin nhạy cảm (API keys, mật khẩu database) trực tiếp trong code của bạn và push lên Git. Thay vào đó, sử dụng biến môi trường. Cả Netlify và Vercel đều có giao diện cho phép bạn định nghĩa các biến môi trường này. Chúng sẽ được inject vào quá trình build hoặc runtime của ứng dụng mà không bị public.
Tên Miền Tùy Chỉnh (Custom Domains): Sau khi deploy thành công, bạn sẽ muốn sử dụng tên miền riêng của mình (ví dụ: ten-cua-toi.com) thay vì URL ngẫu nhiên mà nền tảng cung cấp. Cả hai nền tảng đều có phần cài đặt để bạn thêm tên miền tùy chỉnh. Quá trình này bao gồm việc cấu hình bản ghi DNS (ví dụ: bản ghi CNAME hoặc A) tại nhà cung cấp tên miền của bạn để trỏ đến deployment của ứng dụng.
Troubleshooting: Đôi khi deployment sẽ thất bại (thường là do lỗi build). Hãy kiểm tra kỹ lưỡng log build mà nền tảng cung cấp. Log này sẽ hiển thị các lỗi tương tự như khi bạn chạy lệnh build trên máy cục bộ, giúp bạn dễ dàng xác định và khắc phục sự cố.

Comments

There are no comments at the moment.