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.
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