Triển khai Console (User Dashboard)

Console (netproxy-console-v2) là bảng điều khiển dành cho người dùng cuối của bạn. Đây là nơi họ đăng ký, mua proxy, quản lý subscription, nạp tiền, và xem lịch sử.

Thông tin kỹ thuật

Thông tin	Chi tiết
Repository	github.com/lebachhiep/netproxy-console-v2
Stack	React 19.2, Vite 6.2, TypeScript 5.8, Tailwind CSS 4.0, SCSS
Ngôn ngữ	14 ngôn ngữ (i18next)
Dev port	5192

Bước 1: Clone source code

git clone https://github.com/lebachhiep/netproxy-console-v2.git
cd netproxy-console-v2

Bước 2: Cài đặt dependencies

# Sử dụng Yarn (khuyến nghị)
yarn install

# Hoặc npm
npm install

Bước 3: Cấu hình biến môi trường

Sao chép file .env.example thành .env:

cp .env.example .env

Nội dung file .env:

VITE_API_BASE_URL=https://api.prx.network
VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key

Biến	Mô tả
`VITE_API_BASE_URL`	URL của API Backend. Mặc định: `https://api.prx.network`
`VITE_RECAPTCHA_SITE_KEY`	Google reCAPTCHA v3 site key dùng cho form đăng ký/đăng nhập

Bước 4: Chạy trên máy local

yarn dev

Truy cập http://localhost:5192 để xem kết quả.

Bước 5: Tùy chỉnh giao diện

Logo sẽ hiển thị theo cấu hình ở Seller Portal.

Thay đổi ngôn ngữ

Chỉnh sửa các file JSON trong public/locales/[mã_ngôn_ngữ]/:

public/locales/
├── en/          # Tiếng Anh
├── vi/          # Tiếng Việt
├── zh/          # Tiếng Trung
├── ja/          # Tiếng Nhật
├── ko/          # Tiếng Hàn
├── ru/          # Tiếng Nga
├── de/          # Tiếng Đức
├── fr/          # Tiếng Pháp
├── es/          # Tiếng Tây Ban Nha
├── pt/          # Tiếng Bồ Đào Nha
├── th/          # Tiếng Thái
├── id/          # Tiếng Indonesia
├── ar/          # Tiếng Ả Rập
└── hi/          # Tiếng Hindi

Triển khai lên Vercel (Khuyến nghị)

Yêu cầu trước khi deploy

Các bước triển khai

Push source code lên GitHub repository của bạn
Truy cập vercel.com và import repository
Cấu hình project:
- Framework Preset: Vite
- Build Command: yarn build
- Output Directory: dist
Thêm biến môi trường:
- VITE_API_BASE_URL = https://api.prx.network
- VITE_RECAPTCHA_SITE_KEY = your_recaptcha_site_key
Nhấn Deploy
Sau khi deploy xong, cấu hình custom domain trong Vercel dashboard

Triển khai lên Cloudflare Pages

Cách 1: Kết nối GitHub (Khuyến nghị)

Truy cập Cloudflare Pages Dashboard
Nhấn Create a project → Connect to Git
Chọn repository netproxy-console-v2
Cấu hình:
- Build Command: yarn build
- Build Output Directory: dist
Thêm biến môi trường tương tự như Vercel
Nhấn Save and Deploy

Cách 2: Deploy thủ công bằng Wrangler

# Build project
yarn build

# Deploy
npx wrangler pages deploy dist --project-name=my-proxy-console

Cấu hình SPA Routing

Console là Single Page Application (SPA), bạn cần cấu hình redirect để mọi route đều trỏ về index.html.

Vercel — Tạo file vercel.json ở thư mục gốc:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Cloudflare Pages — Tạo file public/_redirects:

/*    /index.html   200

Xác nhận triển khai thành công

Sau khi deploy, kiểm tra:

Truy cập domain Console → thấy trang đăng nhập/đăng ký
Đăng ký tài khoản mới → thành công
Đăng nhập → thấy dashboard
Logo và thương hiệu hiển thị đúng (sau khi cấu hình trên Seller Portal)

Bước tiếp theo

Triển khai Landing Page — trang giới thiệu sản phẩm
Cấu hình Domain & Thương hiệu — đăng ký domain trên Seller Portal