Ubuntu 18.04 Üzerinde Ruby on Rails v5 Projesi ve React Frontend Kurulumu

Ubuntu 18.04 Üzerinde Ruby on Rails v5 Projesi ve React Frontend Kurulumu

Bu makale, Ruby on Rails 5 çatısının güçlü arka yüz yeteneklerini React’in dinamik ve modern ön yüz geliştirme kabiliyetleriyle birleştirerek Ubuntu 18.04 işletim sistemi üzerinde nasıl bir uygulama oluşturulacağını adım adım açıklamaktadır. Rails ve React’in birleşimi, geliştiricilere hem hızlı API geliştirme imkanı sunan sağlam bir arka uç hem de zengin, etkileşimli kullanıcı deneyimleri sağlayan bir ön uç oluşturma esnekliği tanır.

Giriş: Rails, React ve Entegrasyonun Önemi

Ruby on Rails, “Convention over Configuration” (Yapılandırma Yerine Kural) felsefesiyle bilinen, web uygulamalarını hızlı bir şekilde geliştirmek için tasarlanmış açık kaynaklı bir web uygulama çatısıdır. Geliştiricilerin tekrarlayan görevler yerine iş mantığına odaklanmasına olanak tanıyan bir dizi araç, kütüphane ve yapısal desen sunar. Rails 5 sürümüyle birlikte Action Cable (gerçek zamanlı iletişim), API modu ve Webpacker gibi modern özellikler entegre edilmiştir, bu da onu modern web geliştirme ihtiyaçları için daha da güçlü kılmaktadır.

React ise Facebook tarafından geliştirilen, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı, sanal DOM (Document Object Model) kullanımı ve tek yönlü veri akışı sayesinde yüksek performanslı, ölçeklenebilir ve bakımı kolay ön yüz uygulamaları geliştirmeye olanak tanır. Özellikle tek sayfalık uygulamalar (Single Page Applications – SPA) ve karmaşık kullanıcı arayüzleri için tercih edilen bir çözümdür.

Rails’i bir arka uç API’si olarak kullanıp React’i ayrı bir ön uç olarak konumlandırmak, uygulamanın farklı katmanlarının bağımsız olarak geliştirilmesine ve ölçeklenmesine olanak tanır. Bu ayrım, geliştirme ekiplerinin farklı alanlara odaklanmasını kolaylaştırır, kod tabanını daha düzenli hale getirir ve gelecekteki değişiklikler için daha fazla esneklik sunar. Rails 5.1 ile tanıtılan Webpacker gem’i, Rails projelerine modern JavaScript araç zincirini (özellikle Webpack) sorunsuz bir şekilde entegre etmeyi mümkün kılarak bu entegrasyonu büyük ölçüde basitleştirmiştir.

Bu makalede, Ubuntu 18.04 üzerinde gerekli tüm bağımlılıkları kurmaktan, yeni bir Rails 5 projesi oluşturmaya, React bileşenlerini entegre etmeye ve basit bir etkileşimli uygulama geliştirmeye kadar tüm adımları detaylı bir şekilde ele alacağız.

Ön Koşullar ve Sistem Güncelleme

Bu kurulum rehberini takip etmek için aşağıdaki ön koşullara sahip olmanız gerekmektedir:

* Ubuntu 18.04 LTS: Bu makale özellikle Ubuntu 18.04 için yazılmıştır. Ancak, genel adımlar diğer Debian tabanlı Linux dağıtımları için de benzer olacaktır.
* Temel Linux Komut Bilgisi: Terminalde temel komutları (cd, ls, sudo vb.) kullanma yeteneği.
* İnternet Bağlantısı: Gerekli paketleri ve bağımlılıkları indirmek için.

Kuruluma başlamadan önce, sisteminizin güncel olduğundan emin olmak her zaman iyi bir uygulamadır. Terminali açın (Ctrl+Alt+T) ve aşağıdaki komutları çalıştırın:

sudo apt update
sudo apt upgrade -y

Bu komutlar, paket listelerinizi güncelleyecek ve mevcut tüm paketleri en son sürümlerine yükseltecektir.

Sistem Bağımlılıklarının Kurulumu

Ruby, Node.js ve diğer geliştirme araçlarını derlemek ve çalıştırmak için çeşitli sistem bağımlılıklarına ihtiyacımız olacak.

Gerekli Derleme Araçlarını Kurma

Ruby ve diğer yazılımları kaynak koddan derlemek için build-essential paketi ve çeşitli kütüphaneler gereklidir.

sudo apt install -y build-essential git curl libssl-dev libreadline-dev zlib1g-dev \
libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev \
software-properties-common libffi-dev nodejs npm

Bu komut, derleme araçlarının yanı sıra, Ruby’nin ihtiyaç duyabileceği SSL, readline, zlib, YAML, SQLite, XML/XSLT, cURL gibi kütüphaneleri ve Node.js ile npm’i kurar. Node.js ve npm’i bu şekilde kurmak yerine, daha esnek bir sürüm yönetimi için nvm kullanmayı tercih edeceğiz.

Node.js ve npm (veya Yarn) Kurulumu (nvm ile Önerilen)

Node.js ve npm, React uygulamalarını derlemek ve yönetmek için gereklidir. Birden fazla Node.js sürümünü yönetmek için Node Version Manager (nvm) kullanmak en iyi yöntemdir.

1. nvm Kurulumu:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Kurulumdan sonra, terminali kapatıp yeniden açmanız veya aşağıdaki komutu çalıştırmanız gerekebilir:

source ~/.bashrc

2. Node.js Kurulumu:

Şimdi nvm kullanarak Node.js’in en son LTS (Uzun Süreli Destek) sürümünü kurabiliriz:

nvm install --lts
    nvm use --lts

Kurulumu doğrulamak için:

node -v
    npm -v

Bu komutlar Node.js ve npm sürümlerini göstermelidir.

3. Yarn Kurulumu (İsteğe Bağlı ama Önerilir):

Yarn, npm’e alternatif olarak daha hızlı ve güvenilir bir paket yöneticisidir. Webpacker genellikle Yarn ile daha iyi çalışır.

npm install -g yarn

Kurulumu doğrulamak için:

yarn -v

Ruby Kurulumu (rbenv ile Önerilen)

Benzer şekilde, Ruby’nin farklı sürümlerini yönetmek için Ruby Version Manager (rbenv) kullanmak en iyi yöntemdir. Bu, farklı projeler için farklı Ruby sürümlerine ihtiyacınız olduğunda esneklik sağlar.

1. rbenv ve ruby-build Kurulumu:

git clone https://github.com/rbenv/rbenv.git ~/.rbenv
    echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
    echo 'eval "$(rbenv init -)"' >> ~/.bashrc

    git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
    echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc

    source ~/.bashrc

2. Ruby Kurulumu:

Rails 5.x serisi genellikle Ruby 2.5.x veya 2.6.x ile uyumludur. Bu makalede Ruby 2.5.3 kullanacağız.

rbenv install 2.5.3
    rbenv global 2.5.3

Kurulumu doğrulamak için:

ruby -v

Bu komut Ruby 2.5.3 sürümünü göstermelidir.

3. Bundler Kurulumu:

Bundler, Ruby projelerinin bağımlılıklarını yönetmek için kullanılan bir gem’dir.

gem install bundler
    rbenv rehash # rbenv'e yeni gem'leri tanıtmak için

PostgreSQL Veritabanı Kurulumu

Rails projeleri için genellikle PostgreSQL tercih edilir. Sağlamlığı ve gelişmiş özellikleri nedeniyle büyük ölçekli uygulamalar için idealdir.

1. PostgreSQL Sunucusunu Kurma:

sudo apt install -y postgresql postgresql-contrib libpq-dev

libpq-dev paketi, Ruby’nin PostgreSQL ile etkileşime girmesi için gereken geliştirme başlıklarını içerir.

2. PostgreSQL Kullanıcısı Oluşturma:

PostgreSQL varsayılan olarak postgres adlı bir süper kullanıcı oluşturur. Kendi sistem kullanıcınızla veritabanı oluşturabilmek için bir PostgreSQL kullanıcısı oluşturmanız gerekir.

sudo -u postgres createuser -s $(whoami)

Bu komut, mevcut Linux kullanıcı adınızı (örneğin, kullaniciadi) PostgreSQL’de bir süper kullanıcı olarak oluşturur. Alternatif olarak, etkileşimli olarak bir kullanıcı oluşturmak için:

sudo -u postgres createuser --interactive

Sorulduğunda, kullanıcı adınızı girin ve süper kullanıcı yetkileri verin.

Rails Projesi Kurulumu

Artık tüm ön koşullar ve bağımlılıklar yüklendiğine göre, yeni bir Rails projesi oluşturmaya başlayabiliriz.

Rails Gem’ini Kurma

İlk olarak, Rails gem’ini kurmalıyız. Rails 5.2.4 sürümünü hedefleyeceğiz.

gem install rails -v 5.2.4
rbenv rehash # rbenv'e yeni gem'i tanıtmak için

Yeni Bir Rails Projesi Oluşturma

Şimdi, React ön yüzü ve PostgreSQL veritabanı ile yeni bir Rails projesi oluşturalım. --webpack=react bayrağı, Rails’in Webpacker gem’ini React ile birlikte kurmasını sağlar ve React bileşenleri için varsayılan bir yapılandırma yapar.

rails new my_react_app --webpack=react --database=postgresql

Bu komut şunları yapacaktır:

* my_react_app adında yeni bir Rails projesi dizini oluşturur.
* Gerekli tüm Rails gem’lerini kurar (Bundler aracılığıyla).
* PostgreSQL veritabanı adaptörünü yapılandırır.
* Webpacker gem’ini ekler ve React ile çalışmak üzere yapılandırır.
* React için örnek dosyaları (hello_react.jsx gibi) oluşturur.

Proje dizinine geçin:

cd my_react_app

Veritabanı Oluşturma

Rails projesi oluşturulduktan sonra, veritabanını oluşturmamız gerekir:

rails db:create

Bu komut, config/database.yml dosyasında tanımlanan geliştirme ve test veritabanlarını PostgreSQL’de oluşturacaktır.

React Frontend’i Webpacker ile Kurulumu

Rails 5.1 ile birlikte tanıtılan Webpacker gem’i, modern JavaScript araç zincirini (Webpack, Babel, PostCSS vb.) Rails projelerine sorunsuz bir şekilde entegre etmenin standart yoludur. --webpack=react bayrağı ile bir Rails projesi oluşturduğumuzda, Webpacker zaten React için yapılandırılmış olarak gelir.

Webpacker Yapısını Anlama

Projenizin dizin yapısında, React ile ilgili önemli dosyaları app/javascript altında bulacaksınız:

* app/javascript/packs/: Bu dizin, Webpack’in giriş noktaları olan “pack” dosyalarını içerir. Her pack dosyası, uygulamanızın bir bölümünü veya tümünü temsil edebilir. Örneğin, application.js veya hello_react.jsx.
* app/javascript/components/: Genellikle React bileşenlerinizi düzenlemek için kullanılan bir dizin.
* config/webpacker.yml: Webpacker’ın ana yapılandırma dosyasıdır. Geliştirme, test ve üretim ortamları için farklı ayarları içerir.
* package.json: Node.js paket yöneticisi (npm veya Yarn) için bağımlılıkları ve script’leri tanımlayan dosya.

Basit Bir React Bileşeni Oluşturma

Şimdi, projemizde basit bir React bileşeni oluşturalım ve onu Rails görünümümüze entegre edelim.

1. React Bileşeni Oluşturma:

app/javascript/components dizinini oluşturun ve içine App.jsx adında bir dosya ekleyin:

mkdir -p app/javascript/components
    touch app/javascript/components/App.jsx

app/javascript/components/App.jsx içeriği:

import React from 'react';

    const App = (props) => {
      return (
        

          
          
Bu, Rails 5 ve React ile oluşturulmuş basit bir uygulamadır.
          
Props'tan gelen mesaj: {props.message}
        
      );
    };

    export default App;

2. application.js Pack Dosyasını Güncelleme:

app/javascript/packs/application.js dosyası, uygulamanızın ana JavaScript giriş noktasıdır. Burada React bileşenimizi içe aktaracağız ve DOM’a render edeceğiz.

app/javascript/packs/application.js içeriği:

// Rails'in varsayılan Webpacker pack dosyası
    require("@rails/ujs").start()
    require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")

    // React entegrasyonu için gerekli import'lar
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from '../components/App'; // Kendi App bileşenimizi import ediyoruz

    document.addEventListener('DOMContentLoaded', () => {
      ReactDOM.render(
        , // App bileşenimize bir prop geçiyoruz
        document.getElementById('react-root'),
      );
    });

Yukarıdaki kod, DOM yüklendiğinde App bileşenini react-root id’sine sahip bir HTML elemanına render edecektir.

3. Rails Görünümünü Oluşturma:

React bileşenimizi gösterecek bir Rails görünümüne ihtiyacımız var. Bir Welcome kontrolcüsü ve index eylemi oluşturalım:

rails generate controller Welcome index

Bu komut, app/controllers/welcome_controller.rb ve app/views/welcome/index.html.erb dosyalarını oluşturacaktır.

config/routes.rb dosyasını güncelleyerek index eylemini uygulamanın kök yolu yapalım:

# config/routes.rb
    Rails.application.routes.draw do
      root 'welcome#index'
      # Diğer rotalar buraya gelebilir
    end

Şimdi app/views/welcome/index.html.erb dosyasını düzenleyerek React bileşenimizin yerleşeceği div elemanını ve Webpacker tarafından oluşturulan JavaScript pack dosyasını ekleyelim:

    


    <%= javascript_pack_tag 'application' %>

javascript_pack_tag 'application' yardımcı yöntemi, Webpacker’ın app/javascript/packs/application.js dosyasını derleyip tarayıcıya sunmasını sağlar.

Uygulamayı Geliştirme ve Çalıştırma

Artık Rails ve React entegrasyonumuzun temelini attığımıza göre, uygulamayı çalıştırabilir ve geliştirmeye başlayabiliriz.

Rails Sunucusunu Başlatma

Terminalde proje dizininizdeyken Rails sunucusunu başlatın:

rails s

Bu komut, Rails uygulamasını varsayılan olarak http://localhost:3000 adresinde başlatır. Tarayıcınızda bu adrese gittiğinizde, React bileşeninizin içeriğini görmelisiniz.

Webpack Geliştirme Sunucusunu Başlatma (Hot Reloading için)

React bileşenlerinde yaptığınız değişikliklerin anında tarayıcıda görünmesini sağlamak için Webpack geliştirme sunucusunu ayrı bir terminalde çalıştırmanız önerilir. Bu, “Hot Module Replacement” (HMR) veya “Hot Reloading” olarak bilinen özelliği etkinleştirir.

Yeni bir terminal açın, proje dizininize gidin ve aşağıdaki komutu çalıştırın:

bin/webpack-dev-server

Bu sunucu varsayılan olarak http://localhost:8080 adresinde çalışır ve JavaScript/React dosyalarınızdaki değişiklikleri izler. Değişiklik yaptığınızda, sayfanın tamamını yenilemeden yalnızca ilgili modülü günceller.

Önemli Not: rails s ve bin/webpack-dev-server komutlarının aynı anda çalışıyor olması gerekmektedir. Rails sunucusu HTML’i ve API isteklerini sunarken, Webpack geliştirme sunucusu JavaScript ve CSS varlıklarını yönetir.

Basit Bir API Entegrasyonu

Rails’in API yeteneklerini kullanarak React ön yüzümüzden veri çekelim. Bir Post modeli oluşturalım ve bu post’ları React bileşenimizde gösterelim.

1. Post Kaynağı Oluşturma:

rails generate scaffold Post title:string content:text
    rails db:migrate

Bu komutlar, Post modeli, kontrolcüsü, görünümleri ve veritabanı migrasyonunu oluşturur. Ayrıca, API uç noktalarını da tanımlar.

2. Örnek Veri Ekleme (Rails Konsolu):

rails console

Post.create(title: "İlk Gönderi", content: "Bu bir Rails API'sinden gelen ilk gönderidir.")
    Post.create(title: "İkinci Gönderi", content: "React tarafından görüntülenecek ikinci gönderi.")
    exit

3. React Bileşenini Güncelleme:

app/javascript/components/App.jsx dosyasını, Rails API’sinden post’ları çekecek şekilde güncelleyelim. useState ve useEffect hook’larını kullanacağız.

// app/javascript/components/App.jsx
    import React, { useState, useEffect } from 'react';

    const App = (props) => {
      const [posts, setPosts] = useState([]);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);

      useEffect(() => {
        fetch('/posts') // Rails API'sinden post'ları çekiyoruz
          .then(response => {
            if (!response.ok) {
              throw new Error(HTTP error! status: ${response.status});
            }
            return response.json();
          })
          .then(data => {
            setPosts(data);
            setLoading(false);
          })
          .catch(error => {
            setError(error);
            setLoading(false);
          });
      }, []); // Boş bağımlılık dizisi, yalnızca bileşen ilk yüklendiğinde çalışmasını sağlar

      if (loading) return 
Yükleniyor...
;
      if (error) return 
Hata: {error.message}
;

      return (
        

          
          
Bu, Rails 5 ve React ile oluşturulmuş basit bir uygulamadır.
          
Props'tan gelen mesaj: {props.message}

          
Gönderiler
          {posts.length === 0 ? (
            
Henüz gönderi yok.
          ) : (
            

              {posts.map(post => (
                

                  
{post.title}
                  
{post.content}
                
              ))}
            
          )}
        
      );
    };

    export default App;

Değişiklikleri kaydettikten sonra, tarayıcınızda http://localhost:3000 adresini ziyaret ettiğinizde, Rails API’sinden çekilen gönderileri React bileşeninizde görmelisiniz.

Dağıtım Hususları

Geliştirme ortamında her şey yolunda gitse de, uygulamayı üretim ortamına dağıtırken bazı farklılıklar olacaktır.

* Varlıkların Derlenmesi: Üretim ortamında, Webpack geliştirme sunucusunu çalıştırmazsınız. Bunun yerine, tüm JavaScript ve CSS varlıklarını tek bir seferde derlemeniz gerekir. Bu işlem genellikle aşağıdaki komutla yapılır:

RAILS_ENV=production bundle exec rails assets:precompile
    # veya sadece Webpacker varlıkları için
    RAILS_ENV=production bundle exec rails webpacker:compile

Bu komut, tüm varlıkları optimize eder ve üretim için uygun hale getirir.
* Web Sunucusu: Geliştirme sırasında Puma (Rails’in varsayılanı) kullanırken, üretimde genellikle Nginx gibi bir ters proxy sunucu ile Puma veya Passenger gibi bir uygulama sunucusu kullanılır. Nginx, statik varlıkları sunarken, uygulama sunucusu dinamik Rails isteklerini işler.
* Veritabanı Yapılandırması: config/database.yml dosyasındaki üretim ortamı ayarlarının doğru olduğundan ve veritabanı kimlik bilgilerinin güvenli bir şekilde yönetildiğinden emin olun (örneğin, ortam değişkenleri kullanarak).
* Ortam Değişkenleri: API anahtarları, gizli sırlar gibi hassas bilgileri doğrudan kodunuza yazmak yerine ortam değişkenleri (örneğin, SECRET_KEY_BASE) aracılığıyla yönetin.

Bu makale, dağıtımın ayrıntılarına girmeyecektir, ancak bu noktaların farkında olmak önemlidir.

Sorun Giderme

Kurulum ve geliştirme sırasında karşılaşabileceğiniz bazı yaygın sorunlar ve çözümleri:

* rbenv: command not found veya nvm: command not found: ~/.bashrc dosyanıza eklediğiniz satırların doğru olduğundan ve source ~/.bashrc komutunu çalıştırdığınızdan emin olun. Terminali kapatıp yeniden açmak da yardımcı olabilir.
* bundle install hataları: Genellikle eksik sistem bağımlılıklarından (örneğin, libpq-dev gibi) kaynaklanır. Hata mesajını dikkatlice okuyun ve eksik paketi sudo apt install ile kurun.
* Webpacker::Manifest::MissingEntryError: Bu hata, Webpack’in bir pack dosyasını bulamadığı anlamına gelir. bin/webpack-dev-server komutunun çalıştığından emin olun veya RAILS_ENV=development bundle exec rails webpacker:compile komutunu çalıştırarak varlıkları manuel olarak derlemeyi deneyin. yarn install komutunu çalıştırarak tüm Node.js bağımlılıklarının kurulu olduğundan emin olun.
* React bileşeni görünmüyor:
* Tarayıcınızın geliştirici araçlarını (F12) açın ve konsolda hata olup olmadığını kontrol edin.
* app/views/welcome/index.html.erb dosyasında

ve <%= javascript_pack_tag 'application' %> satırlarının doğru yerleştirildiğinden emin olun.
* app/javascript/packs/application.js dosyasında ReactDOM.render çağrısının doğru olduğundan ve react-root id’sini hedeflediğinden emin olun.
* API çağrıları başarısız oluyor:
* Rails sunucusunun çalıştığından emin olun (rails s).
* Tarayıcınızın geliştirici araçlarındaki “Network” sekmesinde API isteğinin durumunu kontrol edin (404 Not Found, 500 Internal Server Error vb.).
* Rails sunucu konsolunda hata mesajlarını kontrol edin.
* config/routes.rb dosyasında API rotalarının doğru tanımlandığından emin olun.

Sonuç

Bu kapsamlı makale boyunca, Ubuntu 18.04 işletim sistemi üzerinde Ruby on Rails 5 arka yüzü ile modern bir React ön yüzünü birleştiren bir uygulamanın nasıl kurulacağını ve geliştirileceğini adım adım öğrendiniz. Sistem bağımlılıklarının kurulumundan, Rails ve React projelerinin yapılandırılmasına, basit bir React bileşeninin entegrasyonuna ve Rails API’si ile veri alışverişine kadar birçok önemli konuyu ele aldık.

Rails’in sağlam API yetenekleri ve React’in dinamik kullanıcı arayüzü oluşturma gücü, modern ve ölçeklenebilir web uygulamaları geliştirmek için mükemmel bir kombinasyon sunar. Webpacker gem’i sayesinde bu entegrasyon hiç olmadığı kadar kolay ve verimli hale gelmiştir.

Bu başlangıç noktasından itibaren, uygulamanızı daha da geliştirebilirsiniz:

* React Router: Tek sayfalık uygulama deneyimi için React Router kullanarak ön yüz rotalarını yönetin.
* Durum Yönetimi: Uygulamanız büyüdükçe Redux veya Context API gibi durum yönetim kütüphanelerini entegre edin.
* Kimlik Doğrulama: Devise gem’i ve JWT (JSON Web Tokens) kullanarak Rails API’nizde kullanıcı kimlik doğrulama ve yetkilendirme uygulayın.
* Testler: Hem Rails arka yüzünüz hem de React ön yüzünüz için kapsamlı testler yazın.

Unutmayın, web geliştirme sürekli evrilen bir alandır. Yeni araçları ve en iyi uygulamaları öğrenmeye devam etmek, becerilerinizi güncel tutmak için hayati öneme sahiptir. Bu kurulum rehberi, Rails ve React ile sağlam bir başlangıç yapmanız için gereken temeli sağlamıştır.