Webflow Sayfalarını Rails Uygulaması ile Aynı Subdomain'de Görüntülemek

Bu yazının İngilizce versiyonunu kendi blogumda paylaşmıştım. Burada da türkçesini paylaşmak istedim.

İngilizce versiyonu için: Serve Webflow Pages On The Same Subdomain With Rails App

Arkaplan

Webflow, herhangi bir kodlama veya tasarım bilgisi gerektirmeden web sayfaları geliştirebileceğiniz bir platformdur. Genellikle statik sayfaları geliştirirken veya pazarlama sayfalarını geliştirirken yazılımcıların yardımına ihtiyaç duyulmadan, daha hızlı bir şekilde web sayfası geliştirilmesini sağlamaktadır.

Halihazırdaki bir çok içerik yönetim sistemi bir subdomain’i tamamen sahiplenmek üzerine tasarlanmıştır. İnternet’te örneklerine rastlayabileceğiniz şekilde uygulamaların websiteleri genellikle www subdomain’ini kullanırken, app subdomain’inde de uygulamanın kendisi barındırılmaktadır.

Hedef

Bu projedeki hedefimiz sayfaların hangi uygulama tarafından oluşturulduğundan bağımsız olarak bütün sayfalarımızı www subdomain’inde barındırmaktı. Ayrıca halihazırda Rails ile geliştirilmiş olan /about-us ya da /terms-of-use gibi sayfalarımızı da Rails uygulamasından çıkartarak Webflow üzerinde barındırmak istedik. Bir başka hedefimiz ise /blog/* sayfalarını da yine aynı subdomain altında barındırarak arama motoru optimizasyonu konusunda blog için üretilen içeriklerin katkı yapmasını sağlamaktı.

Sayfa URL’lerini ve bu sayfaların hangi uygulama tarafından barındırılacağını aşağıdaki tablodaki gibi hedefledik:

URL Sayfa İsmi Barındıran Uygulama
http://www.example.com Anasayfa Rails
http://www.example.com/about-us Hakkımızda Webflow
http://www.example.com/blog/posts/1 Blog Yazısı Webflow
http://www.example.com/login Giriş Yap Rails
http://www.example.com/sign_up Kayıt Ol Rails

Webflow Ayarları

Webflow’u bir subdomain’den sayfa barındırmak için ayarlamamız gerekiyor. Bunun için projenin ayarlar kısmından “Hosting” sekmesi altından bulunan “Custom Domains” kısmına webflow.example.com URL’ini eklememiz gerekiyor.

Screen Shot 2021-06-27 at 11.13.42


DNS Ayarları

Bu aşamada webflow.example.com adresine gelen istekleri Webflow’a iletmemiz gerekiyor. Bunun için alan adımızın olduğu ürünün DNS ayarları kısmından CNAME kaydı olarak değeri webflow olan ve hedefi proxy-ssl.webflow.com olan yeni bir kayıt eklememiz gerekiyor. Eğer DNS sağlayıcısı olarak CloudFlare kullanıyorsanız “Proxied” seçeneğini kapatarak, sadece DNS seçeneğini etkinleştirmeniz gerekiyor.

Rails Projesi İçin Yapılması Gerekenler

Son aşamada Rails uygulamasının /about-us gibi URL’lere istek aldığında bu istekleri Webflow uygulamasına iletmesini sağlamamız gerekiyor. Bunun için rails-reverse-proxy kütüphanesini Gemfile dosyasına ekledikten sonra terminalde bundle komutunu çalıştırarak bu kütüphaneyi uygulamamıza eklememiz gerekiyor.

Aşağıda paylaşılan kod parçasını ise routes.rb dosyasının son satırına ekleyerek bu istekleri Rails uygulaması içerisinde nasıl yönlendireceğimizi belirleyebiliriz.

match '/*path' => 'webflow#index', via: [:get, :post, :put, :patch, :delete], constraints: lambda { |req|
  req.path.exclude? 'rails/active_storage'
}

Bu kod parçası Rails uygulamasına gelen bütün istekleri, eğer daha önce routes.rb dosyasında bu isteği karşılayan herhangi bir kısım yoksa Webflow uygulamasına yönlendiriyor. Burada active_storage kütüphanesi projemizde aktif olduğu için ve bu kütüphanenin kullandığı URL’ler routes.rb dosyasında tanımlanmadan otomatik olarak kütüphane tarafından projeye eklendikleri için bir istisna bulunması gerekiyor.

Ayrıca webflow_controller.rb isminde bir dosya oluşturarak:

class WebflowController < ApplicationController
  include ReverseProxy::Controller
  def index
    reverse_proxy ENV['WEBFLOW_URL'], path: params[:path] do |config|
      config.on_missing do
        render file: Rails.root.join('public', '404.html'), status: :not_found && return
      end
    end
  end
end

bu isteklerin rails-reverse-proxy kütüphanesi kullanılarak Webflow uygulamasına yönlendirilmesini sağlamamız gerekmektedir. Bu şekilde Webflow tarafından üretilen HTML yanıtını Rails uygulaması aracılığıyla kullanıcılarımıza iletmemiz mümkün oluyor. Ayrıca eğer Webflow uygulaması 404 Not Found, 500 Internal Server Error gibi hatalar dönerse, bunları da on_missing, on_error tanımlamalarla uygulamamızın bu durumlarda nasıl davranması gerektiğini kodlayabiliyoruz.

WEBFLOW_URL değişkeni https://webflow.example.com/ şeklinde tanımlanmalıdır. :path parametresi ile gelen isteğe göre değişmekle birlikte about-us ya da blog/posts/1 gibi değerler almaktadır.

Umarım bu yazı internette daha az app subdomain’ini görmemizi sağlar :slight_smile:

app ve benzeri subdomain’lere ben de çok gıcık oluyorum ama şu ana kadar çalıştığım her yerde böyle uygulanıyor. :frowning:

@eyupatis, sizin şirkette bu süreç nasıl gelişti? Biraz ondan da bahsedebilir misin? Mesela, ikna etmekle uğraştığınız kimseler oldu mu? Veya bu “özelliği” kime, nasıl pazarladınız?

Bu özelliğe duyulan ihtiyaç aslında growth ekibi tarafından oluştu. Projede bulunan birçok statik sayfa Rails tarafından render ediliyordu ve bu sayfalara yapılması gereken en ufak bir metin değişikliği bile yazılımcılar tarafından yapılıyordu. Şirket artık hızlı büyüme aşamasında olduğundan ve birçok landing page tasarlanmak istendiğinden bu sayfaların geliştirilmesini yazılımcılara gerek duymadan yapabilmek istedik. Hatta “biz Webflow kullanmak istiyoruz ve bunu mümkünse aynı subdomain altından yani www altından kullanabilmek istiyoruz, bu teknik olarak mümkün mü?” diye bir istekle bize gelinmişti ve biz de bu özelliği geliştirmiştik.

Bu yaklaşımla ilgili yaşanabilecek en temel problem iki uygulama arasında eğer oturum açmış bir kullanıcının bilgisini paylaşmak gerekiyorsa bazı ufak tefek düzenlemeler yapmak gerekiyor olabilir. Sayfalar temel olarak hala Rails tarafından render edildiği için aslında current_user gibi bir bilgiye ulaşmak mümkün. Bizim ihtiyaçlarımız arasında böyle bir durum yoktu ancak ileride bu bilgiye ihtiyaç duyarsak bunun da geliştirilmesinin mümkün olduğunu gördük.

1 Beğeni

Ekibin bu şekilde gelmesi çok hoşuma gitti. :ok_hand:

Dediğin gibi bilgi paylaşımı da bir şekilde çözülür eğer gerekirse.

Elinize sağlık! :clap: