Vuepress 2'yi Firebase ile Yayınlama
İçerik:
Firebase Hosting
Firebase nodejs tabanlı uygulamalar için çok iyi bir barındırma ayınlama altyapısı sunuyor. Firebase ücretsiz kullanımlarda veritabanını varsayılan olarak açık erişimde sunuyor bu da dikkat edilmezse geliştiriciler için önemli güvenlik zafiyetine yol açabilir. Ama static site yayınlamak isteyen kullanıcılar için şu an maliyetsiz güzel bir imkan sağlıyor.
Buradan Firebase'de bir proje oluşturarak daha sonra aşağıdaki adımları izleyerek nodejs tabanlı projelerinizi Fİrebase üzerinde host edebilirsiniz. Firebase otomatik subdomainler oluşturarak sitenizi yayınlıyor ancak siz kendi domaininizi de yayın grubuna ekleyebiliyorsunuz. Hatta Cloudflare üzerinden yönlendirme yaparsanız oradaki raporlama proxy gibi imkanlarla bereber tadından yenmez. 😃
Burada vuepress 2 için süreci anlatıyor olacağım, ama diğer nodejs (vite, vuecli, vb.) projeleri için süreç neredeyse aynı.
Firebase Tools'un projeye yüklenmesi
Projeye firebase erişimi sunmak için aşağıdaki gibi firebase-tools yüklememiz gerekiyor.
npm install -g firebase-tools
Firebase'i Başlatma (Init)
Öncelikle proje üzerinden Firebase'e login olmamız gerekiyor. Bunun için konsolda proje dizinimiz üzerinden çalıştıracağımız kod:
firebase login
Login işlemini başarı ile tamamladıktan sonra projemiz için firebase yapılandırmasını yapmak üzere init komutunu kullanacağız.
firebase init
Firebase sürümüne bağlı olarak bazı değişiklikler olabilir. Ama genel olarak aşağıdaki gibi adımlar ve sorular karşımıza çıkacaktır.
..\my-project> firebase init ######## #### ######## ######## ######## ### ###### ######## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ######## ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## You're about to initialize a Firebase project in this directory: ..\my-project- Are you ready to proceed?
- 'Y' cevabı ile devam ediyoruz
- Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
- Burada Firebase'in hangi imkanlarından/özelliklerinden proje içerisinde yararlanacağımızı belirtiyoruz. Github ayarlarının dahil olduğu bir seçenekle beraber iki hosting seçeneğii mevcut. Aşağıdaki yalnız seçenek ile devam edebiliriz.
- Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
- Projeye dair 'Please select an option:' şeklinde bir soru çıkıyor. Daha önce proje oluşturduğumuz için 'Use an existing project' ile devam ediyoruz.
- Firebase içerisinde var olan projelerimizden birini seçmemiz isteniyor 'Select a default Firebase project for this directory:' burada Firebase projmizi seçerek devam ediyoruz.
- ' What do you want to use as your public directory?' ile deploy edilecek klasörü belirmemiz isteniyor. Genel olarak Vuepress'te build sonrası publish klasörümüz '.vuepress/dist' olur. Bu koşulda burada kaynak klasörümüz isminin 'src' olduğu durumda 'src/.vuepress/dist' yazmamız gerekir.
- Configure as a single-page app (rewrite all urls to /index.html)?
- 'N' cevabı ile devam ediyoruz.
- Set up automatic builds and deploys with GitHub?
- Yine 'N' cevabı ile devam edebiliriz.
Projenin Derlenmesi
Projemizi Fİrebase'e göndermeden önce derlememiz gerekiyor. Bu derleme sonrasında 'dist' klasöründe static site sayfalarımız oluşacaktır. Vuepress 2'de Derleme için:
Firebase Deploy
Derleme sonrası projemizi Firebase'e deploy etmek için aşağıdaki komutu çalıştırıyoruz.
firebase deploy
Kodun çalışması tamamlandığında artık projemiz Firebase üzerinde yayınlanıyor olmalı. Deploy sonrası herhangi bir olumsuzlu durumunda 'firebase.json' dosyasından klasör seçiminin doğru olduğunu ve '.firebaseserc' dosyasından da projenin doğru seçilip seçilmedini teyid edebiliriz.
Projenin Firebase üzerinde Güncellenmesi
Projemizdeki her değişiklik sonrası yayınlanması istediğimizde önce derleyip edip akabinde Firebase'e deploy etmemiz gerekmektedir. Bu deploy sürecinde bazı durumlarda tekrar Firebase'e login olmamız istenebilir.