If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Firebase Hosting tích hợp với các khung web hiện đại phổ biến, bao gồm Angular và Next.js. Khi sử dụng Firebase Hosting và Cloud Functions for Firebase với các khung này, bạn có thể phát triển các ứng dụng và vi dịch vụ trong môi trường khung ưu tiên của mình, sau đó triển khai chúng trong một môi trường máy chủ được quản lý và bảo mật.
Trong bản dùng thử sớm này, chúng tôi hỗ trợ các chức năng sau:
Triển khai các ứng dụng Web bao gồm nội dung tĩnh trên web
Triển khai các ứng dụng web sử dụng tính năng kết xuất trước / Tạo trang web tĩnh (SSG)
Triển khai các ứng dụng web sử dụng tính năng Kết xuất phía máy chủ (SSR) – kết xuất đầy đủ phía máy chủ theo yêu cầu
Firebase cung cấp chức năng này thông qua CLI Firebase. Khi khởi động Hosting trên dòng lệnh, bạn cung cấp thông tin về dự án Web mới hoặc hiện có của mình và CLI sẽ thiết lập các tài nguyên phù hợp cho khung Web mà bạn chọn.
Trước khi bắt đầu
Trước khi bắt đầu triển khai ứng dụng lên Firebase, hãy xem xét các yêu cầu và lựa chọn sau:
Firebase CLI phiên bản 12.1.0 trở lên. Đảm bảo bạn cài đặt CLI bằng phương thức mà bạn muốn.
Không bắt buộc: Đã bật tính năng thanh toán cho dự án Firebase của bạn (bắt buộc nếu bạn dự định sử dụng SSR)
Phân phát tại địa phương
Bạn có thể kiểm thử quá trình tích hợp cục bộ bằng cách làm theo các bước sau:
Chạy firebase emulators:start từ thiết bị đầu cuối. Thao tác này sẽ tạo ứng dụng của bạn và phân phát ứng dụng đó bằng CLI Firebase.
Mở ứng dụng web tại URL cục bộ do CLI trả về (thường là http://localhost:5000).
Triển khai ứng dụng trên Firebase Hosting
Khi bạn đã sẵn sàng chia sẻ các thay đổi của mình với mọi người, hãy triển khai ứng dụng cho trang web đang hoạt động của bạn:
Chạy firebase deploy từ thiết bị đầu cuối.
Kiểm tra trang web của bạn trên: SITE_ID.web.app hoặc PROJECT_ID.web.app (hoặc miền tuỳ chỉnh của bạn, nếu bạn thiết lập một miền).
Định cấu hình các môi trường khác nhau
Bạn có thể triển khai nhiều nhóm biến môi trường cho các môi trường dự án khác nhau, chẳng hạn như môi trường dàn dựng và môi trường phát hành công khai.
Giống như Cloud Functions cho Firebase, công cụ này hỗ trợ định dạng tệp dotenv để tải các biến môi trường được chỉ định trong tệp .env.
Nếu có một bí danh dự án staging, bạn có thể triển khai các biến môi trường từ tệp .env.staging.
Nếu có một bí danh dự án production, bạn có thể triển khai các biến môi trường từ tệp .env.production.
Nếu có một dự án có mã nhận dạng là PROJECT_ID, bạn có thể triển khai các biến môi trường từ tệp .env.PROJECT_ID.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-08 UTC."],[],[],null,["\u003cbr /\u003e\n\nFirebase Hosting integrates with popular modern web frameworks including Angular\nand Next.js. Using Firebase Hosting and Cloud Functions for Firebase with these\nframeworks, you can develop apps and microservices in your preferred framework\nenvironment, and then deploy them in a managed, secure server environment.\n\nSupport during this early preview includes the following functionality:\n\n- Deploy Web apps comprised of static web content\n- Deploy Web apps that use pre-rendering / Static Site Generation (SSG)\n- Deploy Web apps that use server-side Rendering (SSR)---full server rendering on demand\n\nFirebase provides this functionality through the Firebase CLI. When initializing\nHosting on the command line, you provide information about your new or existing\nWeb project, and the CLI sets up the right resources for your chosen Web\nframework.\n| **Note:** Framework-aware Hosting is an early public preview. This means that the functionality might change in backward-incompatible ways. A preview release is not subject to any SLA or deprecation policy and may receive limited or no support.\n\nBefore you begin\n\nBefore you get started deploying your app to Firebase,\nreview the following requirements and options:\n\n- Firebase CLI version 12.1.0 or later. Make sure to [install the CLI](/docs/cli#install_the_firebase_cli) using your preferred method.\n- Optional: Billing enabled on your Firebase project (required if you plan to use SSR)\n\nServe locally\n\nYou can test your integration locally by following these steps:\n\n1. Run `firebase emulators:start` from the terminal. This builds your app and serves it using the Firebase CLI.\n2. Open your web app at the local URL returned by the CLI (usually http://localhost:5000).\n\nDeploy your app to Firebase Hosting\n\nWhen you're ready to share your changes with the world, deploy your app to your\nlive site:\n\n1. Run `firebase deploy` from the terminal.\n2. Check your website on: `SITE_ID.web.app` or `PROJECT_ID.web.app` (or your custom domain, if you set one up).\n\nConfigure different environments\n\nYou can deploy multiple sets of environment variables for different project environments, such as staging and production.\n\nLike Cloud Functions for Firebase, this tooling supports the [dotenv](https://www.npmjs.com/package/dotenv) file format for loading environment variables specified in a .env file.\n\n- If you have a `staging` project alias, you can deploy environment variables from a `.env.staging` file.\n- If you have a `production` project alias, you can deploy environment variables from a `.env.production` file.\n- If you have a project with id `PROJECT_ID`, you can deploy environment variables from a `.env.PROJECT_ID` file.\n\nSee the [Cloud Functions documentation](https://firebase.google.com/docs/functions/config-env?gen=2nd#deploying_multiple_sets_of_environment_variables) for a detailed guide.\n\nNext steps\n\nSee the detailed guide for your preferred framework:\n\n- [Angular](/docs/hosting/frameworks/angular)\n- [Next.js](/docs/hosting/frameworks/nextjs)\n- [Flutter Web](/docs/hosting/frameworks/flutter)\n- [Frameworks with Express.js](/docs/hosting/frameworks/express)"]]
