VueJS hakkında soru

[khazadum]

Merhabalar,

Projelerimizde frontend mimarisi olarak VueJS kullanmaya karar verdik. Hatta ilk ürünümüzü VueJS ile birlikte çıkarttık diyebilirim. İş build noktasına kadar geldi. Backend mimarisinde Django Rest Framework kullanıyoruz. Datalarımız ise PostgreSQL 'de. Şimdi projeyi bitirdikten sonra bir tane ciddi büyük bir problem ile karşılaştık. Sorun şu;

axios ile veri çekmek istediğimiz baseURL'e localhost veya 127.0.0.1 yazdığımızda VueJS, datayı client taraflı bilgisayarda aramaya çalışıyor ve eğer veritabanı client tarafında değilse doğal olarak hata veriyor. VueJS'in client-side tarafına hitap eden bir framework olduğunu varsarayak bu problemi yaşadığımızı düşünüyorum.

İnternette yaptığım araştırmalar sonucunda server side rendering için Quasar veya NuxtJS kullanın demiş VueJS. (Doküman burda) Projemizi hızlı çıkartmak adına themeforest 'ten hazır bir admin template aldığımız için VueJS tarafında Quasar'ı veya NuxtJS 'i implode etmek bizim için imkansıza yakın bir durum. Projemizi baştan yazmak ile aynı hemen hemen. VueJS'in kendi server side rendering konusunu da denedik bir kaç sayfa da ama dediğim gibi hazır bir tema kullandığımız için çok sorun oluyor. (Doküman burda) 

İlk ürün için yapacak çok fazla birşeyimiz yok sanırım. VueJS ile django tarafına bir kontrol katmanı koyup backend ip'sini elle vereceğiz şimdilik. Ama diğer ürünlerimiz için bu problemi yaşamak istemiyoruz. Server side rendering için illa birşeyleri implode etmek mi gerekiyor? Bu konuda VueJS ile birşeyler yapıp tecrübe edinen oldu mu? Nasıl bir yöntem izlememiz gerekiyor?

Teşekkürler.

[Lancelion]

projeyi bir yere kadar getirdikten sonra bunlara carpmaniz garip olmus. production'a ciktiktan sonra localhosttan degil, kendi domaininizden site.com/v1/api gibi bir endpointten data cekmelisiniz. nginx vb. ilgilenen var mi takiminizda ? bunun icin ssr'a donmenize gerek yok.

vue ile spa yapacaksaniz araya broker falan da koyabilirsiniz, websocket de kullanabilirsiniz server ile konusmak icin, ozellikle eger usecase'iniz realtime ise..

[Oce4n]

terimlerde bir karmaşa mı olmuş acaba?

127.0.0.1 yazdığınız şeyler zaten sunucuya gidiyordur. localinizde bir sunucu var ki 127.0.0.1 karşılık veriyor size.

vue içerisinde localhost/127.0.0.1 şeklinde yazdıysanız ilk sorununuz burası zaten. url'leri yazarken domain specific terimlerden uzak durun ki hangi domaine girerse girsin çalışır.

örnek veriyorum:

localhost/api/getcustomer/1
yerine
/api/getcustomer/1

[khazadum]

@Lancelion

Yaptığımız yazılımlar networkte çalışan, kapalı sistemlerdeki dataları okuyup işlem yapan yazılımlar. O yüzden endpointten çıkış veremiyoruz. Realtime bir datamız yok şu anda build ettiğimiz projede.

 

@Oce4n

Şu şekilde açıklayayım;

Bir tane sunucumuz var; IP adresi 10.1.1.100, bu sunucunun içinde python, postgre, node, apache kurulu.

 

Projeminizin backend mimarisini django rest framework ile geliştiriyoruz.

Bunun için kullandığımız API adresi; http://10.1.1.100:8000 

API konusunda bir problem yok. Postman ile bağlanıp işlemler yapabiliyoruz herhangi bir sıkıntımız yok. 

 

Projemizin frontend mimarisini geliştirirken node, vuejs kullandık. İşlemleri bitirip baseURL'e localhost veya 127.0.0.1 yazınca API hata veriyor. (ki ikisi de aynı sunucu üzerinde çalışıyor)

 

const ApiService = {
  init() {
    Vue.use(VueAxios, axios);
    Vue.axios.defaults.baseURL = "http://10.1.1.100:8000/";
    //Vue.axios.defaults.baseURL = "http://localhost:8000/";
    //Vue.axios.defaults.baseURL = "http://127.0.0.1:8000/";
  }
}

 

Vuejs tarafında axios url'sini 127.0.0.1 veya localhost yazıp build ediyoruz. Build ettikten sonra çıkan dist klasörünün içindekilerini yine aynı sunucu üzerinde /var/www/htdocs (apache ve çalışıyor) içine atıp URL'den gitmeye çalıştığımızda API servisi hata veriyor. Problem burada.  

[Oce4n]

gene bir karışıklık var terimlerde. http://10.1.1.100:8000 adresiniz endpoint oluyor zaten. eğer sitenizi example.com gibi bir yerde çalıştırmak istiyorsanız example.com:8000 şeklinde karşılama yapmanız gerekiyor. özetle django'yu kurduğunuz makinenin adresini vermeniz lazım axios'a

[khazadum]

Şimdi şu şekilde mantık yürütmek gerekiyor -bence- ;

Ben kendi geliştirme ortamımda 10.1.1.100 ip 'li sunucu da geliştirmemi yaptım. İşimi bitirdim. Müşteriye gidip kurulum yapacağım. Müşterinin bu yazılım için ayırdığı sunucunun IP 'si farklı olabilir. Projeyi açık bir şekilde götürüp, kurulumları orada yapıp, ip adresini elle girip tekrar build etmek biraz mantıksız oluyor -bence-. Ben oraya 127.0.0.1 veya localhost yazmalıyım diye düşünüyorum.

Yukarda dediğim gibi yazılım dışa kapalı bir network içinde çalışabilir. 

Kasım 11, 2020 khazadum tarafından düzenlendi

[zeawee]

kafa karisikliginiza sebep olan sey, frontend'inizde (axios, vue vs.) calisan kodun da sanki backend'de deploy ettiginiz yerde calisiyormus gibi bir algi icinde olmaniz. Ancak frontend'de deploy ettiginiz sey, aslinda kim hangi browser'da calistiriyorsa orada calisan bir kod. "10.1.1.100" IP adresi, eger ki sen o kodu backend'in (apache vs) deploy edilgidi makinedeki browser icinde calistiriyorsan resolve edecek, ancak atiyorum ben browser'da acmaya kalksam local IP adresiniz benim icin anlamsiz olacagi icin (browser'i application gibi dusun, bana ozel bir yerde calisiyor) resolve olmayacak.

Bence frontend'deki kodun vs nerede calistigini, browser'in ne oldugunu, javascript'in nasil bir runtime oldugunu ve nerede calistigini anladiginizda soruna kendinizin cevap bulmasi en sagliklisi olacaktir. Burada herhangi birinin verdigi cevabi direk ezbere gerceklestirmeniz probleminizi anlamadiginiz icin ileride tekrar karsilasmaniza sebep olacak.

[khazadum]

Selam tekrardan,

Yukarda sorunumuzu tanımlarken; 

Alıntı

axios ile veri çekmek istediğimiz baseURL'e localhost veya 127.0.0.1 yazdığımızda VueJS, datayı client taraflı bilgisayarda aramaya çalışıyor ve eğer veritabanı client tarafında değilse doğal olarak hata veriyor. VueJS'in client-side tarafına hitap eden bir framework olduğunu varsarayak bu problemi yaşadığımızı düşünüyorum.

şeklinde belirtmiştim aslında. Mevcut yapılan projeyi gözden geçirmek şu an için mantıksız konumda bizim için. Yaptığımız projede mecburen endpoint IP'sini manuel gireceğiz.

Yaptığımız yazılımların çoğu dışa kapalı networkte çalışacak uygulamalar. Sadece sistemin yöneticisinin girebileceği, görebileceği ve işlem yapabileceği alanlar. Orta da public 'e açık herkesin erişebileceği bir bölüm yok. Mesela firebase de kullanabilirdim ama belki yazılımın kullanılacağı sunucu da internet erişimi bile olmayacak.

Aslında bilgi almak istediğim şey bundan sonraki projeler için neler yapmam gerektiği ile ilgiliydi. Bu konuda nasıl bir araştırmak yapmam lazım. Quasar veya NuxtJS kullanmalı mıyız? Bunun gibi bir problem yaşayan oldu mu?

[zeawee]

Anladim. Bu problemi cozmek icin best practicelerden biri, frontend kodunuzu bi reverse-proxy server'i uzerinden serve edip, proxy forwarding ile frontend'in attigi request'leri "private network" icerisinde gercek servise aktarmanizdir. Bunu yapmanin bircok yolu var, isterseniz toptan bi container icine gomebilirsinizi stand-alone, ya da static content serve eden NGINX, Apache vs tarzi bi server'iniz olur atiyorum, API request'lerinizi define edeceginiz rule'a gore gerekli servise forward eder. 

Bundan sonraki projelerinizde build asamanizda frontend script'leriniz compile (transpile daha dogrusu) edildigi asamada BASE_URL'inizi orada substitute etmeniz;

    - React kullansaniz mesela create-react-app direk process.env.REACT_BASE_URL gibi bir environment variable'ini direk otomatik substitute eder.

    - Vue icin NuxtJS bunun gibi bir sey sunuyor olabilir, ya da direk webpack kullanarak transpile asamasinda full kontrolunuz olarak da bunu saglayabilirsiniz.

Bunu yaptiktan sonra da, ne zaman deploy edecekseniz o anda;

$ VUE_APP_BASE_URL="domain/or/ip" vue build && deploy-static-content

gibi bi script ile direk deploy edebilirsiniz, build eden script'in bulundugu yer zaten URL'in nere olacagini bilecektir (container olur NGINX olur vs)

[Lancelion]

ekibinizde reverse proxy, nginx konusuna hakim biri yoksa biraz karistirin bu konulari abi, bu corbadaki eksik o olmus... internal tool olsa da reverse proxy'e veya ona yakin baska bir cozume ihtiyaciniz var. environment variable, config file vb. bir cok yol kullanabilirsiniz baska musterilerde baska ip/domain'den serve etmek icin...

appi komple SSR'e gecirmeniz daha cok ugrastiracaktir muhtemelen.

Kasım 11, 2020 Lancelion tarafından düzenlendi

[reyou]

Express ile fe yi host edin?