Skip to content
NetProxy Docs

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

Section titled “Thông tin kỹ thuật”
Thông tinChi tiết
Repositorygithub.com/lebachhiep/netproxy-console-v2
StackReact 19.2, Vite 6.2, TypeScript 5.8, Tailwind CSS 4.0, SCSS
Ngôn ngữ14 ngôn ngữ (i18next)
Dev port5192

Bước 1: Clone source code

Section titled “Bước 1: Clone source code”
Terminal window
git clone https://github.com/lebachhiep/netproxy-console-v2.git
cd netproxy-console-v2

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

Section titled “Bước 2: Cài đặt dependencies”
Terminal window
# 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

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

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

Terminal window
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ếnMô tả
VITE_API_BASE_URLURL của API Backend. Mặc định: https://api.prx.network
VITE_RECAPTCHA_SITE_KEYGoogle reCAPTCHA v3 site key dùng cho form đăng ký/đăng nhập

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

Section titled “Bước 4: Chạy trên máy local”
Terminal window
yarn dev

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

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

Section titled “Bước 5: Tùy chỉnh giao diện”
Section titled “Thay đổi logo”

Thay file src/logo.svg bằng logo của bạn.

Thay đổi màu sắc / theme

Section titled “Thay đổi màu sắc / theme”

Chỉnh sửa file tailwind.config.js để thay đổi bảng màu theo thương hiệu.

Thay đổi ngôn ngữ

Section titled “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ị)

Section titled “Triển khai lên Vercel (Khuyến nghị)”

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

Section titled “Yêu cầu trước khi deploy”

Các bước triển khai

Section titled “Các bước triển khai”

  1. Push source code lên GitHub repository của bạn

  2. Truy cập vercel.com và import repository

  3. Cấu hình project:

    • Framework Preset: Vite
    • Build Command: yarn build
    • Output Directory: dist

  4. Thêm biến môi trường:

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

  5. Nhấn Deploy

  6. Sau khi deploy xong, cấu hình custom domain trong Vercel dashboard

Triển khai lên Cloudflare Pages

Section titled “Triển khai lên Cloudflare Pages”

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

Section titled “Cách 1: Kết nối GitHub (Khuyến nghị)”
  1. Truy cập Cloudflare Pages Dashboard
  2. Nhấn Create a project → Connect to Git
  3. Chọn repository netproxy-console-v2
  4. Cấu hình:
    • Build Command: yarn build
    • Build Output Directory: dist
  5. Thêm biến môi trường tương tự như Vercel
  6. Nhấn Save and Deploy

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

Section titled “Cách 2: Deploy thủ công bằng Wrangler”
Terminal window
# Build project
yarn build


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

Cấu hình SPA Routing

Section titled “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

Section titled “Xác nhận triển khai thành công”

Sau khi deploy, kiểm tra:

  1. Truy cập domain Console → thấy trang đăng nhập/đăng ký
  2. Đăng ký tài khoản mới → thành công
  3. Đăng nhập → thấy dashboard
  4. 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

Section titled “Bước tiếp theo”