Vue.js Projesinin Firebase Hosting’e Deploy Edilmesi

Selamlar. Bu yazının konusu Vue.js Projesinin Firebase Hosting’e Deploy Edilmesi olacak. Bir önceki yazıda Flask RESTful kütüphanesini kullanarak nasıl REST API oluşturulacağını anlatmıştım. Belki orada yer alan back-end api ile front-end projelerini harmanlayabilirsiniz.

Vue.js Projesinin Firebase Hosting'e Deploy Edilmesi

 

Vue.js Projesinin Firebase Hosting’e Deploy Edilmesi

Öncelikle bu yazıda Vue.js üzerinden anlatım yapıyorum ancak siz kullandığınız herhangi bir framework kullanarak bunu yapabilirsiniz. Kısacası firebase hosting için framework bağımlı bir yapısının olmadığını söyleyebiliriz.

Başlamadan önce Firebase Console sayfasına giderek kendimize bir proje oluşturalım. Aslında dilersek bunu firebase cli ile de yaparız ama buradan kullanmak istedim bu yazı için. Firebase Hosting kullanacak projenizi oluşturduktan sonra yapacağımız şey CLI kurulumunu yapmak. Bu işlem için sisteminizde npm kurulu olmalı.

Firebase Tools CLI Kurulumu

Kurmak için aşağıdaki komutu verelim:

Firebase tools başarıyla kurulduktan sonra bu araç yardımıyla sisteme giriş yapmamız gerekiyor.

Firebase Login İşlemi

Aşağıdaki komut çalıştırıldığında varsayılan tarayıcınızda bir yetkilendirme sayfası açılacak.

Klasik bildiğiniz oAuth2 sayfası açıldığında izin gerektiğini göreceksiniz. İzin verdiğinizde Firebase Tools CLI konusunda artık yetkiye sahip olacaksınız. Açılan tarayıcı sekmesini kapatın. Konsol ekranına bakın gmail adresinizi gösteren bir başarılı mesajı ekranda belirecek.

Firebase Proje Init İşlemi

Projenizin bulunduğu dizinde firebase yapılandırmasını aktif etmek için konsoldan aşağıdaki komutu verin

Bu komut çalıştırıldığında karşınıza şu ekran gelecek:

Vue.js Projesinin Firebase Hosting'e Deploy Edilmesi

Bu bildiğiniz klasik bir menü. Öncelikle oklarla aşağıya inelim ve hosting seçili olduğunda space’e basalım. Yuvarlak düğme yeşil olduysa tamamdır enter’a basalım. Ardından karşımıza firebase için public klasörünü seçeceğiz. Ben burada dist diyorum. Çünkü vue projelerini build ettiğinizde dist klasörüne çıkıyor.

Vue.js Projesinin Firebase Hosting'e Deploy Edilmesi

Bir sonraki adımda ise bu proje bir single page application için yapılandırılsın mı diyor. Buna da evet diyelim. Eğer dist klasörü boş değilse üzerine yazayım mı diyecek. Burası size kalmış. Sonunda tüm işlemler tamamsa bu ekranı göreceğiz

Vue.js Projesinin Firebase Hosting'e Deploy Edilmesi

 

Ardından vue projemizi build edelim.

Vue Projesini Production Mode İçin Build Etme

Bu aslında vue özelinde bir durum ama bildiğiniz gibi şöyle olacak.

Projemiz dist klasörüne çıkarıldı. Şimdi dilersek projemizi firebase tarafından localde serve edelim.

Projeyi Firebase ile Serve Etme

Projemizi aşağıdaki komut ile localde çalıştıralım:

Bu komut ile projemiz 5000 portunda dev server gibi çalışacaktır. Kontrol edebilirsiniz. Ve son adım olarak projenin deploy edilmesi kalıyor.

Projeyi Firebase CLI ile Deploy Etme

Bunun için aşağıdaki komutu verelim

Vue.js Projesinin Firebase Hosting'e Deploy Edilmesi

 

Evet projemiz deploy edildi. Benim oluşturduğum proje şu adreste şu anda çalışır durumda:

https://my-vue-firebase.firebaseapp.com/#/

Tam olarak hatırlamıyorum ama adımlardan birisinde belki bu işlemi hangi proje için yapacağınızı sorabilir. Onun haricinde her şey doğru bir şekilde gerçekleştirildi.

Evet bu yazının konusu Vue.js Projesinin Firebase Hosting’e Deploy Edilmesi oldu. Umarım faydalı olacaktır. Eğer konu hakkında hatalı ya da eksik bir nokta var ise yorumla belirtmeniz durumunda düzelteceğim.

Okuduğunuz için teşekkür ederim. İyi çalışmalar.