firebase functions next example

Contoh baru, contoh baru di Firebase-GCP-Exciles

---

NEXT.js SSR Aplikasi di Fungsi Cloud untuk Firebase dengan Firebase Hosting

Host A Next.js SSR React App pada fungsi cloud untuk firebase dengan hosting firebase.

Berikut ini adalah posting medium yang menyertainya. Posting baru sedang ditulis untuk menggambarkan struktur proyek baru, penyebaran parsial firebase, dukungan firebase dari kait pre/post-deploy dan masalah apa yang dipecahkan fitur-fitur baru ini.

Mengapa?

Tuan rumah aplikasi SSR Next.js Anda pada fungsi cloud yang memungkinkan pengalaman aplikasi SSR yang berbiaya rendah dan berskala otomatis memanfaatkan pengalaman pengembang manis Firebase.

Bagaimana?

Hosting Firebase dapat menulis ulang rute ke fungsi cloud yang melayani aplikasi sisi server kami yang diberikan selanjutnya.js. Menggunakan aturan penulisan ulang yang menangkap semua rute, kami dapat meng -host aplikasi SSR kami di URL hosting firebase kami alih -alih URL fungsi cloud Firebase.

alih-alih:

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

kita bisa menggunakan:

<project-name>.firebaseapp.com/

Next.js kemudian dapat digunakan untuk mencapai SSR React dengan hot-module reload, server dan routing sisi klien, pemisahan kode level rute, prefetching rute dan banyak lagi!

Sejumlah masalah dengan hosting SSR di firebase diatasi dengan metode ini. Silakan merujuk ke Medium Post sebelum membuat masalah di sini.

Penting!

• Contoh ini menggunakan firebase-tools sebagai ketergantungan devdependensi yang dijalankan dari node_modules/.bin/ folder melalui yarn . Benang akan menjalankan skrip dari skrip package.json atau biner dari node_modules/.bin/ . npm run tidak memeriksa folder .bin untuk executable, jadi jika Anda menggunakan npm Anda harus mengubah skrip untuk secara eksplisit menjalankan biner firebase dari node_modules/.bin/ atau menginstal firebase-tools secara global dan menghapusnya dari daftar DevDeps. Lihat contoh repo berikutnya.js untuk bagaimana saya merekomendasikan menggunakan npm .

• Pastikan Anda menjalankan Node 6.11.5 karena emulator fungsi memerlukan ini. Saya merekomendasikan ASDF sebagai manajer versi dan telah menambahkan file ASDF .tool-versions untuk menentukan runtime node.

• Jika menggunakan _app.js , Anda dapat menerima kesalahan berikut pada fungsi cloud yang Anda gunakan:

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  Meskipun Next.js memiliki @babel/runtime sebagai ketergantungan, Anda harus menginstalnya sebagai ketergantungan secara langsung dalam proyek ini.

Instalasi

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

Masuk ke Firebase Cli

Ini digunakan sebagai ketergantungan dev, bukan instalasi global. Saya telah menemukan ini sebagai pengalaman dev yang jauh lebih baik.

yarn fblogin

Next.js Development

Pengembangan Standar Next.js dengan Hot-Module Reloading dll

yarn dev

Pengujian lokal

yarn serve

Ini akhirnya berhasil sekarang! Catatan: Anda harus memiliki ID proyek Firebase yang valid yang ditentukan dalam file .firebaserc sebagai perintah serve memang memeriksa apakah proyek ada. Saya percaya ini berkaitan dengan memastikan rute relatif selaras dengan aplikasi Anda yang digunakan karena <project id> digunakan dalam URL Anda.

Bagi mereka yang ingin menggali lebih dalam apa yang sebenarnya terjadi di sini jalankan perintah ini:

yarn serve --debug

Digerikan ke Firebase

Anda perlu menghubungkan proyek ke proyek Firebase Anda. Edit nama di .fireBaserc atau jalankan firebase init dan pilih untuk tidak mengesampingkan file apa pun.

Menyebarkan sumber daya hosting dan fungsi cloud menulis ulang

yarn deploy-app

Menerapkan fungsi yang tidak digunakan untuk SSR

Menyebarkan semua fungsi yang ditentukan dalam grup fungsi. Edit skrip ini untuk menambahkan lebih banyak grup fungsi. - Lihat Dokumen Penyebaran Parsial untuk Cara Menggunakan Grup Fungsi.

yarn deploy-funcs

Menyebarkan semuanya ke firebase

yarn deploy-all

Bersihkan folder dist

yarn clean

Catatan tentang Kompatibilitas Kode

Semuanya diuji pada Ubuntu 17.04 dengan bash. Ini harus bekerja pada bash di Ubuntu di Windows tanpa perubahan. Jika Anda menginginkan dukungan Windows asli, silakan kirimkan masalah sehingga kami dapat mengerjakan kompatibilitas Windows. Harap laporkan kesalahan MacOS karena saya tidak memiliki akses ke perangkat untuk diuji. Lingkungan pengembangan saya dapat ditemukan di sini.