Biraz ek yapılandırmayla, temel çerçeveye duyarlı CLI işlevini geliştirerek entegrasyon desteğini Angular ve Next.js dışındaki çerçeveleri de kapsayacak şekilde genişletebilirsiniz.
Başlamadan önce
Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki gereksinimleri ve seçenekleri inceleyin:
- Firebase CLI 12.1.0 veya sonraki sürümler. Tercih ettiğiniz yöntemi kullanarak KSA'yı yüklediğinizden emin olun.
- İsteğe bağlı: Firebase projenizde faturalandırma etkin (SSR kullanmayı planlıyorsanız gereklidir)
Firebase'i başlatma
Başlamak için çerçeve projenizde Firebase'i başlatın.
Yeni bir proje için Firebase CLI'ı kullanın veya mevcut bir proje için firebase.json
ayarını değiştirin.
Yeni bir projeyi başlatma
- Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:
firebase experiments:enable webframeworks
KSA'dan başlatma komutunu çalıştırın, ardından istemleri uygulayın:
firebase init hosting
"Web çerçevesi kullanmak ister misiniz? (deneysel)"
Barındırma kaynak dizininizi seçin. Bu, mevcut bir web uygulaması olabilir.
İstenirse, Express.js / özel seçeneğini belirleyin
Mevcut projeyi başlatma
firebase.json
ürünündeki barındırma yapılandırmanızı public
seçeneği yerine source
seçeneğine sahip olacak şekilde değiştirin. Örnek:
{
"hosting": {
"source": "./path-to-your-express-directory"
}
}
Statik içerik yayınlama
Statik içeriği dağıtmadan önce uygulamanızı yapılandırmanız gerekir.
Yapılandır
Uygulamanızı nasıl dağıtacağınızı öğrenmek için Firebase CLI'ın, hem uygulamanızı derleyebilmesi hem de araçlarınızın, Hosting'e yönelik öğeleri nereye yerleştirdiğini bilebilmesi gerekir. Bu, package.json
içindeki npm derleme komut dosyası ve CJS dizinleri yönergesiyle gerçekleştirilir.
Aşağıdaki package.json dosyasını dikkate alın:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Firebase CLI, yalnızca derleme komut dosyanızı çağırır. Bu nedenle, derleme komut dosyanızın kapsamlı olduğundan emin olmanız gerekir.
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Çerçeveniz kullanıma hazır ön işlemeyi desteklemiyorsa Rendertron gibi bir araç kullanabilirsiniz. Rendertron, uygulamanızın yerel bir örneğine karşı gözetimsiz Chrome istekleri yapmanıza olanak tanır. Böylece, oluşturulan HTML'yi Hosting'de sunulmak üzere kaydedebilirsiniz.
Son olarak, farklı çerçeveler ve derleme araçları eserlerini farklı yerlerde depolar. CLI'a, derleme komut dosyanızın oluşturulan yapıları nerede çıkardığını bildirmek için directories.serve
komutunu kullanın:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
"directories": {
"serve": "dist"
},
…
}
Dağıtma
Uygulamanızı yapılandırdıktan sonra standart dağıtım komutuyla statik içerik sunabilirsiniz:
firebase deploy
Dinamik İçerik Sunma
Express uygulamanızı Firebase için Cloud Functions'da sunmak üzere, Express uygulamanızın (veya ekspres stilde URL işleyicinin), kitaplığınız npm paketlendikten sonra Firebase'in bulabileceği şekilde dışa aktarıldığından emin olun.
Bunu yapmak için files
yönergenizin sunucu için gereken her şeyi içerdiğinden ve ana giriş noktanızın package.json
ürününde doğru şekilde ayarlandığından emin olun:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node tools/prerender.ts"
},
"directories": {
"serve": "dist"
},
"files": ["dist", "server.js"],
"main": "server.js",
...
}
Ekspres uygulamanızı app
adlı bir işlevden dışa aktarın:
// server.js
export function app() {
const server = express();
…
return server;
}
Ekspres stilde bir URL işleyiciyi dışa aktarmak isterseniz bunu handle
olarak adlandırın:
export function handle(req, res) {
res.send(‘hello world’);
}
Dağıtma
firebase deploy
Bu işlem, statik içeriğinizi Firebase Hosting'e dağıtır ve Firebase'in Cloud Functions for Firebase'de barındırılan Express uygulamanıza dönmesini sağlar.
İsteğe bağlı: Firebase Authentication ile entegrasyon
Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. Kimlik doğrulama bağlamına erişmek için Express res.locals
nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase uygulaması örneği (firebaseApp
) ve oturumu açık olan kullanıcıyı (currentUser
) içerir.