Jika Anda membangun aplikasi Angular atau Next.js yang dirender server, lihat Firebase App Hosting generasi berikutnya, sebuah solusi full stack untuk framework web modern.
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Firebase Hosting terintegrasi dengan framework web modern yang populer termasuk Angular dan Next.js. Dengan menggunakan Firebase Hosting dan Cloud Functions for Firebase dengan framework ini, Anda dapat mengembangkan aplikasi dan microservice di lingkungan framework pilihan Anda, lalu men-deploy-nya di lingkungan server yang aman dan terkelola.
Dukungan selama pratinjau awal ini mencakup fungsi berikut:
Men-deploy aplikasi Web yang terdiri dari konten web statis
Men-deploy aplikasi Web yang menggunakan pra-rendering / Static Site Generation (SSG)
Men-deploy aplikasi Web yang menggunakan Rendering sisi server (SSR)—rendering server lengkap secara on demand
Firebase menyediakan fungsionalitas ini melalui Firebase CLI. Saat menginisialisasi Hosting di command line, Anda memberikan informasi tentang project Web yang baru atau yang sudah ada, dan CLI akan menyiapkan resource yang tepat untuk framework Web yang Anda pilih.
Sebelum memulai
Sebelum Anda mulai men-deploy aplikasi ke Firebase, tinjau persyaratan dan opsi berikut:
Firebase CLI versi 12.1.0 atau yang lebih baru. Pastikan untuk menginstal CLI menggunakan metode pilihan Anda.
Opsional: Penagihan diaktifkan di project Firebase Anda (wajib jika Anda berencana menggunakan SSR).
Menayangkan secara lokal
Anda dapat menguji integrasi secara lokal dengan mengikuti langkah-langkah berikut:
Jalankan firebase emulators:start dari terminal. Tindakan ini akan membangun aplikasi Anda dan menyajikannya menggunakan Firebase CLI.
Buka aplikasi web di URL lokal yang ditampilkan oleh CLI (biasanya http://localhost:5000).
Men-deploy aplikasi ke Firebase Hosting
Setelah siap membagikan perubahan Anda kepada dunia, deploy aplikasi ke situs live:
Jalankan firebase deploy dari terminal.
Periksa situs Anda di: SITE_ID.web.app atau PROJECT_ID.web.app (atau domain kustom, jika Anda menyiapkannya).
Mengonfigurasi lingkungan yang berbeda
Anda dapat men-deploy beberapa set variabel lingkungan untuk lingkungan project yang berbeda, seperti staging dan produksi.
Seperti Cloud Functions for Firebase, alat ini mendukung format file dotenv untuk memuat variabel lingkungan yang ditentukan dalam file .env.
Jika memiliki alias project staging, Anda dapat men-deploy variabel lingkungan dari file .env.staging.
Jika memiliki alias project production, Anda dapat men-deploy variabel lingkungan dari file .env.production.
Jika memiliki project dengan ID PROJECT_ID, Anda dapat men-deploy variabel lingkungan dari file .env.PROJECT_ID.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-09-05 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)"]]
