Chuyển tới nội dung chính

Hướng dẫn sử dụng Firebase Deploy Tool

Tài liệu hướng dẫn chi tiết cho người dùng cuối

1. Tổng quan về Firebase Deploy Tool​

Firebase Deploy Tool là một công cụ web đơn giản giúp bạn triển khai ứng dụng web tĩnh lên Firebase Hosting mà không cần sử dụng dòng lệnh phức tạp. Công cụ hỗ trợ cả ứng dụng đã build sẵn và ứng dụng cần build từ mã nguồn.

Tính năng chính:

  • Triển khai ứng dụng web tĩnh lên Firebase Hosting
  • Hỗ trợ tự động build ứng dụng React/Vue/Angular
  • Theo dõi tiến độ triển khai thời gian thực
  • Giao diện người dùng thân thiện

2. Yêu cầu hệ thống và chuẩn bị​

2.1. Thông tin cần thiết​

  • Project ID Firebase: Liên hệ IT Support để được cấp Project ID cho dự án của bạn
  • Tài khoản truy cập: Username và password để đăng nhập vào hệ thống

2.2. Định dạng file hỗ trợ​

  • File ZIP: Chứa toàn bộ source code hoặc build output
  • Cấu trúc thư mục: Đảm bảo có file index.html trong thư mục gốc (nếu đã build) hoặc có package.json (nếu cần build)

2.3. Các loại ứng dụng được hỗ trợ​

  • Ứng dụng HTML/CSS/JS tĩnh
  • React applications (create-react-app, Vite)
  • Vue.js applications
  • Angular applications
  • Các ứng dụng SPA khác

3. Hướng dẫn triển khai từng bước​

Bước 1: Truy cập hệ thống​

  1. Mở trình duyệt web và truy cập vào địa chỉ Firebase Deploy Tool
  2. Đăng nhập bằng username và password được cung cấp
  3. Bạn sẽ thấy giao diện trang chủ với form upload

Bước 2: Chuẩn bị file triển khai​

Đối với ứng dụng đã build sẵn:

  • Nén thư mục build (thường là dist, build, hoặc public) thành file ZIP
  • Đảm bảo file index.html nằm ở thư mục gốc của file ZIP

Đối với ứng dụng cần build:

  • Nén toàn bộ source code (bao gồm package.json, src, v.v.) thành file ZIP
  • Đảm bảo có file package.json và script build trong đó

Bước 3: Điền thông tin triển khai​

  1. Project ID: Nhập Project ID Firebase được IT Support cung cấp
  2. Chọn file: Click nút "Chọn file" và chọn file ZIP đã chuẩn bị
  3. Loại ứng dụng:
    • Chọn "Đã build sẵn" nếu file ZIP chứa output đã build
    • Chọn "Cần build" nếu file ZIP chứa source code

Bước 4: Bắt đầu triển khai​

  1. Kiểm tra lại thông tin đã nhập
  2. Click nút "Triển khai" để bắt đầu quá trình
  3. Hệ thống sẽ chuyển hướng đến trang theo dõi tiến độ

Bước 5: Theo dõi tiến độ triển khai​

Trang theo dõi sẽ hiển thị:

  • Thanh tiến độ: Cho biết % hoàn thành
  • Các bước thực hiện:
    1. Upload: Tải file lên server
    2. Extract: Giải nén file
    3. Build: Build ứng dụng (nếu cần)
    4. Deploy: Triển khai lên Firebase
  • Log chi tiết: Hiển thị thông tin chi tiết về từng bước

Bước 6: Kiểm tra kết quả​

  • Khi triển khai thành công, bạn sẽ thấy thông báo "Triển khai thành công"
  • Truy cập ứng dụng tại: https://[PROJECT_ID].web.app hoặc https://[PROJECT_ID].firebaseapp.com
  • Kiểm tra các tính năng chính của ứng dụng

4. Các trường hợp thường gặp​

4.1. Ứng dụng React (Create React App)​

Cấu trúc file ZIP:
project-name/
├── package.json
├── public/
│   └── index.html
└── src/
    ├── App.js
    └── index.js
  • Chọn "Cần build"
  • Hệ thống sẽ tự động chạy npm install và npm run build

4.2. Ứng dụng đã build sẵn​

Cấu trúc file ZIP:
build/
├── index.html
├── static/
│   ├── css/
│   └── js/
└── ...
  • Chọn "Đã build sẵn"
  • File ZIP chứa thư mục build output

4.3. Ứng dụng Vite​

Cấu trúc file ZIP:
vite-app/
├── package.json
├── vite.config.js
├── index.html
└── src/
  • Chọn "Cần build"
  • Hệ thống sẽ chạy npx vite build --outDir=dist

5. Khắc phục sự cố​

5.1. Lỗi đăng nhập​

Triệu chứng: Không thể đăng nhập vào hệ thống Giải pháp:

  • Kiểm tra username/password
  • Liên hệ IT Support để reset thông tin đăng nhập

5.2. Lỗi Project ID không hợp lệ​

Triệu chứng: Thông báo "Project ID not found" hoặc "Invalid project" Giải pháp:

  • Kiểm tra lại Project ID đã nhập
  • Đảm bảo Project ID không có khoảng trắng thừa
  • Liên hệ IT Support để xác nhận Project ID

5.3. Lỗi tải file​

Triệu chứng: Upload file thất bại hoặc bị gián đoạn Giải pháp:

  • Kiểm tra kích thước file (không quá 100MB)
  • Đảm bảo file ZIP không bị corrupt
  • Thử upload lại với kết nối internet ổn định

5.4. Lỗi build​

Triệu chứng: Quá trình build thất bại, log hiển thị lỗi npm Giải pháp:

  • Kiểm tra file package.json có script "build" không
  • Đảm bảo dependencies trong package.json đúng
  • Thử build local trước khi upload

5.5. Lỗi triển khai Firebase​

Triệu chứng: Build thành công nhưng deploy lỗi Giải pháp:

  • Kiểm tra quyền truy cập Firebase project
  • Liên hệ IT Support để kiểm tra cấu hình Firebase

5.6. Ứng dụng không hoạt động sau triển khai​

Triệu chứng: Trang web hiển thị lỗi 404 hoặc không load Giải pháp:

  • Xóa cache trình duyệt (Ctrl+F5)
  • Kiểm tra file index.html có trong thư mục gốc không
  • Kiểm tra đường dẫn tương đối trong ứng dụng

6. Best Practices​

6.1. Chuẩn bị file​

  • Luôn test build local trước khi upload
  • Loại bỏ thư mục node_modules khỏi source code
  • Đảm bảo file ZIP không quá 100MB

6.2. Đặt tên file​

  • Sử dụng tên file có ý nghĩa: project-name-v1.0.zip
  • Tránh ký tự đặc biệt trong tên file
  • Ghi chú version để dễ theo dõi

6.3. Kiểm tra trước triển khai​

  • Test ứng dụng trên môi trường local
  • Kiểm tra responsive design
  • Verify các API endpoints (nếu có)

6.4. Sau triển khai​

  • Test ứng dụng trên nhiều trình duyệt
  • Kiểm tra performance với tools như Lighthouse
  • Backup file ZIP để triển khai lại nếu cần

7. Câu hỏi thường gặp (FAQ)​

Q: Tôi có thể triển khai nhiều version của cùng một ứng dụng không? A: Mỗi Project ID chỉ có thể host một version tại một thời điểm. Version mới sẽ ghi đè lên version cũ.

Q: Thời gian triển khai thường mất bao lâu? A: Thời gian phụ thuộc vào kích thước ứng dụng:

  • Ứng dụng đã build: 2-5 phút
  • Ứng dụng cần build: 5-15 phút

Q: Có giới hạn số lần triển khai không? A: Không có giới hạn cứng, nhưng nên tránh triển khai quá thường xuyên để không ảnh hưởng đến hệ thống.

Q: Tôi có thể rollback về version trước không? A: Hệ thống không hỗ trợ rollback tự động. Bạn cần upload lại version cũ để rollback.

Q: Hỗ trợ domain tùy chỉnh không? A: Liên hệ IT Support để cấu hình custom domain cho Firebase project.

8. Liên hệ hỗ trợ​

IT Support Team

  • Slack: ai-transform
  • Ticket System: [Wireframe Deploy]

Version: 1.0