Mehmet Seven

React Native Eğitim Seti

mehmetseven0@gmail.com (Mehmet Seven) — Tue, 30 Apr 2019 00:00:00 GMT

Node.JS, React, GraphQL ve şimdi de React Native.Evet, "Sıfırdan Her Yönüyle" yolculuğunun dördüncü adımı olan React Native kursu artık hazır.

Kurs Linki: Tıklayın

Kursun Github Reposu

Temel Dersler

Bu bölümde ilk adımlarmızı atarak React Native'i tanımaya çalışıyoruz.

Kurulumlar, yeni bir proje oluşturmak, projeyi emulator üzerinde çalıştırmak, temel emulator kontrolleri, temel React bilgileri, stillendirme ve flex ile konumlandırma işlemleri gibi konulara değindikten sonra React Native üzerinde kullanılan temel bileşenleri sırası ile işliyoruz.

Bu konuları tamamladıktan sonra React Native üzerinde çok basit ekranlar tasarlamaya başlayabiliyorsunuz.

Temel bilgileri daha iyi oturtmak ve pratik olması adına çok basit bir login ekranı tasarlıyoruz. Bunu yaparken aynı zamanda uygulama ismini,iconunu ve splash ekranını değiştirmeyi de öğreniyoruz.

React Navigation

Öğrenme sürecinde en fazla kafa karışıklığının olduğu noktalardan biri de React Navigation. Biz kurs üzerinde bu konuyu üç bölüme ayırdık. "Stack Navigator", "Drawer Navigator" ve "Tab Navigator". Bu üç bölüm altında yeni bir ekran oluşturmayı, o ekrana yönlendirme yapmayı, modal açtırmayı, sol veya sağ menüler oluşturmayı son olarak da tab navigator oluşturmayı öğreniyorsunuz.

Aynı konu üzerinde öğrendiklerimizle hazırladığımız bir diğer çalışma.

Kamera Kullanımı

Bu bölümde cihazın kamerasını kullanarak fotoğraf çekiyor ve çekilen fotoğrafı galeriye kaydediyoruz. Kamera görüntüsünün üzerinde ekstra kontroller ekliyor ve kullanıyoruz. Aynı zamanda kullanıcıdan bazı erişimler ile alakalı izin isteme durumlarını da bu bölüm üzerinde öğrenmeye başlıyoruz.

Animasyonlar

React Native'in sağladığı Animated nesnesini kullanarak animasyon hazırlamayı öğreniyoruz. Animated altındaki bir çok methodu tanıma şansı yakalıyoruz. Temel animasyon oluşturma bilgisine sahip olduktan sonra aşağıdaki projeyi hazırlıyoruz.

Harita Kullanımı

Mobil uygulama geliştirme dendiğinde akla ilk gelenlerden biri de harita nesnesi. Bu bölümde harita kullanımı ile alakalı temel bilgileri ediniyorsunuz. Marker göstermek, animated marker, aktif konumu almak vb. Yine bu bölümde izinler ile alakalı neler yapmanız gerektiğini pekiştirme imkanı buluyorsunuz.

Harita kullanımına genel manada aşina olduktan sonra yakınlardaki restoran ve kafeleri gösteren bir uygulama geliştiriyoruz.

MobX State Management

State yönetimi konusunda esnek, basit ve kolay anlaşılabilir bir yapı olan MobX hakkında bütün temel bilgileri bu bölümde öğreniyoruz. observable, observer, action, async action, enforceActions, computed, autorun, reaction, when, provider ve inject gibi MobX'e özel tanımları anlamaya çalışıyoruz.

Yine diğer bölümlerde olduğu gibi temel bilgileri edindikten sonra o temel'i kullanarak basit bir proje geliştiriyoruz.

Bu projede React Navigation ve MobX'i bir arada görme şansı yakalıyoruz. Formik ile kayıt ve giriş ekranları tasarlıyor, validasyon işlemlerini Yup ile yapıyoruz. Custom bir Node.JS servise bağlanıp kullanıcı kaydı yapıyor ve giriş yapıldıktan sonra kullanıcıya bir token tahsis ediyoruz.

Yani işin özü, bu projede MobX ve React Navigation ile bir kayıt ve giriş sürecini yönetmeyi öğreniyorsunuz.

Socket.IO ile Real-Time Çalışmak

Socket.IO gerçek zamanlı işler yapmak istediğimizde akla ilk gelen yapılardan biri. Chat yazılımları ve multiplayer oyunlarda çokça tercih edilen bir teknoloji.

Kurs üzerinde bir Node.JS backend'i oluşturup socket.io'yu kullanıyoruz. Aşağıda görmüş olduğunuz çalışmayı hazırlıyoruz.

Your browser does not support the video tag.

Kapanış

Kursta görüşmek üzere :)

Kurs Linki: Tıklayın

GraphQL ve Apollo Eğitim Seti

mehmetseven0@gmail.com (Mehmet Seven) — Sun, 11 Nov 2018 00:00:00 GMT

2017 yılının son aylarından beri kendimi adadığım modern web teknolojilerini Türkçe olarak anlatma konusundaki üçüncü adımı atmanın mutluluk ve gururunu yaşıyorum.

Kurs Linki: Tıklayın

"Sıfırdan Her Yönüyle" yolculuğun ilk iki adımını Node.JS ve React kursları ile atmıştık. Şimdi sıra, bu iki teknolojiyi kullanarak GraphQL ve Apollo mevzusunu projeler geliştirerek öğrenmekte.

Kurs Udemy üzerinde yayınlanıyor ve toplamda 10 saatlik videolardan oluşuyor. Videolar tamamen 60fps ve 1080p kalitede hazırlandı. Ayrıca ses profesyonel mikrofon ve ses kartı ile kaydedildi.

Neleri Konuşuyoruz?

Giriş bölümünde temel teorik bilgileri aldıktan sonra direkt proje geliştirmeye başlıyoruz.Kurs içerisinde iki adet proje geliştirdik.

Anlatılabilecek her şeyi projeler üzerinde anlattım. Böylece teknolojinin teorisine hakim olmanın yanında, onunla proje geliştirebilir hale de geliyorsunuz.

Giriş

Bu bölümde REST ve GraphQL'in ne olduğunu, farklarını ve neden GraphQL'e geçmeniz gerektiğini öğreneceksiniz. Query, Mutation, Subscription gibi GraphQL'in temel yapı taşlarını bu bölümde teorik olarak öğreneceksiniz.

####GraphQL Schema Language GraphQL ile ilgili karşınıza çıkabilecek her türlü yazım şeklinden ve metodolojiden bahsetmeye çalışıyorum. Şema ve tip tanımlarımızı öncelikle JavaScript ile nasıl yapabileceğimizi öğreneceğiz. Sonra da aynı işlemi daha basit ve anlaşılır şekilde yapmamızı sağlayan GraphQL şema dilini öğreneceğiz. Böylelikle karşınıza çıkabilecek her türlü şema tanım şeklini kullanan kodları okuduğunuzda rahatlıkla anlamlandırabileceksiniz.

Real World Project Structure

Projeleri sırf örnek olsun diye geliştirmiyoruz. Gerçek dünyada yapılan projelere nasıl başlanıp, nasıl ilerleniyorsa aynısını kurs üzerinde uyguluyoruz. Böylelikle kursu bitiren biri rahatlıkla yeni projeler geliştirebilir kıvama geliyor.

GraphQL ile geliştirilen projelerde, sürdürülebilir dizin ve dosya yapısının nasıl olması gerektiğini detaylı olarak anlatıyorum. Kurs içerisinde, bu başlık için başlı başına bir bölüm bulunuyor.

Aşağıdaki dizin yapısı, projemizde hazırlamış olduğumuz yapı. Her işi yapan parçalar farklı birimlere ayrılmış durumda.

Tech Stack

Projelerimizi aşağıdaki tech stack üzerinden geliştirdik.

Movie App Projesi

Pratik anlamda GraphQL'in temellerini öğrenmeye ve ilk adımlarımızı atmaya bu projede başlıyoruz.

Backend'de Node.JS, Express ve GraphQL kullandığımız bu projenin veritabanını MongoDB ve front-end tarafını da React ve Apollo ile geliştirdik.

Bu bölümde salt JavaScript ile GraphQL şemaları inşa etmeyi ve tip tanımlarını yapmayı öğreneceksiniz.

Bu bölümde genel olarak aşağıdaki kavramlara hakim olacaksınız.

Express ile GraphQL kurulumu
GraphQL Schema
Root Query
Resolver
GraphQLID
GraphQLList
GraphQLNonNull
Relations
Custom Type
Apollo Client
React Apollo Module
Refetch
QUERY, MUTATION
GraphiQL

Proje Github Reposu

Easysnap Projesi

Bu bölümde genel olarak aşağıdaki kavramlara hakim olacaksınız.

Apollo Server
Subscriptions
GraphQL Playground
Optimistic UI
Authentication (JWT)
Deploy

Authentication

GraphQL ile Token (JWT) tabanlı kimlik doğrulama işlemlerinin nasıl yapılacağını öğreneceksiniz. Gerek server, gerek client tarafında yapılması gereken işlemlere hakim olacaksınız.

Real-Time API Geliştirmek

Twitter'ın hazırladığı API'yi görmüşsünüzdür. Birisi tweet attığı anda bu tweet'i gerçek zamanlı olarak yakalayabilirsiniz. Biz de hazırladığımız easysnap projesinde benzer bir yapı geliştiriyoruz. Bir kullanıcı snap attığı anda bundan haberdar oluyor ve tüm kullanıcılara gerçek zamanlı olarak gösterebiliyoruz.

Real-time API geliştirme konusunu Subscriptions bölümünde detaylı olarak öğreneceksiniz. Hem sunucu tarafında hem de client tarafında yapmanız gereken işlemleri öğrenmiş olacaksınız.

Optimistic UI

Sanırım Optimistic UI'ın ne olduğunu aşağıdaki gif açık bir şekilde ortaya koyuyor.

Aynı iş farklı iki yöntem. Solda bütün UI loading state ile yönetiliyor. Mesaj yazılıp "send" butonuna basıldığı anda UI üzerinde "loading" ifadesi gösteriliyor ve "loading" işlemi tamamlanana kadar herhangi bir işlem yapamıyoruz.

Ancak sağda Optimistic UI kullanılıyor. Tıpkı Facebook'un yaptığı gibi. Mesaj gönderildiği anda sadece o mesaj ile alakalı "loading" ifadesi gösteriliyor. Ve kullanıcı yeni bir işlem yapmak için beklemek zorunda kalmıyor.

Biz de kursta "easysnap" projesinde snap atarken benzer yapıyı kullanacağız. Apollo Client bize bu imkanı sağlıyor. Bu süreçleri yönetmeyi hiç olmadığı kadar kolaylaştırıyor.

Deploy

Hazırladığımız projenin deploy süreçlerinin nasıl yönetileceğini bu bölümde konuşuyoruz.

Projenin Node + GraphQL + Apollo backend'ini Heroku üzerine deploy ediyoruz.

React + Apollo frontend'ini de Surge.sh üzerinde deploy ediyoruz.

-Proje Github Reposu

Sonuç

Kursta görüşmek üzere :)

Tıklayın

React ve Redux Eğitim Seti

mehmetseven0@gmail.com (Mehmet Seven) — Thu, 07 Jun 2018 00:00:00 GMT

Çok uzun süredir planladığım React & Redux eğitimini tamamlamış olmanın mutluluğunu yaşıyor ve sizlerle paylaşıyorum :)

Kurs Linki: Tıklayın

Kurs Udemy üzerinde yayınlanıyor. Videolar tamamen 60fps ve 1080p kalitede hazırlandı. Ayrıca ses profesyonel mikrofon ve ses kartı ile kaydedildi.

Malum Türkçe React ve Redux dersleri ile alakalı kaynak bulmak oldukça güç. Ben de bu açığı kapatmak adına bu kursu hazırladım.

React ve Redux'ı her yönüyle öğreneceğiniz, sıfırdan başlayan bir eğitim. Zaten kursun adı da "Sıfırdan Her Yönüyle React & Redux". Daha önce hiç React ile ilgilenmemiş olanlar da rahatlıkla bu kursu edinip öğrenmeye başlayabilirler.

Neleri Konuşuyoruz?

Her zaman beklentilerin üzerinde kurs vermeyi hedefledim. Yani bu da demek oluyor ki, sadece React ve Redux öğrenmeyeceksiniz. Bu teknolojiler ile entegre çalışabilecek veya bu teknolojiler ile birlikte kullandığınızda ortaya daha iyi işler çıkarabileceğinize inandığım teknolojilerden de bahsettim.

Tüm öğrendiklerimizi de havada bırakmayıp projeler ile iyice pekiştirdik. Projelere çok fazla önem verdim. Kursun yaklaşık 4 saatlik kısmını projeler oluşturuyor.

Temel Dersler

Bir teknolojiyi her yönüyle öğrenirken en önemli nokta temel dersler. Eğer kullandığınız teknolojinin hangi amaca hizmet ettiğini, hangi sorunu çözmek için ortaya çıktığını bilmeden sırf popüler diye kullanırsanız inanın bana kaliteli işler çıkmıyor. İşte bu noktada "React Nedir?", "Redux Nedir?" ve hangi amaca hizmet etmek için, hangi sorunu çözerek ortaya çıkmışlar detaylı olarak anlattım.

Kodlarımızı tamamen EcmaScript 6 standartlarına uygun olarak yazdık. EcmaScript 6 temellerinden ve modül sisteminden de ayrıca bahsettim.

React'in temelini oluşturan Component, Props, State, React Lifecycle, React Router gibi kavramları özenerek anlattım.

Redux

Redux, çoğu zaman anlaması ve uygulaması zor olduğu söylenen bir yapı. Ben bu sorunu konunun sıralı bir şekilde anlatılmamasına bağlıyorum. Sıralı olarak üzerine konarak anlatılan bir kursta oldukça anlaşılır bir yapı.

Redux nedir? Neden ihtiyaç duyarız gibi kilit bir soruyu cevapladıktan sonra, Redux data flow'u tanımlayarak Action, Reducer, Dispatcher, Store, Provider gibi Redux'ın en kilit kavramlarını tek tek anlattım.

redux-thunk middleware ile Async Action'ları nasıl yönetip kullanabileceğinize gerek Redux'ın temellerinde gerek proje derslerinde sık sık değinerek akılda kalıcı olarak kalmasını sağladım.

Siz kurs içerisinde fark etmiyorsunuz ancak ben aynı şeyi farklı videolarda sık sık tekrarlıyorum. Bir şeyin akılda kalması da tekrara bağlı zaten.

React & Redux Movieapp Projesi

Takdir edersiniz ki öğrenilenleri pekiştirmenin en iyi yöntemi örnek proje geliştirmek. Biz de bu eğitimde React ve Redux ile örnek bir proje geliştirdik.

Single page uygulama geliştirilen ortamlarda aslında en büyük ihtiyacınız CRUD işlemlerini başarılı bir şekilde yapmak. Projenin büyük yoğunluğu bu tarafta oluyor çünkü.

Hazırladığımız bu proje CRUD işlemlerini yapabildiğiniz single page bir uygulama aslında.

Node.JS ile yazdığımız Restful servisi React & Redux ile kullandık. Backend servisleri ile nasıl çalışabileceğinizi burada çok çok iyi anlayacaksınız.

Projenin Kaynak kodları şurada.

Sever Side Rendering

Malum, single page web uygulaması yazdığınızda her şey iyi güzel ancak bir dert var ki başa bela. O da SEO. Arama motorlarında iyi bir puana sahip olmak istediğinizde SPA web sayfaları size bunu sağlamıyor. Ancak bunun da çözümü var elbette. O da Server Side Rendering.

"Server Side Rendering Nedir? Neden ihtiyaç duyulur?" gibi soruları detaylı olarak cevapladım.

Next.JS

Server Side Rendering'in ne olduğunu anladıktan sonra SSR konusunda en iyi altyapıyı sağlayan Next.JS'i öğrenmeye başladık.

Next.JS'in sahip olduğu Routing, Styled Component, HMR, Isomorphic Fetch, Prefetch gibi kavramları enine boyuna anlattım.

Ayrıca custom routing işlemlerinde de Express.JS kullanarak konuyu destekledim.

Bu bölümden sonra günümüzün en modern web teknolojilerinden biri olan Next.JS ile SSR destekli React uygulamaları geliştirebileceksiniz.

Progressive Web Uygulamaları ve JavaScript Service Workers

Progressive Web Uygulamaları, belki şuan'a kadar pek duymadığınız ama önümüzdeki on yıl içerisinde en çok duyacağınız kavramlarından biri.

Bir web site düşünün ki internet bağlantısı olmasa dahi çalışabilsin. Bize bunu kazandıran Service Workers denilen yapı. Internetin çekmediği metrolarda insanların web sitenizi kullanmasını ister misiniz? İşte bu konuyu da kursta anlattım. Faydalanacağınıza eminim.

Deploy

Projenizi yaptıktan sonra en sancılı süreçlerden biri bu olabiliyor. Nereye deploy edeceğiz? Nasıl yöneteceğiz gibi sorular kafanızda sürekli dolaşıyordur eminim.

React & Redux ve Next.JS projelerinizi deploy edebileceğiniz. Üç ayrı sistemden bu eğitimde bahsettim.

Surge.sh, Netlify ve Now üzerine React uygulamalarınızı nasıl sancısız bir şekilde deploy edip yönetebileceğinizi detaylı olarak bulacaksınız.

Müfredat

Bölüm 1: Giriş
- Ders 1: React.JS Nedir ?
- Ders 2: React.JS Hangi Sorunu Çözer
- Ders 3: Virtual Dom nedir ?
- Ders 4: React'ı Kullanmak Ne Zaman Mantıklı ?
- Ders 5: Two-Way Data Binding Nedir ?
- Ders 6: One-Way Data Binding Nedir ?
- Ders 7: Component Nedir ?
- Ders 8: JSX Nedir ?
Bölüm 2: Kurulumlar
- Ders 9: Node.JS Kurulumu
- Ders 10: React Dev Tools
- Ders 11: WebStorm
- Ders 12: WebStorm React Live Templates
Bölüm 3: EcmaScript 6 Bilinmesi Gerekenler
- Ders 13: Spread Operator
- Ders 14: Array Map
- Ders 15: Array Filter
- Ders 16: Object.assign
Bölüm 4: EcmaScript 6 Modül Sistemi
- Ders 17: Modül Oluşturmak
- Ders 18: Varsayılan Modül Belirlemek
- Ders 19: as Keyword'ü ile Yeniden İsimlendirme
- Ders 20: Çok Fonksiyonlu Modüllerde as Operatörü
- Ders 21: Temiz Modül Yazmak
Bölüm 5: Component'ler (Bileşenler)
- Ders 22: Create-react-app ile Hello World!
- Ders 23: Component Oluşturmak ve Kullanmak
- Ders 24: Component Oluşturmak ve Kullanmak - 2
- Ders 25: Özel Tanımlı Keyword'ler
- Ders 26: Componentler'de Değişken Kullanmak
Bölüm 6: Props'lar ile Çalışmak
- Ders 27: Props nedir? Nasıl Kullanılır?
- Ders 28: Props Kullanımı - 2
- Ders 29: Props Kullanımı - 3
- Ders 30: Props Kullanımı - 4
- Ders 31: Döngülerde "key" Kullanımı
- Ders 32: React Developer Tools
- Ders 33: propTypes: Nedir? Nasıl kullanılır?
- Ders 34: propTypes: "isRequired" Tanımı
- Ders 35: propTypes: "oneOfType" Tanımı
- Ders 36: propTypes: "oneOfType" için isRequired Kullanımı
- Ders 37: propTypes: "shape" Tanımı
- Ders 38: defaultProps Tanımı
- Ders 39: Constructor Metodu
Bölüm 7: State'ler ile Çalışmak
- Ders 40: State nedir? Nasıl Oluşturulur?
- Ders 41: setState Kullanımı
- Ders 42: Re-Render Mantığını Anlamak
- Ders 43: Counter Uygulaması
- Ders 44: Stateful ve Stateless Componentler
Bölüm 8: Telefon Rehberi Uygulaması
Ders 45: Giriş
- Ders 46: "Contacts" ve "List" Componentleri'nin Hazırlanması
- Ders 47: Form Component'inin Hazırlanması
- Ders 48: Contacts State'inin Hazırlanması
- Ders 49: Contacts State Konumunun Değiştirilmesi
- Ders 50: Form State'inin Yazılması
- Ders 51: addContact Methodunun Yazılması
- Ders 52: Filter Fonksiyonun Yazılması
- Ders 53: Contacts Komponentinin Stateless Tanımlanması
Bölüm 9: React Lifecycle (Yaşam Döngüsü)
- Ders 54: Constructor
- Ders 55: componentWillMount()
- Ders 56: componentDidMount()
- Ders 57: componentDidMount() Hiyerarşisi Hakkında
- Ders 58: componentWillReceiveProps()
- Ders 59: shouldComponentUpdate()
- Ders 60: componentWillUpdate()
- Ders 61: componentDidUpdate()
- Ders 62: componentWillUnmount()
Bölüm 10: Fetching
- Ders 63: JavaScript Native "fetch" Fonksiyonu
- Ders 64: "Loading..." Gösterimi
- Ders 65: Axios
Bölüm 11: React Router
- Ders 66: BrowserRouter ve Exact Özelliği
- Ders 67: Strict Özelliği
- Ders 68: Component Özelliği
- Ders 69: Route'a Parametre Göndermek
- Ders 70: Link Objesi
- Ders 71: NavLink Objesi
- Ders 72: Redirect Objesi
- Ders 73: Switch ile Hata Sayfası Yapımı
- Ders 74: Component'leri Dışarıda Yazmak
Bölüm 12: İleri Component Kullanımları
- Ders 75: Higher Order Components
- Ders 76: Reusable Higher Order Components
- Ders 77: Pure Component
- Ders 78: Hot Module Replacement
- Ders 79: Children API
Bölüm 13: Redux
- Ders 80: Redux Nedir? Neden İhtiyaç Duyarız?
- Ders 81: Redux Data Flow (Action, Reducer, Dispatcher, Store)
- Ders 82: Store Oluşturmak
- Ders 83: dispatch() Metodu ile Store'u Güncellemek
- Ders 84: Store Subscribe Metodu
- Ders 85: combineReducers ile Multi Reducer Kullanımı
- Ders 86: Reducer'a Initial State Vermek
- Ders 87: Redux Dev Tools
- Ders 88: Provider Nedir?
- Ders 89: Dizin Yapısının Oluşturulması
- Ders 90: Connect ile Component'den Store'a Bağlantı Sağlamak
- Ders 91: mapStateToProps
- Ders 92: Action dispatch Etmek
- Ders 93: mapDispatchToProps
- Ders 94: Component'e Props Geçmek
- Ders 95: mergeProps
- Ders 96: Redux Thunk Middleware: Kurulum
- Ders 97: Async Actions
- Ders 98: Async Action Dispatch İşlemi
- Ders 99: Async/Await Yapısı ile Servis Çağrımı
Bölüm 14: İleri Redux
- Ders 100: Immutable vs Mutable
- Ders 101: Immutable Array
- Ders 102: Redux Logger Middleware
- Ders 103: Async Actions Pattern
- Ders 104: Async Actions Pattern: Redux Promise Middleware
Bölüm 15: React & Redux Single Page Movieapp Projesi
- Ders 105: Proje Tanıtımı ve React Uygulamasının Ayağa Kaldırılması
- Ders 106: Proje Dizinlerinin Oluşturulması
- Ders 107: Redux Kurulumu: Store'u ve Root Reducer'ı Oluşturmak
- Ders 108: Redux Kurulumu: Thunk Middleware ve Redux Dev Tools
- Ders 109: Redux Kurulumu: Provider
- Ders 110: React Router Kurulumu
- Ders 111: MoviesPage Component Redux Store Bağlantısı
- Ders 112: MoviesList Component'inin Hazırlanması
- Ders 113: Semantic.UI Kit: Kurulum
- Ders 114: Semantic.UI Kit: Tema Düzenlemeleri
- Ders 115: Semantic.UI Kit: Bug Fix
- Ders 116: Semantic.UI Kit: Bug Fix 2
- Ders 117: Footer Component'inin Yazılması
- Ders 118: Header Component'inin Yazılması
- Ders 119: Semantic.UI Kit: Son İşlemler
- Ders 120: Node.JS Backend'in Kurulması
- Ders 121: Movies Action'ının Yazılması: fetchMovies()
- Ders 122: Movies Reducer`ının Yazılması
- Ders 123: MoviesList PropType Tanımının Güncellenmesi
- Ders 124: Redux Logger Middleware Kurulumu
- Ders 125: Movies Reducer'ının Yazılması: "FETCH_MOVIES_ERROR"
- Ders 126: Redux Promise Middleware
- Ders 127: Filmlerin Listelemesinin Yapılması
- Ders 128: Filmlerin Listelemesinin Yapılması - 2
- Ders 129: Loading Indicator'un Hazırlanmasi
- Ders 130: Routing: Menüde Active Class Gösterimi
- Ders 131: New Movie Sayfasının Hazırlanması
- Ders 132: NewMovieForm Component'in Hazırlanması
- Ders 133: NewMovieForm Component'in Hazırlanması - 2
- Ders 134: NewMovieForm Validasyon İşlemleri
- Ders 135: NewMovieForm Validasyon İşlemleri - 2
- Ders 136: newMovie Sayfası Reducer Tanımının Yapılması
- Ders 137: onNewMovieSubmit Action'ın Hazırlanması
- Ders 138: onNewMovieSubmit Error Handle
- Ders 139: Redirect ile Yönlendirme İşleminin Yapılması
- Ders 140: Edit ve Delete Butonlarının Hazırlanması
- Ders 141: Movie Edit: 1 - Route İşlemleri
- Ders 142: Movie Edit: 2 - Inputların Doldurulması
- Ders 143: Movie Edit: 3 - FETCH_MOVIE
- Ders 144: Movie Edit 4 - Loading Gösterimi
- Ders 145: Movie Edit 5 - Update
- Ders 146: Delete Movie - 1
- Ders 147: Delete Movie - 2
- Ders 148: Redirect Bug Fix
- Ders 149: Anasayfa Tasarımının Yapılması
Bölüm 16: Deploy
- Ders 150: Surge.sh: Deploy İşlemleri
- Ders 151: Surge.sh: Route Problemi ve Çözümü
- Ders 152: Surge.sh: Deploy Script'inin Yazılması
- Ders 153: Netlify: Nedir? Manuel Deploy Nasıl Yapılır?
- Ders 154: Netlify: Continuos Deployment
Bölüm 17: Next.JS ile Server Side Rendering
- Ders 155: Next.JS: Nedir?
- Ders 156: Next.JS: Kurulum
- Ders 157: Next.JS: Pages
- Ders 158: Next.JS: Components
- Ders 159: Next.JS: Link
- Ders 160: Next.jS: Routing Query String
- Ders 161: Next.JS: Routing As Özelliği
- Ders 162: Next.JS: Layout
- Ders 163: Next.JS: Head Component'i
- Ders 164: Next.JS: Built-in Styled CSS
- Ders 165: Next.JS: Express.JS ile Custom Route'lar Oluşturmak
- Ders 166: Next.JS: Hot Module Reloading
- Ders 167: Next.JS: Isomorphic Fetch
- Ders 168: Next.JS: Stateful Componentler'de Isomorphic Fetch
- Ders 169: Next.JS: Prefetch
- Ders 170: Next.JS: Prefetch onMouseEnter
- Ders 171: Progressive Web: Service Workers Nedir?
- Ders 172: Progressive Web: Next.JS: Offline
Bölüm 18: Next.JS Deploy
- Ders 173: Now: Nedir? Nasıl Kullanılır? Deploy Nasıl Yapılır?

Sonuç

Mesele sadece geliştirmek değil arkadaşlar! Mesele eğlenerek geliştirmek. İşte bu teknolojiler sayesinde eğlenerek geliştireceksiniz. Sizi bilmem ama ben böyle modern web teknolojileri ile proje geliştirince mutlu oluyorum.

Çok özendim bu kursa, umarım azami faydayı sağlarım size. Ben bu kursu bitirdikten sonra sizin için artık hiçbir şeyin eskisi olmayacağına kefilim :)

Bu arada kursun tüm kaynak kodlarını GitHub üzerinde barındırıyorum. Repo şurada. Alırım bi star'ınızı :)

Kurs ile alakalı tavsiyeleriniz olursa bunları duymak harika olur!

Kursta görüşmek dileği ile :)

Kurs Linki: Tıklayın

Docker ile Mean Stack Oluşturmak

mehmetseven0@gmail.com (Mehmet Seven) — Sat, 27 Jan 2018 00:00:00 GMT

MEAN ifadesini mutlaka duymuşsunuzdur. MongoDB, Express, Angular ve Node.JS'in baş harflerinin birleşmesi ile oluşuyor efenim.

Zaman zaman bu stack'i kullanarak projelerimizi geliştiriyoruz. Geliştiriyoruz, geliştiriyoruz da geliştirme ortamını hazırlarken çok çileler çekiyoruz. İşte bu makalede bu çektiklerimizden kurtulmak adına bir Docker container'ı hazırlayacağız. Bu container sayesinde tek komutla MEAN stack üzerinde geliştirme yapmaya başlayabileceğiz.

Öncelikle bir ayıp edip daha önce Docker'ı kurmadıysak hemen şuradan kuralım. Kurulumu tamamladığımıza inanıyorsak şu komutla emin olalım.

docker  -v
Docker version 17.12.0-ce, build c97c6d6

Başlayalım

Herhangi dizinde root dizininizi oluşturun. Örneğin ben, masaüstündeki app klasörüne docker-ile-mean-stack-olusturmak adıyla bir dizin oluşturuyorum. Tüm çalışmalarımı bu dizin altında yapacağım.

mkdir ~/Desktop/app/docker-ile-mean-stack-olusturmak
cd ~/Desktop/app/docker-ile-mean-stack-olusturmak

1.Angular Client Kurulumu

Angular'ın komut satırı arayüzü bilgisayarınızda kurulu değilse aşağıdaki komut ile kuralım.

npm install -g @angular/cli

Angular client için root folder'ı daha önce oluşturduğumuz docker-ile-mean-stack-olusturmak dizininin içine oluşturalım.

mkdir angular-client
cd angular-client

Angular projemizi, oluşturmuş olduğumuz angular-client klasörüne kuralım.

ng new my-app --directory ./

my-app parametresi proje adını belirler. Siz istediğinizi yazabilirsiniz.
--directory kısmı ise proje dosyalarının nereye kurulacağını belirler. Biz " ./ " ifadesi ile aynı dizine kurmasını istedik.

Her şey tamamsa, Angular projesini ayağa kaldıralım.

ng serve

http://localhost:4200 adresine gidelim. Her şey yolunda gittiyse aşağıdaki gibi bir ekranla karşılaşacaksınız.

Şimdi Ctrl+C ile bu çalışmayı durdurun.

Angular Client Dockerizing

Angular uygulamamızı kendi bilgisayarımızda çalıştırıyoruz sorun yok evet. Şimdi bu uygulamayı kendi bilgisayarımızdan değil de bir docker container'ı aracılığı ile nasıl çalıştıracağımıza bakalım.

angular-client klasörunde Dockerfile adında bir dosya oluşturun ve içeriğini şöyle değiştirin.

# Dockerhub üzerinden resmi Node 8 image'ını temel alarak bir image oluştur
FROM node:8

# Uygulamamızın bulunacağı klasörü oluştur
RUN mkdir -p /var/www/app

# Komutlarımızın çalıştırılacağı dizini seç
WORKDIR /var/www/app

# package.json dosyamızı çalışma dizinine kopyala
COPY package.json /var/www/app

# Bağımlılıkları kur
RUN npm install

# Tüm proje dosyalarını docker image'ına kopyala
COPY . /var/www/app

# Uygulamanın çalışacağı port
EXPOSE 4200

# Projeyi ayağa kaldıracak komutu çalıştır
CMD ["npm", "start"]

Docker Ignore

NPM bağımlılıklarımızın bulunduğu node_modules klasörünün docker image'ı içerisine gönderilmesini engellemek için .dockerignore adında bir dosya oluşturup içeriğini şöyle yapalım.

node_modules/

Start Script'i

Son olarak package.json dosyasındaki start script'ini şöyle değiştirelim.

"start": "ng serve -H 0.0.0.0"

Docker Build & Run

Aşağıdaki komut ile docker imaj'ımızı build edelim.

docker build -t angular-client:dev .

sonra ayağa kaldıralım

docker run -d --name angular-client -p 4200:4200 angular-client:dev

http://localhost:4200 adresine gidelim. Her şey yolunda gittiyse aşağıdaki gibi bir ekranla karşılaşacaksınız.

Ne değişti? Az önce de bu ekranla karşılaşmıştık? Evet ama diğerini kendi bilgisayarından çalıştırmıştın, burada ise docker container'ın çalışıyor.

Angular container'ı tamam. Geçelim Express'e.

2.Express Server Kurulumu

Express server'ın bulunacağı kök dizini oluşturalım.

cd ~/Desktop/app/docker-ile-mean-stack-olusturmak
mkdir express-server

Express generator'ı kuralım.

sudo npm install -g express-generator

Express projesini oluşturup ayağa kaldıralım.

express .
npm install

http://localhost:3000 adresine gidelim. Her şey yolunda gittiyse aşağıdaki gibi bir ekranla karşılaşacaksınız.

Şimdi Ctrl+C ile bu çalışmayı durdurun.

Express Server Dockerizing

# Dockerhub üzerinden resmi Node 8 image'ını temel alarak bir image oluştur
FROM node:8

# Uygulamamızın bulunacağı klasörü oluştur
RUN mkdir -p /var/www/app

# Komutlarımızın çalıştırılacağı dizini seç
WORKDIR /var/www/app

# package.json dosyamızı çalışma dizinine kopyala
COPY package.json /var/www/app

# Bağımlılıkları kur
RUN npm install

# nodemon'u kur
RUN npm install -g nodemon

# Tüm proje dosyalarını docker image'ına kopyala
COPY . /var/www/app

# Uygulamanın çalışacağı port
EXPOSE 3000

# Projeyi ayağa kaldıracak komutu çalıştır
CMD ["npm", "start"]

Docker Ignore

NPM bağımlılıklarımızın bulunduğu node_modules klasörünün, docker image'ı içerisine gönderilmesini engellemek için .dockerignore adında bir dosya oluşturup içeriğini şöyle yapalım.

node_modules/

Start Script'i

Son olarak package.json dosyasındaki start script'ini şöyle değiştirerek nodemon kullanmak istediğimizi belirtelim.

"start": "nodemon ./bin/www"

Docker Build & Run

Aşağıdaki komut ile docker imaj'ımızı build edelim.

docker build -t express-server:dev .

sonra ayağa kaldıralım

docker run -d --name express-server -p 3000:3000 express-server:dev

http://localhost:3000 adresine gidelim. Her şey yolunda gittiyse aşağıdaki gibi bir ekranla karşılaşacaksınız.

Yine aynı şekilde bir şey değişmemiş gibi görünüyor. Öyle de olması gerekiyor zaten. Yaptığımız değişikliğin amacı, uygulamanın bilgisayarımızdan çalışması yerine docker container'ı üzerinden çalışmasını sağlamaktı. Her şey yolunda efem.

MongoDB container

Bu noktada herhangi dockerfile oluşturmaya ihtiyacımız yok. Zaten Docker Hub üzerinde bulunan görüntüyü alıp kullanacağız.

docker run -d --name mongodb -p 27017:27017 mongo

Docker Compose

Angular, Express ve MongoDB container'larımızı ayrı ayrı oluşturduk. Peki bunları nasıl bir çatı altında toplayıp birbirleriyle iletişim kurabilir hale getireceğiz? El-cevap: Docker Compose.

Kurulum için sizi şöyle alalım.

docker-compose -v
docker-compose version 1.11.2, build dfed245

Öncelikle daha önce ayağa kaldırdığımız docker containerlar ile çakışma olmaması için container'larımızı durduralım.

docker stop angular-client && docker stop express-server && docker stop mongodb

Şimdi kök dizinimize gidelim.

cd ~/Desktop/app/docker-ile-mean-stack-olusturmak

Ve burada docker-compose.yml adlı dosyayı oluşturalım.

touch docker-compose.yml

İçeriğini aşağıdaki gibi yapalım.

version: '2'

services: # Tüm Docker container'larımız 'services' altında olacak
  angular: # Angular client için tanımlama
    build: angular-client # imaj adı
    ports: # port yönlendirmeleri
      - '4200:4200'
    volumes:
      - ./angular-client/:/var/www/app

  express: # Express server için tanımlama
    build: express-server # imaj adı
    ports: # port yönlendirmeleri
      - '3000:3000'
    volumes:
      - ./express-server/:/var/www/app
    links:
      - database

  database: # Mongo server için tanımlama
    image: mongo # imaj adı
    ports: # port yönlendirmeleri
      - '27017:27017'

Yukarıdaki tanımlamada açıklamadığımız iki kısım var; volumes: Container'ı ayağa kaldırdıktan sonra yazdığınız kodlar neyse öyle kalır. Yani kodunuzda bir değişiklik yaptığınızda bu değişikliği göremezsiniz. Bu durum değiştirmiş olduğunuz dosyanın bilgisayarınızdaki dizinden docker içine kopyalanmadığı için oluşuyor. Volumes tanımlaması ile bilgisayarınızdaki ve docker içerisindeki proje dizinlerini birbirine eşitlemiş oluyorsunuz. Böylece herhangi değişiklik yaptığınızda bu değişim hemen yansıyor.

links: Container'ların birbiri ile haberleşebilmesi için kullanılır. Biz burada express-server'ın mongodb'ye de erişebilmesini istediğimiz için bu tanımlamayı yaptık.

Şimdi komutu verelim ve kurduğumuz yapıyı ayağa kaldıralım.

docker-compose up

Komutu çalıştırdıktan sonra şöyle loglar üretiyor.

Eveeeeeeet. Oldu da bitti maşallah.

Teset edelim bakalım. Angular Client şurada http://localhost:4200 Express Server ise şurada http://localhost:3000

Projemizde herhangi bir değişiklik yapmadığımız için yine aynı çıktıyı göreceksiniz.

Şimdi Angular tarafında birkaç değişiklik yapalım bakalım.

angular-client/src/app/app.component.html

<div style="text-align:center">
  <h1>Welcome to Docker MEAN Stackh1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />

  <div>
    <div class="info">Created by <strong>Mehmet Sevenstrong>div>
    <a href="https://github.com/meseven" target="_blank">
      <img
        src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
        class="logo"
      />
      @meseven
    a>
    <a href="https://twitter.com/mehmeteseven" target="_blank">
      <img
        src="https://www.sketchappsources.com/resources/source-image/twitterlogo_1x.png"
        class="logo"
      />
      @mehmeteseven
    a>
  div>
div>

angular-client/src/app/app.component.css

* {
  font-family: Arial;
}

a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.info {
  margin-bottom: 25px;
}

.logo {
  width: 30px;
  vertical-align: middle;
  margin-left: 20px;
}

Hemen bakalım: http://localhost:4200

Evet. Cillop!

Node.JS MongoDB Bağlantısı

Sorun yaşayabileceğinizi düşündüğüm bu konuyu da izah etmek istiyorum

express-server/ dizinine gidelim ve

npm install mongoose

diyerek mongoose'u kuralım.

Ardından express-server/app.js dosyasına şu kodları ekleyelim.

var mongoURI = 'mongodb://database/my-db';
mongoose.connect(mongoURI, function (err) {
  if (err) console.log('db connection err');
  console.log('mongodb: connected');
});

Evet, bu şekilde veritabanımıza bağlanıyoruz. Ancak şu mongoURI değişkeninde database diye bir şey var. Neyin nesidir? Hani docker-compose.yml dosyamızda database diye bir tanımlama yapmıştık ya. Ha işte, bu ona karşılık geliyor. En sondaki my-db ifadesi ise veritabanı adınızı belirtiyor.

Dockerfile dosyalarınızda bir değişiklik yaptığınızda, değişikliklerin yansıması için docker-compose up --build komutunu çalıştırabilirsiniz.

Amma bık bık konuştun kardeşim, yeter, bana direkt stack'i ver dersen de hazırladığımız stack şu GitHub reposunda. Alıp tüm projelerinizde gönül rahatlığıyla kullanmaya başlayabilirsiniz. Pull Requestleriniz baş tacımızdır. Bekleriz efem.

Konuyu bir de videolu olarak anlattım.

Kapanış

Mevzu bittiğine göre bana yine yol göründü.

Bu arada, o gemi bir gün gelecek.

Node.JS Eğitim Seti

mehmetseven0@gmail.com (Mehmet Seven) — Wed, 20 Dec 2017 00:00:00 GMT

Kurs'a Git

Çok güzel haberlerim var. Aralık ayının başından beri ummalı bir çalışma içerisindeyim biliyorsunuz. Hazırlamakta olduğum Node.JS eğitim seti artık yayında.

Node.JS'i her yönüyle öğreneceğiniz, sıfırdan başlayan bir set. Zaten setin başlığı da, "Sıfırdan Her Yönüyle Node.JS". Yani, hiç JavaScript bilmeyenler ve hatta bu güne kadar programlama ile hiç ilgilenmemiş olanlar bile yararlanabilirler.

Node.JS'in tüm detaylarını içinde bulunduracak olan bu setin yaklaşık 14 saatlık kısmı hazır. Şuan hazır olan bölümler ile yayınlanmış oldu. Bundan sonraki süreçte eksik konular sürekli hazırlanarak eğitim içeriğine eklenecek.

Neleri konuşacağız?

Ben bu sette Node.JS nedir dedikten sonra biri iki örnekle konuyu kapatmak istemiyorum.Yani konumuz sadece Node.JS değil. Mesela yazdığınız Node uygulamasını scale edemezseniz bunun hiçbir anlamı yok. Bunun için Yük dengeleme konusunu konuşacağız. Test ve deploy işlemlerini otomatize edemedikten sonra neyleyim ben öyle Node'u. Bu yüzden Sürekli Entegrasyon ve bununla beraber Travis CI konuşuyor olacağız. Yani bir Node projesi geliştirirken bununla birlikte ne gibi sistemlere ihtiyaç duyarız bunları da konuşacağız.

Sadede Gel

Bir kere iyi bir JavaScript temeli atacağınıza inanıyorum. Node.JS ile çalışırken JavaScript'in çalışma mantığına hakim olmak çok önemli.

EcmScript 6 ile birlikte gelen yeni özellikleri anlamaya çalışacağız. Let, Const, Promise, Async / Await, Inter Milan bunları uzun uzun konuşacağız.

Node.JS'de önemli bir yer tutan Events, I/O ve Streams mevzularını iyice bir kavrayacağız.

Express Framework neyin ne'si kimin fesi anlayacağız. Pug Tema Motoru, Routing ve Middleware kavramlarının ne olduğunu burada öğreneceğiz.

NoSQL'in ne olduğunu konuşacak ve günümüzün en popüler NoSQL veritabanlarından biri olan MongoDB'yi anlamaya çalışıp ne zaman ihtiyacımız olduğunu öğreneceğiz.

MongoDB üzerinde çalışma yapmaya başladıktan sonra Express ve MongoDB ile Restful API geliştirme projesi yapacağız. Bu bölüm bir proje olacak. Express'i ve MongoDB'yi daha iyi bir şekilde burada anlayabileceğinizi düşünüyorum. Bu projede oturum yönetimini JSON Web Token (JWT) ile yapacağız.

Ülkemizde pek yazılmasa da, yazılım kalitesini belirleyen olmazsa olmaz kavramlardan biri tartışmasız yazılım testleridir. Biz de bu eğitim içinde geliştirmiş olduğumuz Restful API için Mocha ve Chai ile Unit Testler yazacağız. Elbette yazmakla kalmayacak neden test yazmamız gerektiğini de öğreneceğiz.

Node.JS'e yeni başlayanların en çok zorlandığı konulardan biri yazmış oldukları uygulamayı deploy etmek. PaaS servislerinden Heroku ve IaaS servislerinden DigitalOcean için deploy sürecinin nasıl olduğunu kavrayacağız.

Continuos Integration (Sürekli Entegrasyon) nedir? Neden ihtiyaç duyarız sorularını yanıtlayacağız. Travis CI ile sürekli entegrasyon işlemlerini anlayacağız. Travis CI ve GitHub aracılığı ile otomatik deploy sürecini öğreneceğiz.

Günümüz web uygulamalarının olmazsa olmaz kavramlarından biri, Load Balancing. Bin kişi girince çöken siteyi ne edeyim ben? Yok mu bunun bir çıkar yolu? Var babacım, gelen yükü farklı klon sunuculara böleceğiz. Bunu da Nginx ile yapacağız.

Aşağıda görmüş olduğunuz müfredatta detayı olmayan bölümleri henüz hazırlamadım. İlk yayına çıktığında 21 bölüm yayınlanmış olacak. Socket.IO ve Socket.IO projeleri dahil.

Müfredata eklenmesini tavsiye ettiğiniz konular olursa lütfen bunu yorum olarak belirtin, birlikte daha iyi bir eğitim haline getirelim. Özellikle Socket.IO Projeleri bölümünde tavsiye proje fikirleri olursa çok makbule geçer.

Müfredat

Bölüm 1: Giriş
- Ders 1: Event driven / Non blocking nedir ?
- Ders 2: Node.JS nedir?
- Ders 3: Node.JS nasıl çalışır?
- Ders 4: Hello world uygulaması
Bölüm 2: IDE Seçimi
- Ders 5: WebStorm
Bölüm 3: Node.JS Kurulumu
- Ders 6: Linux için
- Ders 7: Mac için
- Ders 8: Windows için
Bölüm 4: Temel JavaScript
- Ders 9: console.log() metodu
- Ders 10: Değişkenler
- Ders 11: Büyük-küçük harf duyarlılığı
- Ders 12: Açıklama satırları
- Ders 13: Birleşirme operatörü
- Ders 14: Aritmetik operatörler
- Ders 15: Karşılaştırma operatörleri
- Ders 16: Mantıksal operatörler
- Ders 17: Koşullandırmalar
- Ders 18: Fonksiyonlar
- Ders 19: Callback fonksiyonlar
- Ders 20: setTimeout fonksiyonu
- Ders 21: setInterval fonksiyonu
- Ders 22: Callback fonksiyonlar-2
- Ders 23: Scope kavramı
- Ders 24: Döngüler: For
- Ders 25: Döngüler: While
- Ders 26: Döngüler: Do While
- Ders 27: Nesneler
- Ders 28: Diziler
- Ders 29: Javascript istisna yönetimi (try, catch, throw, finally)
- Ders 30: "use strict" ifadesi
Bölüm 5: EcmaScript 6
- Ders 31: EcmaScript nedir?
- Ders 32: WebStorm üzerinde ES6'yı aktive etme
- Ders 33: var, let, const ve farkları
- Ders 34: Template riterals
- Ders 35: Destructing
- Ders 36: Destructing-2
- Ders 37: Spread operator
- Ders 38: Arrow functions
- Ders 39: Promise yapısı
- Ders 40: Async / Await
- Ders 41: Async / Await hata yakalama
Bölüm 6: Modül Sistemi
- Ders 42: Module.exports ve require
Bölüm 7: Node Paket Yöneticisi (NPM)
- Ders 43: Paket nedir?
- Ders 44: Paket yükleme ve kullanma
- Ders 45: Yerel ve global paketler
- Ders 46: Package.json dosyası ve paket güncelleme işlemleri
- Ders 47: Bağımlılık yönetimi
- Ders 48: Script tanımlama
- Ders 49: Paket kaldırma
Bölüm 8: Events (Olaylar) ve I/O İşlemleri
- Ders 50: Olaylar (Events & Event Emitter)
- Ders 51: **filename ve **dirname
- Ders 52: Dosya okuma
- Ders 53: Dosya oluşturma ve yazma
- Ders 54: Dosya silme
Bölüm 9: Node.JS ve HTTP
- Ders 55: Basit bir HTTP sunucusu oluşturmak
- Ders 56: Nodemon nedir? Nasıl kullanılır?
- Ders 57: Bir HTML dökümanını serve etmek
- Ders 58: HTTP metodları
- Ders 59: Basit bir yönlendirme yapısı
Bölüm 10: Streams (Yayınlar)
- Ders 60: Stream nedir?
- Ders 61: Okunabilir Stream oluşturmak (fs.createReadStream())
- Ders 62: Yazılabilir Stream oluşturmak (fs.createWriteStream())
- Ders 63: Bellek performans testleri (Stream kullanımından önce ve sonra)
Bölüm 11: Express Framework
- Ders 64: Express nedir?
- Ders 65: Merhaba Express
- Ders 66: Pug: Pug nedir?
- Ders 67: Pug: Pug dosyasını render etmek
- Ders 68: Pug: Parametre olarak değişken göndermek
- Ders 69: Pug: Include
- Ders 70: Pug: Açıklama satırları
- Ders 71: Pug: Değişken tanımlamak
- Ders 72: Pug: If kontrolü
- Ders 73: Pug: Döngüler
- Ders 74: Pug: Layout ve Block yapısı
- Ders 75: Express statik klasör belirleme
- Ders 76: Rotalar (Routing): Giriş
- Ders 77: Rotalar: Get isteklerine parametre atamak
- Ders 78: Rotalar: Router nesnesi
- Ders 79: Ara katman (Middleware)
- Ders 80: Ara katman (Mİddleware)-2
- Ders 81: Express hata yönetimi
- Ders 82: Express Uygulama Oluşturucu
Bölüm 12: NoSQL ve MongoDB
- Ders 83: NoSQL nedir? Ne zaman ihtiyaç duyarız?
- Ders 84: MongoDB kurulumu
- Ders 85: MongoDB komut satırı arayüzü (Mongo CLI)
- Ders 86: Robomongo
- Ders 87: Veritabanı oluşturma ve mongoose ile bağlanma
- Ders 88: Mongoose bağlantı ayarları-2
- Ders 89: Mongoose: Şemalar: Şema oluşturma ve kayıt ekleme
- Ders 90: Mongoose: Şemalar: Veri tipleri
- Ders 91: Mongoose: Şemalar: Type, Default, Required, Unique
- Ders 92: Sorgu yapmak (Find)
- Ders 93: Tüm kayıtları seçmek
- Ders 94: Tekil sorgu yapmak (findOne)
- Ders 95: ID bazlı sorgu yapmak (findById)
- Ders 96: Veri güncelleme (update)
- Ders 97: Upsert anahtar kelimesi
- Ders 98: Id bazlı güncelleme yapmak (findByIdAndUpdate)
- Ders 99: Veri silme (findOneAndRemove, remove)
- Ders 100: Sıralama işlemleri (sorting)
- Ders 101: Limit belirleme ve atlama yapma (limit, skip)
- Ders 102: Aggregate: $match operatörü
- Ders 103: Aggregate: $group operatörü
- Ders 104: Aggregate: $project operatörü
- Ders 105: Aggregate: $sort, $limit, $skip operatörleri
- Ders 106: Aggregate: $lookup operatörü ile join işlemleri
- Ders 107: $exists operatörü
- Ders 108: Şemalarda validasyon işlemleri
Bölüm 13: Express ile Restful API Geliştirme Projesi
- Ders 109: Movie API tanıtımı
- Ders 110: Git ve Github ayarları
- Ders 111: İlk commit
- Ders 112: EcmaScript 6 ayarları
- Ders 113: MongoDB Ayarları
- Ders 114: Movie şemasının hazırlanması
- Ders 115: Movie şemasının hazırlanması - 2
- Ders 116: Movies endpoint'i için route ayarları
- Ders 117: Movies endpoint'i için post metodunun yazılması (/api/movies [POST])
- Ders 118: Readme dosyasının düzenlenmesi
- Ders 119: Readme dosyasının düzenlenmesi-2
- Ders 120: Tüm filmleri listeleyen endpoint'in yazılması (/api/movies [GET])
- Ders 121: Film detay endpoint'inin yazılması (/api/movies/:movie_id [GET])
- Ders 122: Hata yönetimi
- Ders 123: Film güncelleme endpoint'inin yazılması (/api/movies/:movie_id [PUT])
- Ders 124: Güncelleme işleminde new operatörü (MongoDB)
- Ders 125: Film silme endpoint'inin yazılması (/api/movies/:movie_id [DELETE])
- Ders 126: Top10 endpoint'inin yazılması ( /api/movies/top10 [GET] )
- Ders 127: Between endpoint'inin yazılması (/api/movies/:start_year/:end_year [GET])
- Ders 128: Directors endpoint'i post metodunun yazılması (/api/directors [POST])
- Ders 129: Tüm yönetmenleri listeleyen endpoint'in yazılması (/api/directors [GET])
- Ders 130: Yönetmen detay endpoint'inin yazılması (/api/directors/:director_id [GET] )
- Ders 131: Yönetmen güncelleme endpoint'inin yazılması (/api/directors/:director_id [PUT])
- Ders 132: Yönetmen silme endpoint'inin yazılması (/api/directors/:director_id [DELETE])
- Ders 133: Tüm filmleri listeleyen endpoint'in düzenlenmesi (/api/movies [GET])
- Ders 134: Movie şeması validasyon işlemleri
- Ders 135: Director şeması validasyon işlemleri
Bölüm 14: JSON Web Token (JWT) İle Oturum Yönetimi
- Ders 136: Kullanıcı kayıt endpoint'inin yazılması (/register [POST])
- Ders 137: Bcrypt ile parola şifreleme
- Ders 138: Json Web Token(JWT) nedir? Nasıl çalışır?
- Ders 139: Jsonwebtoken ile token oluşturma servisinin yazılması
- Ders 140: Token verify middleware'ının yazılması
Bölüm 15: Restful API için Unit Test Yazmak (Mocha & Chai)
- Ders 141: Neden test yazarız?
- Ders 142: Test ortamının hazırlanması ve ilk test kodu (describe ve it kavramları)
- Ders 143: Package.json dosyasına test script'i eklemek
- Ders 144: /api/movies/ [GET] testinin yazılması
- Ders 145: /api/movies/ [POST] testinin yazılması
- Ders 146: /api/movies/:movie_id [GET] testinin yazılması
- Ders 147: /api/movies/:movie_id [PUT] testinin yazılması
- Ders 148: /api/movies/:movie_id [DELETE] testinin yazılması
Bölüm 16: Heroku ve Deploy İşlemleri
- Ders 149: Heroku nedir? IaaS nedir? PaaS nedir?
- Ders 150: Heroku deploy işlemleri
- Ders 151: Heroku web arayüzü
Bölüm 17: Travis CI ile Sürekli Entegrasyon (Continuous Integration)
- Ders 152: Sürekli entegrasyon nedir?
- Ders 153: Travis CI nedir? Nasıl kullanılır?
- Ders 154: Travis CI ve Github ile otomatik deploy işlemleri
- Ders 155: Travis CI'de Cron Jobs ve Build Trigger oluşturma
- Ders 156: Github üzerinde build durumunun gösterilmesi
Bölüm 18: DigitalOcean üzerine Deploy İşlemleri
- Ders 157: DigitalOcean nedir? Droplet nasıl oluşturulur?
- Ders 158: Sunucuya Node.JS kurulumu
- Ders 159: Uygulamanın deploy edilmesi
- Ders 160: PM2 nedir? Nasıl kullanılır?
- Ders 161: Bazı PM2 komutları
- Ders 162: Nginx Reverse Proxy ile port yönlendirme
Bölüm 19: Nginx ile Load Balancing (Yük Dengeleme)
- Ders 163: Yük dengeleme nedir? Neler yapacağız?
- Ders 164: Vagrant ve VirtualBox kurulumları
- Ders 165: Vagrant yapılandırmaları
- Ders 166: Server-1 için Nginx kurulumu
- Ders 167: Server-2 ve Server-3 için Node.JS kurulumu
- Ders 168: Uygulama sunucularının ayağa kaldırılması
- Ders 169: Nginx Load Balance konfigürasyonunun yapılması
- Ders 170: Load Balancing performans testleri (Apache Benchmark Tool)
Bölüm 20: Websocket Temelleri ve Socket.IO
- Ders 171: Websocket nedir?
- Ders 172: Server ve Client arasında TCP bağlantısı oluşturmak
- Ders 173: Socket.on ve Socket.emit
- Ders 174: Emit işleminde data göndermek
- Ders 175: Bağlı olan diğer clientlara mesaj göndermek (broadcast.emit)
- Ders 176: Socket.IO Namespace ve Room farkları
- Ders 177: Socket.IO Namespaces (İsim Uzayları)
- Ders 178: Namespace oluşturmak, bağlanmak ve broadcast etmek
- Ders 179: Socket.IO Rooms (Odalar)
- Ders 180: Room (oda) oluşturmak ve sadece room üyelerine mesaj göndermek
- Ders 181: Leave metodu ile odadan ayrılma işlemi
- Ders 182: Leave metodunda son bağlantının da ayrılması durumu
- Ders 183: Socket ID nedir?
- Ders 184: Bağlı olunan oda(room)ları listelemek
- Ders 185: Socket.IO Client: reconnectionAttempts, reconnectionDelay, reconnection
- Ders 186: Socket.IO Client: reconnect_attempt, reconnect_error ve reconnect event'ları
Bölüm 21: Socket.IO ve Redis ile Gelişmiş Chat Sistemi
- Kullanıcıların sohbet odası oluşturabilme özelliği.
- Sadece belli odaya mesaj gönderebilme özelliği.
- Sadece belli kişiye mesaj gönderebilme özelliği.
- Odalarda ve genelde bulunan online kullanıcı bilgilerini gösterme özelliği.
- "Mehmet Yazıyor..." şeklinde yazıyor mesajının gösterilmesi özelliği.
Bölüm 22: Child Process
Bölüm 23: Clustering
Bölüm 24: Monitoring
Bölüm 25: Debugging
Bölüm 26: Logging
Bölüm 27: Caching
Bölüm 28: NPM modülü geliştirmek
Bölüm 29: Performans taktikleri
Bölüm 30: Öğrendiğiniz tüm bilgileri kullanabileceğiniz WEB projesi

Örnek Videolar

Aşağıya eğitimden iki adet videoyu bırakıyorum.

Load Balancing Bölümünden

Streams Bölümünden

Kurs'a Git

Lütfen önerilerinizi belirtmeyi unutmayın. :) Selametle.

Github, Travis CI ve Heroku Entegrasyonu

mehmetseven0@gmail.com (Mehmet Seven) — Tue, 03 Oct 2017 00:00:00 GMT

Hazır olun! Mahşerin üç çılgın atlısı geliyor. Hem de dıgıdık dıgıdık.

Yazdığımız projeleri deploy etmenin bir yığın yöntemi var. Eskiden değişiklik yaptığımız dosyaları ftp aracılığıyla manuel olarak sunucumuza upload ediyorduk ki bu acaip zorlu bir iş ve hiç de profesyonel değil. Sonraları sunuculara ssh ile erişip git üzerinden son değişiklikleri çekerek kullanmaya çalıştık. Bu da yemedi. Daha bir sürü saçma yöntem sayılabilir elbette. Ama artık bu işin çok klas bir çözümü var. Ayrıca bugün tek derdimiz deploy etmiş olmak da değil. Dinle.

Bugün sadece fonksiyonu yerine getirecek kodlar yazmıyoruz. Çeşitli test çeşitlerinde test kodları da yazıyoruz. Bu testler sistemin tamamının çalışır durumda olduğunu anlamamızı sağlıyor. Ancak kodumuzu canlıya veya staging ortamına göndermeden önce bu testleri çalıştırmayı unutma ihtimalimiz her zaman var var.

Vaziyet alın mevzu başlıyor.

Öncelikle şu terimleri kısa kısa açıklayalım.

GitHub

Bunu bilmeyen yoktur sanırım ama yine de aramıza yeni katılan arkadaşları düşünerek bahsedelim. Takım arkadaşlarınız ile birlikte veya tek başınıza proje geliştirmeniz için size versiyon kontrol arayüzü sunan ve Git versiyon kontrol sistemi ile çalışan dünyanın en güzel icadı.

Travis CI

Ecnebiler buna "Continuous Integration" yani "Sürekli Entegrasyon" adını vermişler. Aslında Continuous Integration mevzusunu çoooook uzun bir makale altında başlı başına anlatmak istiyorum. Çünkü burada bir iki satıra sığdırılacak bir kavram değil. "Travis" bir Continuous Integration aracı. Özetle şu işi yapıyor. Sizin Travis konfigürasyon dosyasında verdiğiniz komutlara göre projenizi baştan aşağı build ediyor ve herhangi bir noktada hata ile karşılaşırsa bunu size bildiriyor. Hata olmadığı durumda da eğer isterseniz kodunuzu sizin yerinize deploy ediyor. Sonra da "bak ben bir hata ile karşılaşmadım, deploy'u da yaptım haberin olsun" şeklinde mail atıyor.

Heroku

Çoğu web dilini destekleyen ve bu diller ile yazılmış projeleri sunucuları üzerinde host eden kullanışlı bir bulut hizmeti.

Eslint

Çoğu zaman kodu farklı farklı şekillerde yazarak aynı sonuca ulaşabiliyoruz. Bunu algoritma anlamında söylemiyorum. Örneğin herhangi biri string ifadelerde çift tırnak kullanıyorken bir başkası tek tırnak kullanabiliyor. Kimisi aralıkları space ile kimisi tab ile veriyor.Ya da bir if ifadesi yazıldığında kimisi ilk süslü parantezi aynı satırda yazıyor, kimisi bir alt satırda. Hal böyle olunca ekip halinde geliştirilen projelerde standardizasyonu sağlamak bir hayli zor oluyor. Eslint burada devreye giriyor ve eslint konfigürasyon dosyasında belirtiğiniz kurallara göre sizi bu kurallara uymaya zorluyor. Büyük nimet efem. Detaylı bilgi için şöyle alalım sizi.

Eğlence Zamanı

Şöyle bir örnek proje üzerine örnek bir senaryo ile devam edelim. Çok basit bir NodeJS servisimiz olsun ve bu servise ait bazı unit testler yazalım. Ayrıca Eslint kullanarak kodun standardizasyonunu sağlayalım. Sonra Travis CI' yi projemize entegre edelim, unit testlerin ve eslint kurallarını kontrol etsin. Eğer her şey yolunda ise kodumuz Heroku üzerinde deploy edilsin.

Hemen işe koyulalım ve github üzerinden bir repo oluşturalım.

Repo hazır. İşte burada.

Çalışma dizinimizi oluşturalım.

cd ~/Desktop
mkdir blogpost && cd blogpost

GitHub repomuzu klonlayalım. Tabi siz burada kendi GitHub repo adresinizi yazacaksınız. Sondaki nokta, klonlamayı bulunduğunuz klasöre yapmanızı sağlar. Noktayı koymazsanız, repo bir klasör ile gelir.

git clone https://github.com/meseven/blogpost.git .

NodeJS Projesi

Node ile basit bir servis yazacağız demiştik. Mimari ile çok fazla uğraşmamak adına express-generator ile hızlıca Node sunucumuzu ayağa kaldıralım.

Express generator modülünü kuralım.

sudo npm install express-generator -g

Express generator'u kullanarak proje yapısını oluşturalım.

express .

Bağımlılıkları yükleyelim

npm install

Şimdi http://localhost:3000 adresine gidelim ve node sunucumuzun ayağa kalktığını görelim.

Buraya kadar olan kısmı git repomuza push edelim.

git add .
git commit -m "node server generated"
git push origin master

Node Servisi

Basit bir servis yazacaktık. Bu servisin görevi base url'de JSON formatında bir veri döndürmek olsun.

routes/index.js dosyasına gidelim ve aşağıdaki satırı,

res.render('index', { title: 'Express' });

Aşağıdaki satır ile değiştirelim.

res.json({ name: 'Mehmet', surname: 'Seven', age: 24 });

Projenin çalıştığı URL'e gidelim.

Her şey yolunda gibi görünüyor.

Değişiklikleri commitleyelim.

git add .
git commit -m "service"

Unit Testler

Yoksa sen hala unit test yazmaya başlamadın mı?

Şimdi servisimiz için iki adet basit unit test yazacağız. Testlerimizi mocha ile chai assertion'ını kullanarak yazacağız.

npm install chai chai-http mocha --save-dev

Kök dizinde test adında bir klasör oluşturalım. Bu klasör içerisinde index.js adında bir dosya oluşturalım.

index.js

let chai = require('chai');
let chaiHttp = require('chai-http');
let should = chai.should();
let server = require('../app');

chai.use(chaiHttp);

describe('Node Server', () => {
  it('(GET /) returns the homepage', (done) => {
    chai
      .request(server)
      .get('/')
      .end((err, res) => {
        res.should.have.status(200);
        done();
      });
  });
});

Bu test basitçe anasayfaya erişim olup olmadığını kontrol ediyor. Sunucunun döndüğü cevap 200 ise testten geçiyor. Hemen deneyelim!

mocha

Görüldüğü üzere testten geçtik.

Şimdi testimizi biraz daha detaylandıralım. Servisin bize döndüğü name,surname ve age alanlarının var olması gerektiğini, ayrıca name ve surname alanlarının string, age alanının integer olması gerektiğini belirtelim.

let chai = require('chai');
let chaiHttp = require('chai-http');
let should = chai.should();
let server = require('../app');

chai.use(chaiHttp);

describe('Node Server', () => {
  it('it should GET all the data', (done) => {
    chai
      .request(server)
      .get('/')
      .end((err, res) => {
        res.should.have.status(200);
        res.body.should.be.a('object');
        res.body.should.have.property('name').to.be.an('string');
        res.body.should.have.property('surname').to.be.an('string');
        res.body.should.have.property('age').to.be.an('number');
        done();
      });
  });
});

mocha'yı çalıştıralım.

mocha

Evet, test yine başarılı. Çünkü servisin teste aykırı olarak döndüğü herhangi bir veri yok.

Mesela servisin döndüğü name property'sini kaldıralım ve tekrar test edelim acaba testten geçebilecek mi?

routes/index.js dosyasına gidelim ve aşağıdaki satırı,

res.json({ name: 'Mehmet', surname: 'Seven', age: 24 });

Aşağıdaki satır ile değiştirelim.

res.json({ surname: 'Seven', age: 24 });

Tekrar test edelim.

mocha

Bu sefer testten geçemedik. Çünkü servisin name adında bir property dönmesi zorunlu.

Şimdi de age property'sinin döndüğü değeri String yapalım ve tekrar test edelim.

routes/index.js dosyasına gidelim ve aşağıdaki satırı,

res.json({ surname: 'Seven', age: 24 });

Aşağıdaki satır ile değiştirelim.

res.json({ name: 'Mehmet', surname: 'Seven', age: '24' });

Tekrar test edelim.

mocha

Evet yine beklediğimiz gibi test fail oldu. Çünkü age property'si Integer olmalı.

Her şey harika. Son olarak routes/index.js dosyamızı eski haline getirip commit'leyelim.

routes/index.js

res.json({ name: 'Mehmet', surname: 'Seven', age: 24 });

Commit

git add .
git commit -m "index test case"

Eslint Konfigürasyonu

Eslint konfigürasyonunu bazı genel kabul görmüş bazı standartlara göre (google,airbnb) veya kendi kurallarınıza göre belirleyebiliyorsunuz. Biz kendi kurallarımıza göre oluşturalım.

Indent tab ile yapılsın.
String ifadelerde tek tırnak kullanılsın.
Satır sonlarında noktalı virgül kullanmak zorunlu olsun.

Kurallarımız bunlar. Hemen mevzuya geçelim.

Kurulum için;

npm install -g eslint

Şimdi aşağıdaki komutu çalıştıralım.

eslint --init

Karşımıza "How would you like to configure ESLint?" şeklinde bir soru geliyor. Eslint'i nasıl konfigüre etmek istersin diye soruyor. Biz "Answer questions about your style" seçelim. Böylece eslint bize soru soracak ve vereceğimiz cevaplara göre bir config dosyası oluşturacak.

Are you using ECMAScript 6 features? (Y)
Are you using ES6 modules? (Y)
Where will your code run? (Node)
Do you use JSX? (N)
What style of indentation do you use? (Tabs)
What quotes do you use for strings? (Single)
What line endings do you use? (Unix)
Do you require semicolons? (Y)
What format do you want your config file to be in? (JSON)

Şimdi kök dizinimize baktığımızda .eslintrc.json adında abir dosya gelmiş olması gerekiyor. Eğer göremiyorsanız klasördeyken CTRL+H yaparak gizli dosyaları gösterebilirsiniz.

.eslintrc.json

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Evet tüm kurallarımızı belirledik. Hemen bakalım kurallarımıza uymayan kodlarımız var mı?

eslint .

Hobbbbbaaaaaa!

Aşağıdaki komut ile kurallarınıza uyacak şekilde problemleri çözüyor eslint. Fakat bazılarını size bırakıyor. Çözebileceği kadarını çözmesi için aşağıdaki komutu çalıştıralım.

eslint . --fix

Evet görüldüğü üzere çoğu problemi çözdü. Çözmediği sorunlar ise sistemin işleyişini bozma tehlikesi olabileceği düşüncesiyle bize bırakılmış. Bunları el ile temizlememiz gerekiyor.

Hatalardan bazıları şöyle,

Kök dizindeki app.js dosyanda favicon diye bir değişken var ama bunu hiçbir yerde kullanmadın diyor.
Next adında bir değişkenin var ama bunu kullanmadın diyor. (app.js, routes/index.js, routes/users.js)

Yukarıdaki sorunları halletmek için ilgili değişkenleri silmeniz yeterli.

test/index.js dosyasındaki hataları çözmek için ise .eslintrc.json dosyamızın "env" kısmını şöyle değiştirelim.

"env": {
  "es6": true,
  "node": true,
  "mocha": true
}

Şimdi geriye sadece test/index.js "3:5 error 'should' is assigned a value but never used" hatası kaldı. Burada should değişkenini kullanmadığımızı söylüyor ama aslında aşağıda kullanılıyor. Fakat farklı bir biçimde kullanıldığı için bunun farkına varamıyor. Biz ilgili satırda eslint kullanımını devre dışı bırakarak bu sorunu çözebiliriz.

test/index.js

let chai = require('chai');
let chaiHttp = require('chai-http');
/*eslint-disable */
let should = chai.should();
/*eslint-enable */
let server = require('../app');

Evet şimdi Eslint'i tekrar çalıştıralım ve bir sorun var mı bakalım.

Evet! Eğer herhangi sorun yoksa, herhangi çıktı almıyorsunuz. Her şey yolunda.

Değişiklikleri commit'leyelim.

git add .
git commit -m "eslint integration"

Heroku Entegrasyonu

Bir heroku hesabınız olduğunu varsayıyorum. Yeni bir uygulama oluşturalım. https://dashboard.heroku.com/new-app

Şimdi Heroku komut satırı aracını kurmanız gerekiyor. İşletim sisteminize uygun kurulum talimatları şurada.

Heroku CLI kurulumunu yaptıktan sonra;

Komut satırı üzerinden herokuya login olalım.

heroku login

Git için remote bir sunucu ekleyelim. (blogpost-staging kısmına sizin app name'iniz ne ise onu yazmalısınız)

heroku git:remote -a blogpost-staging

Şimdi yaptığımız değişiklikleri önce github'a sonra herokuya push'layalım.

git add .
git commit -m "heroku integration"
git push origin master
git push heroku master

İşlem bittiğinde uygulamamızın heroku üzerinde yayınlandığı URL'e gidelim.

Evet başarı ile deploy olmuş.

Travis Entegrasyonu

Travis'e github hesabımız ile kayıt olalım. Sonra login olalım ve profilimize gidelim.

Karşınıza şöyle bir zımbırtı gelecek. Aşağıda github üzerinde bulunan repolarınız listeleniyor. Travis ile kullanmak istediğimiz repoyu işaretleyelim.

Şimdi travis konfigürasyonunu yapmamız gerekiyor. Kök dizine .travis.yml adında bir dosya oluşturalım ve içeriğini şöyle yapalım.

.travis.yml

language: node_js
sudo: required
cache:
  directories:
    - node_modules
node_js:
  - 8
before_install:
  - npm install -g node-gyp
before_script:
  - export NODE_ENV=production
  - npm install
script:
  - npm run lint
  - npm run test

Bu konfigürasyonu okuyarak az çok anlayabilirsiniz. Mesela node v8'e göre build edilmesini, kurulumdan önce node-gyp modülünün kurulmasını, script çalıştırılmadan önce package.json dosyamda belirttiğim tüm npm paketlerinin kurulmasını. Son olarak da unit ve lint testlerini çalıştırmasını istedik. İsterseniz birden vazla node versiyonu için build etmesini isteyebilirsiniz. Yeni bir satır ekleyip node versiyonu belirtirseniz, o versiyona göre de build eder.

En alt satırdaki iki komut en son çalıştırılacak komutlar. Burada genelde geçmesimi beklediğimiz testleri başlatan komutlar olur. Bu komutları package.json dosyasından oluşturalım.

{
  "scripts": {
    "start": "node ./bin/www",
    "lint": "eslint .",
    "test": "mocha"
  }
}

Scripts kısmına iki satır ekledik. Biri unit testlerimizi yapan, diğeri ise lint denetimini yapan komutlar.

Şimdi son hali github üzerine push'layalım bakalım neler olacak.

Bakın github repomda commit listesini açtığımda en son commit'in sağ tarafında sarı bir yuvarlak icon belirdi. Bu icon commit'in travis üzerinde build edilmekte olduğunu belirtiyor. Eğer build başarısız olursa bu sarı iconun yerine kırmızı çarpı, başarılı olursa yeşil tik geliyor. Bu sarı icona tıklayarak travis üzerinde ki build durumunu görüntüleyebilirsiniz.

İlk build'imiz başarısız oldu.

Build detayına şuradan bakabilirsiniz. Şimdi github reponuzda commit listesine bakarsanız build'in başrısız olduğunu göreceksiniz.

Hatanın sebebi şu. Biz eslint'i ve mocha'yı kendi bilgisayarımıza genel olarak kurmuştuk. Package.json dosyamızda dev dependency olarak da belirtmemiz gerekiyordu. Hemen ekleyip tekrar deneyelim.

npm install eslint mocha --save-dev

Şimdi tekrar push yapmamız gerekiyor. Artık anladık. Travis repoya gelen her push'dan sonra build etmeye başlıyor.

git add .
git commit -m "eslint added to package.json"
git push origin master

Yine fail olduk. Build Logs.

Bu sefer hatamız .travis.yml içerisinde before_script kısmında node env olarak production vermemizden kaynaklandı. Production ortamında dev dependency'ler yüklenmediği için mocha ve eslint de yüklenemedi haliyle.

.travis.yml dosyasından aşağıdaki satırı silmeniz gerekiyor.

export NODE_ENV=production

Şimdi yeniden push işlemi yapalım.

git add .
git commit -m "fix"
git push origin master

Bu sefer başarılıyız. Build Logs

Bitiyor az kaldı

Senaryomuzu hatırlayalım. Developer abidik gubidik bir şeyler geliştirecek, test kodlarını yazacak ve kodunu github üzerine push'layacak. Bu push işlemi bittikten hemen sonra travis build işlemi yapacak ve build başarılı olursa heroku üzerine otomatik deploy yapılacak. Şimdi son adım hariç tamamını yaptık. Onu da yapalım da ortalık şenlensin biraz.

Yapmamız gereken heroku üzerinden otomatik deploy işlemini aktifleştirmek.

Heroku profilinize gidin ve uygulamanızı seçin. Uygulama detayındaki "deploy" tab'ına geçin. Burada aşağıda gösterdiğim ayarları yapmanız gerekiyor.

Ben deploy'un master branch'im den yapılmasını istedim. Siz isterseniz farklı bir branch de seçebilirsiniz.

"Wait for CI to pass before deploy" seçeneğini işaretlemeniz önemli. Aksi halde build durumu başarısız olsa dahi deploy işlemi gerçekleştirilir. Bu seçenek işaretli olduğunda build işlemi başarısız olursa deploy yapılmaz.

Dans Zamanı

Servisimizde ufak bir değişiklik yapalım. Yeni bir property ekleyelim ve projenin gerçekten otomatik deploy olup olmadığını görelim.

routes/index.js Aşağıdaki satırı,

res.json({ name: 'Mehmet', surname: 'Seven', age: 24 });

Aşağıdaki satır ile değiştirelim.

res.json({ name: 'Mehmet', surname: 'Seven', age: 24, location: 'Istanbul' });

Şimdi,

git add .
git commit -m "new property"
git push origin master

Komutlarını çalıştırın ve kendinize bir bardak kahve almaya gidin. Döndüğünüzde tüm kodlarınız baştan aşağı build edilmiş, unit testleriniz yapılmış, lint kontrolünüz ve deploy işlemleriniz tamamlanmış olacak.

Build işlemi başarılı olmuş. Build Logs

Yeni property gelmiş yani deploy gerçekleşmiş.

Test Edelim

Bakalım herhangi lint hatası yaptığımızda veya unit testler patladığında deploy gerçekleşecek mi? Gerçekleşmemesi gerekiyor.

routes/index Aşağıdaki satırı,

res.json({ name: 'Mehmet', surname: 'Seven', age: 24, location: 'Istanbul' });

Aşağıdaki satır ile değiştirelim. Sondaki noktalı virgülü kaldırdık ve 'job' adında bir property ekledik.

res.json({
  name: 'Mehmet',
  surname: 'Seven',
  age: 24,
  location: 'Istanbul',
  job: 'jobless',
});

Eğer build işleminden sonra heroku üzerinde çalışan çalışmamızı yenilediğimizde 'job' alanını da döndürürse bir sıkıntı var demektir. Çünkü build başarısız olursa deploy etmemesi gerekiyor.

Hemen github'a push edelim ve build sonucunu bekleyelim.

git add .
git commit -m "test"
git push origin master

Evet, build'in başarısız olduğunu görüyoruz. Build Status

Ve görüyoruz ki deploy işlemi tam da istediğimiz gibi gerçekleşmemiş. Gerçekleşseydi job property'sini görüyor olacaktık.

routes/index.js üzerinde yaptığımız hatayı giderip tekrar push yaparak build'in başarılı olmasını ve deploy işleminin yapılmasını sağlayalım. Dosya üzerinde yaptığımız hatayı giderelim.

eslint . --fix

Tekrar push yapıyoruz.

git add .
git commit -m "fix lint problem"
git push origin master

Build başarılı oldu. Build status

Heroku'ya bakalım deploy gerçekleşmiş mi?

Yep!

Ne Kazandık

Unit ve lint testlerimizi manuel olarak yapabilirdik ve eğer hata varsa deploy yapmazdık. Buna neden ihtiyacımız var ?

Elbette bunu yapabilirsin. Fakat şöyle düşün. Ekibine yeni biri katıldı ve senin lint kurallarını altüst eder vaziyette bir kod yazdı. Bu sıkıntılı kodu düzeltmek için vakit bulabilecek misin? Ayrıca bu kodun canlı ortamında bulunmasını ister misin? Bu yapı sayesinde artık istese de gönderemeyecek. Sen unit ve lint testlerini her deploydan önce yapıyor olabilirsin ancak unutma sen de bir insansın, unutabilirsin. Bu unutma halinde unit testden geçememiş bir kodun canlıya gitmiş olması ve dolayısıyla hatalı bir satış sonrası bilmem kaç bin lira zarar etmiş olman umrunda değilse manuel yapabilirsin. Dahası birsürü angarya işten kurtuldun. Deploy işlemleri hiç olmadığı kadar kolaylaşmış oldu. Senin sürekli yapman gereken işlemleri bu araçlar senin yerine yapıyor ve arkana yaslanıp kahvenden bir yudum almak için zaman buluyorsun. Yine de sen bilirsin kardeş.

Kapanış

Nginx ve NodeJS ile Load Balancing

mehmetseven0@gmail.com (Mehmet Seven) — Fri, 17 Feb 2017 00:00:00 GMT

Bugün, "Yük Dengeleme" yani ecnebilerin deyimiyle "Load Balancing" kavramını Nginx ve NodeJS özelinde inceleyeceğiz.

Neden yük dengeleme yapmamız gerektiğine, "bir elin nesi var iki elin sesi var" diyerek iyi bir cevap vermiş atalarımız. Aynen öyle. Eğer web uygulamanız tek bir sunucu üzerinde çalışıyorsa ve tüm yükü bu sunucu çekiyorsa haliyle biraz zorlanacatır. Ancak siz bu yükü, aynı işi yapan birden fazla sunucuya paylaştırırsanız, iş çok daha hızlı tamamlanacaktır.

Senaryomuz şöyle olsun;

Üç adet sunucumuz bulunsun. Sunuculardan biri yük paylaşımının yapılacağı, diğer ikisi ise web uygulamasının bulunacağı sunucular olsun.

Server 1

Nginx web sunucusunun kurulu olacağı ve gelen isteklerin diğer web sunucularına nasıl paylaştırılacağına karar veren sunucumuz.

name: loadbalancer
ip: 192.168.1.11

Server 2

Nodejs web uygulamasının bulunacağı sunucu.

name: web1
ip: 192.168.1.12

Server 3

Nodejs web uygulamasının bulunacağı diğer sunucu.

name: web2
ip: 192.168.1.13

Vagrant Yapılandırması

Öncelikle dizin planımızı şöyle hazırlayalım. Resimdeki gibi üç ayrı dizin oluşturalım ve her birinin içerisine Vagrantfile adında birer dosya oluşturalım.

Vagrantfile içeriklerimiz aşağıdaki gibi olsun;

"Server1" için Vagrantfile Tanımlaması

NAME = 'loadbalancer'
IP = "192.168.1.11"

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/trusty64"
  config.vm.hostname = NAME
  config.vm.network "public_network", ip: IP
  config.vm.provider "virtualbox" do |vb|
    vb.customize ["modifyvm", :id, "--memory", '2048']
  end
end

"Server2" için Vagrantfile Tanımlaması

NAME = 'web1'
IP = "192.168.1.12"

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/trusty64"
  config.vm.hostname = NAME
  config.vm.network "public_network", ip: IP
  config.vm.provider "virtualbox" do |vb|
    vb.customize ["modifyvm", :id, "--memory", '2048']
  end
end

"Server3" için Vagrantfile Tanımlaması

NAME = 'web2'
IP = "192.168.1.13"

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/trusty64"
  config.vm.hostname = NAME
  config.vm.network "public_network", ip: IP
  config.vm.provider "virtualbox" do |vb|
    vb.customize ["modifyvm", :id, "--memory", '2048']
  end
end

Vagrantfile içeriklerinde değişien tek şey IP adresleri ve sunucu isimleri oldu. Dilerseniz ek konfigürasyonlar ekleyebilirsiniz elbette.

Şimdi Vagrant sunucularımızı ayağa kaldıralım.

"Server1" için

server1 adlı dizine gidelim ve aşağıdaki komutu çalıştıralım.

vagrant up

"Server2" için

server2 adlı dizine gidelim ve aşağıdaki komutu çalıştıralım.

vagrant up

"Server3" için;

server3 adlı dizine gidelim ve aşağıdaki komutu çalıştıralım.

vagrant up

Sunucu Konfigürasyonları

Load balancer sunucumuz ve uygulama sunucularımız için aşağıdaki konfigürasyonları yapmamız gerekiyor.

"Server2" ve "Server3" için

Aşağıdaki işlemleri server2 ve server3 için ayrı ayrı yapmamız gerekiyor. Bu iki sunucumuzda da aynı web uygulaması bulunacak. Aynı kurulumlar yapılacak. Web uygulaması NodeJS ile çalışacak. Hızlı bir kurulum yapıp test edebilmek adına express ile çalışacağız.

NodeJS Kurulumu

vagrant ssh
sudo apt-get update
sudo apt-get install nodejs npm -y
sudo ln -s /usr/bin/nodejs /usr/bin/node

Express Kurulumu ve Uygulamayı Ayağa Kaldırmak

sudo npm install express-generator -g
sudo mkdir /var/www && cd /var/www
sudo express .
sudo npm install
npm start

Uygulamamızı ayağa kaldırdık. Hemen test edelim. Web tarayıcımızdan, web1 ve web2 sunucularımızda koşturan NodeJS uygulamasına erişelim.

http://192.168.1.12:3000 veya http://192.168.1.13:3000

adreslerine erişmeye çalıştığımızda express'in aşağıdaki karşılama ekranı ile karşılaşacağız. Eğer iki IP adresinde de bu ekran ile karşılaşıyorsak nodejs uygulamasını başarıyla çalıştırmışız demektir.

Server 1

Aşağıdaki komut ile sunucumuzun komut satırı arayüzüne erişelim.

vagrant ssh

Nginx kurulumunu yapalım.

sudo apt-get install nginx -y

Nginx konfigürasyonunu yapalım.

sudo vi /etc/nginx/sites-available/default

Nginx'in varsayılan ayarlarının bulunduğu dosyayı bir komut satırı editörü olan vi ile açtık. Şimdi bu dosyanın içeriğini tamamen silelim ve aşağıdaki kodları yapıştıralım.

Vi editörünü kullanarak dosya üzerinde değişiklik yapabilmek için insert moduna geçmeniz gerekiyor. Klavyenizden i tuşuna basarak bu moda geçebilirsiniz. Insert modundan çıkmak için escape tuşuna basmalısınız. Herhangi satırı komple simek için, insert modunda değilken d tuşuna ardarda iki kere basmalısınız. Dosyayı kaydedip çıkmak için ise yine insert modunda değilken :wq yazıp enter tuşuna basmanız gerekiyor. Kaydetmeden çıkmak için ise :q!. Daha fazlası şurada.

upstream servers {
  server 192.168.1.12:3000;
  server 192.168.1.13:3000;
}

server {
  listen 80;
  location / {
      proxy_pass http://servers;
  }
}

Yukarıdaki kodun upstream kısmında bulunan IP adresleri web uygulamalarımızın çalıştığı sunucunun ip adresini ve dinlediği portu belirtmekte.

Kaydedip çıkalım ve Nginx'i yeniden başlatalım.

sudo service nginx reload

Şimdi web tarayıcımıza gidelim loadbalancer sunucumuzun IP adresine erişmeye çalışalım.

http://192.168.1.11/

Eğer bu ekran ile karşılaşıyorsanız, hayırlı olsun nur topu gibi bir load balancer'ınız oldu.

"Yok arkadaş ben inanmadım, kanıtla" dersen de şöyle bir şey yapabiliriz. Web uygulamamızın koştuğu iki ayrı sunucu vardı. Bu sunucuların döndüğü cevabı değiştirelim ve tekrar test edelim. Göreceksiniz ki her refresh yapışınızda farklı sunucuya yönlendirileceksiniz.

Server 2 için (web1)

vagrant ssh
sudo vi routes/index.js

Aşağıdaki satırı,

res.render('index', { title: 'Express' });

Aşağıdaki satır ile değiştirelim.

res.render('index', { title: 'Served from Web1' });

Server 3 için (web2)

vagrant ssh
sudo vi routes/index.js

Aşağıdaki satırı,

res.render('index', { title: 'Express' });

Aşağıdaki satır ile değiştirelim.

res.render('index', { title: 'Served from Web2' });

Şimdi http://192.168.1.11/ adresine gidin ve sayfayı hızlıca yenileyin. Göreceksiniz ki en müsait sunucu hangisi ise ona yönlendirileceksiniz.

Performans testleri

Şimdi load balancerdan önce ve sonraki performans durumuna bakalım.

Apache Benchmark aracı ile testimizi yapalım.

n: Gerçekleştirilecek istek sayısı
c: Bir seferde gerçekleştirilecek birden çok istek sayısı.

Load balancer olmadan

ab -n 2000 -c 100 http://192.168.1.12:3000/

Sonuç

Server Software:
Server Hostname:        192.168.1.12
Server Port:            3000

Document Path:          /
Document Length:        197 bytes

Concurrency Level:      100
Time taken for tests:   16.932 seconds
Complete requests:      2000
Failed requests:        0
Total transferred:      786000 bytes
HTML transferred:       394000 bytes
Requests per second:    118.12 [#/sec] (mean)
Time per request:       846.616 [ms] (mean)
Time per request:       8.466 [ms] (mean, across all concurrent requests)
Transfer rate:          45.33 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.4      0      10
Processing:    55  826 138.7    819    1171
Waiting:       55  825 138.7    819    1171
Total:         57  827 138.1    820    1172

Percentage of the requests served within a certain time (ms)
  50%    820
  66%    857
  75%    894
  80%    916
  90%    954
  95%   1017
  98%   1086
  99%   1154
 100%   1172 (longest request)

Load balancer ile

ab -n 2000 -c 100 http://192.168.1.11/

Sonuç

Server Software:        nginx/1.4.6
Server Hostname:        192.168.1.11
Server Port:            80

Document Path:          /
Document Length:        197 bytes

Concurrency Level:      100
Time taken for tests:   12.773 seconds
Complete requests:      2000
Failed requests:        0
Total transferred:      846000 bytes
HTML transferred:       394000 bytes
Requests per second:    156.59 [#/sec] (mean)
Time per request:       638.629 [ms] (mean)
Time per request:       6.386 [ms] (mean, across all concurrent requests)
Transfer rate:          64.68 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.9      0      19
Processing:    39  622 182.3    592    1024
Waiting:       39  622 182.3    592    1024
Total:         41  623 182.1    595    1024

Percentage of the requests served within a certain time (ms)
  50%    595
  66%    672
  75%    743
  80%    821
  90%    900
  95%    938
  98%    967
  99%    974
 100%   1024 (longest request)

Geçen Zaman

Test sonuçlarına baktığımızda 2000 isteğin karşılanması için;

Load balancer olmadan: 16.932sn

Load balancer ile: 12.773sn

Saniyede karşılanan istek sayısı

Load balancer olmadan: 118.12

Load balancer ile: 156.59

Fark ortada. Toplam 2000 istekte 4 saniyenin biraz üzerinde kârımız var ve saniyede 38 tane fazladan istek işlemiş olduk.

Vagrant Provision #6

mehmetseven0@gmail.com (Mehmet Seven) — Sat, 27 Jun 2015 00:00:00 GMT

"Yukarıdaki at neyin kafası? konumuzla ne alakası var?" diye sormayın çünkü ben de bilmiyorum. Güzel göründü, ben de koydum ehe.

En son Berkshelf ile paket yönetiminin nasıl yapılacağını öğrenmiştik. Artık paketleri Berkshelf aracılığı ile bilgisayarımıza otomatik olarak indirebiliyoruz. İndirmesine indirebiliyoruz, lakin bu paketleri Vagrant sunucumuz içerisine kurmayı henüz öğrenmedik. Kısmetse bu başlık altında indirdiğimiz paketleri Vagrant sunucumuz içerisine kurmayı öğreneceğiz.

Önceki başlıkta oluşturduğumuz APP dizinini tamamen silelim. Aslında benzer kodları yazacağız, ancak işlem adımları iyice aklınıza oturması için böyle baştan yapmak daha doğru olacaktır.

Şimdi tekrardan istediğiniz bir yere APP adlı dizin oluşturalım. Elbette kök dizin isminizin APP olması için bir zorunluluk yok. İstediğiniz bir ismi verebilirsiniz.

Şimdi oluşturduğumuz kök dizin içerisine public adında yeni bir dizin açalım. Tahmin edeceğiniz üzere bu dizinde senkronizasyon işlemini sağlayacağız. Yine kök dizin içerisine Vagrantfile ve Berksfile isimli dosyalarımızı oluşturalım. Önceki başlıkta kullandığımız Vagrantfile ve Berksfile içeriklerimizi aynen alalım. Bu dosyaların içeriklerini aşağıda verdim.

Vagrantfile içeriğimiz;

Vagrant.configure(2) do |config|
  config.vm.box = 'hashicorp/precise32'
  config.vm.network :private_network, ip: "172.22.22.23"
  config.vm.provider :virtualbox do |vb|
      vb.gui = true
  end

  # Berkshelf
  config.berkshelf.enabled = true
  config.berkshelf.berksfile_path = "./Berksfile"

  # Senkronizasyon
  config.vm.synced_folder "/home/{USER}/APP/public" , "/var/www/"
end

Aman dikkat senkronizasyon alanındaki ilk parametreyi kendinize göre düzenleyin.

Berksfile içeriğimiz ise;

source "https://supermarket.getchef.com"
cookbook 'apache2'
cookbook 'php'
cookbook 'nodejs'

Uzun lafın kısası kök dizinimizin içeriği aşağıdaki gibi olacak.

Şimdi komut satırından kök dizinimize gelip şu komutu çalıştıralım.

berks install

Artık biliyorsunuz, bu komut Berksfile dosyamız içindeki paketleri bilgisayarımıza indirmeye yarıyor.

Paketleri indirdiğimize göre artık Vagrant sunucumuzu ayağa kaldırabiliriz. Aşağıdaki komutu çalıştıralım.

vagrant up

Bu komutu çalıştırdıktan sonra aşağıdaki gibi bir hata ile karşılaşabiliriz.

It appears that you are not using the ChefDK. Please note that Vagrant Berkshelf works best when used with the ChefDK, and other installation methods are not officially supported. Please download and install the latest version of the ChefDK from: https://downloads.chef.io/chef-dk and follow the installation instructions. Do not forget to add the ChefDK to your PATH.

Bu hata chefdk için bir PATH ataması yapılmadığından kaynaklanıyor. Aynı konumda şu komutu çalıştırarak sorunu çözebiliriz.

export PATH=/opt/chefdk/bin:$PATH

Tüm bu işlemleri tamamladıktan sonra Vagrant sunucumuz başarı ile ayağa kalkmış olmalı.

Bu başlık altında yapacağımız asıl iş neydi? İşimiz, Berkshelf aracılığı ile indirmiş olduğumuz paketleri Vagrant sunucumuza kurmak. Haydi gelin, önce indirdiğimiz paketlerin ilk etapta Vagrant sunucumuz içerisinde kurulu olmadığını teyid edelim. Sonrasında paketleri kurup, kurulumun gerçekleştiğine dair sağlama yapalım.

Kök dizinimizde şu komutu çalıştıralım.

vagrant ssh

Bu komut ile Vagrant sunucumuza ssh üzerinden bağlantı sağlayabiliyoruz. Komutu çalıştırdıysanız artık Vagrant sunucunuzun içerisindesiniz demektir. Vagrant sunucumuz içerisinde şu komutu çalıştıralım ve PHP kurulu ise versiyonunu öğrenelim.

php --version

Bakın ne dedi? "Kardeş, PHP henüz bu sunucu içerisine kurulmamış, eğer kurmak istersen şu verdiğim kodu kullanabilirsin" diyor.

The program 'php' is currently not installed.You can install it by typing: sudo apt-get install php5-cli

Tabii biz bu kodu kullanarak kurmayacağız. İndirmiş olduğumuz paketleri kullanarak otomatik kurulmasını sağlayacağız.

Gelin bir de Node.js' e bakalım. Kurulu mu? değil mi?

node -v

The program 'node' can be found in the following packages:

- node
- nodejs
  Try: sudo apt-get install selected package

Uyarıdan anladığımız kadarıyla Node.js de kurulu değil. Tamamdır!

Aşağıdaki komut ile Vagrant sunucumuzun komut satırından çıkarak bilgisayarımıza dönebiliriz.

exit

O halde başlayalım ve indirdiğimiz paketleri nasıl kuracağımızı öğrenelim.

Vagrant Provision

Bu başlık aslında bir Vagrant komutu. Belki en önemlilerinden. Yaptığı iş, bizim Vagrant'a verdiğimiz cookbookları Vagrant sunucusu içerisine kurmak. Hepsi bu.

Vagrantfile içeriğimize şu en alttaki kısmı ekleyip kaydedelim. Dosyamızın son hali şöyle;

Vagrant.configure(2) do |config|
  config.vm.box = 'hashicorp/precise32'
  config.vm.network :private_network, ip: "172.22.22.23"

  config.vm.provider :virtualbox do |vb|
      vb.gui = true
  end

  # Berkshelf
  config.berkshelf.enabled = true
  config.berkshelf.berksfile_path = "./Berksfile"

  # Senkronizasyon
  config.vm.synced_folder "/home/{USER}/APP/public" , "/var/www/"

  # Provision
  config.vm.provision :chef_solo do |chef|
    chef.add_recipe "apache2"
    chef.add_recipe "php"
    chef.add_recipe "nodejs"
  end
end

Berkshelf aracılığı ile indirdiğimiz paket isimlerini Vagrantfile dosyamızda tek tek chef.add_recipe kısmına yazıyoruz. Bu kısımda Vagrant'a şunu söylüyoruz. "Ben paketleri indirdim, sıra sende. Paketleri al ve sunucu içerisine kur."

Bunu yapabilmesi için aşağıdaki komutu çalıştıralım.

vagrant provision

Eğer şöyle bir uyarı alırsanız;

Shared folders that Chef requires are missing on the virtual machine. This is usually due to configuration changing after already booting the machine. The fix is to run a vagrant reload so that the proper shared folders will be prepared and mounted on the VM.

vagrant reload --provision

komutu ile yine aynı işlemi gerçekleştirebilirsiniz.

Eğer her şey yolunda gittiyse şöyle bir ekran çıktısı ile karşılaşmanız muhtemel.

Vagrant istediğimiz paketleri kurmuş gibi görünüyor. Ama biz yinede emin olalım.

vagrant ssh

Yukarıdaki komut ile Vagrant sunucumuza ssh üzerinden bağlandık.

Aşağıdaki komutu provizyonlama yapmadan önce çalıştırdığımızda PHP nin kurulu olmadığını söylüyordu. Birde şimdi bakalım.

php --version

Sonuç şöyle;

PHP 5.3.10-1ubuntu3.18 with Suhosin-Patch (cli) (built: Apr 17 2015 15:04:29) Copyright (c) 1997-2012 The PHP Group Zend Engine v2.3.0, Copyright (c) 1998-2012 Zend Technologies

Anlaşılan o ki PHP kurulmuş. Versiyonu ise 5.3.10.

Bir de Node.js ve Apache' ye bakalım kurulmuşmu.

node -v
# v0.10.39

which apache2
# /usr/sbin/apache2 (Sunucu içerisinde kurulduğu yeri belirtiyor)

Çok güzel! İstediğimiz tüm yazılımlar başarı ile kurulmuş.

Yeni Paket Yüklemek

Farz edelim üzerinde çalıştığımız proje görsel dosyalarını işleme ile alakalı olsun. Bu sebeple görsel işleme konusunda çok geniş imkanlar sunan imagemagick yazılımını kullanmak istedik. İstediğimiz bu paketi kurmak için neler yapmamız lazım bir bakalım.

Öncelikle paketi edinmeliyiz öyle değil mi ?

Şu adreste bizim için, daha önceden hazırlanmış bir imagemagick paketi bulunuyor. Bu paketi indirip, sunucumuz içerine kurmamız gerekiyor.

Berksfile içeriğimiz;

source "https://supermarket.getchef.com"
cookbook 'apache2'
cookbook 'php'
cookbook 'nodejs'
cookbook 'imagemagick', '~> 0.2.3'

Berksfile içeriğini bu şekilde ayarlayıp kaydettiysek aşağıdaki komutu çalıştırıp, bilgisayarımızda bulunmayan cookbookları indirelim.

berks install

Imagemagick cookbook'u haricinde Berksfile içinde bulunan diğer paketler doğal olarak tekrar indirilmeyecek. Zaten onları önceden indirmiştik. Bu komutla birlikte sadece imagemagick indirilmiş oldu.

Gelin şimdi bu imagemagick coobook'unu Vagrantfile içerisine yerleştirelim.

Vagrant.configure(2) do |config|
  config.vm.box = 'hashicorp/precise32'
  config.vm.network :private_network, ip: "172.22.22.23"
  config.vm.provider :virtualbox do |vb|
      vb.gui = true
  end

  # Berkshelf
  config.berkshelf.enabled = true
  config.berkshelf.berksfile_path = "./Berksfile"

  # Senkronizasyon
  config.vm.synced_folder "/home/{USER}/APP/public" , "/var/www/"

  # Provision
  config.vm.provision :chef_solo do |chef|
    chef.add_recipe "apache2"
    chef.add_recipe "php"
    chef.add_recipe "nodejs"
    chef.add_recipe "imagemagick"
  end
end

İşte ekledik. Peki sırf bu dosyaya bu satırı ekledik diye sunucumuza kurulmuşmu oldu? Hayır, bir adım daha var.

vagrant provision

İşte şimdi ffmpeg sunucumuz içerisine kurulmuş oldu. İnanmıyormusunuz? Denemesi bedava.

Senkronizasyon sağladığımız Public klasörümüze jpg dosya formatına sahip bir görsel koyalım. Örneğin ben aşağıdaki dolunay resmini dolunay.jpg adı ile public adlı dizine kaydediyorum.

public adlı dizine yerleştirdiğimiz bu görsel dosyası otomatik olarak Vagrant sunucumuz içerisindeki /var/www klasörüne gitmiş oldu. Şimdi Vagrant sunucumuza ssh üzerinden erişim sağlayarak imagemagick yazılımını kullanmaya çalışalım. Bakalım kurmayı becerebilmiş miyiz ?

vagrant ssh

Sonrasında senkronize olunan klasöre gidelim.

cd /var/www && ls

Yukarıdaki komutu çalıştırdığımızda dolunay.jpg dosyamızın listelendiğini görüyor olmamız lazım.

Şimdi imagemagick yazılımını kullanmaya çalışalım ve bu dolunay resmini çerçeveleyelim.

convert dolunay.jpg  \ -bordercolor white -background black  +polaroid  poloroid.png

Yukarıdaki komutu çalıştıralım ve Public dizinimize bakalım. Göreceğiz ki poloroid.png adında yeni bir dosya buraya eklenmiş olacak.

Sevdiniz mi? Gelin başka bir şey daha yapalım. Dolunay resmimize 10% oranında sigmoidal-contrast işlemi uygulayalım.

convert dolunay.jpg -sigmoidal-contrast 10,0%  new.jpg

İşte sonuç

Aslında burada amacımız Vagrant içerisine imagemagick 'i kurduğumuzu kanıtlamaktı. Bir iki örnek de imagemagick için yapmış olduk. Imagemagick hakkında çoooook daha detaylı bilgi için şuradan ve şuradan faydalanabilirsiniz.

Sonuç

Bu makalede Berkshelf ile indirilen paketlerin Vagrant içerisine nasıl kurulacağını öğrenmeye çalıştık. Imagemagick ise bonus oldu. Ee öğrendiğinize göre bana yine yol göründü. Geldik bir menkıbenin daha sonuna.. Haydi kalın sağlıcakla.

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Berkshelf ile Paket Yönetimi #5

mehmetseven0@gmail.com (Mehmet Seven) — Tue, 16 Jun 2015 00:00:00 GMT

Geldik Vagrant için paket yönetimi yapmaya. Paket denilince aklınıza ne geliyor? Konuşma paketi? Kurye paketi? Bomba paketi? Yok yok, korkmayın o tarz şeyler değil.

Paket, bir mimarinin çekirdek yazılımı üzerinde çalışacak ve uygulamaya ekstra özellikler katmak için kullanılan parçalar halindeki yazılımlardır. Sanırım bizim meslekteki paket tanımını, teorik olarak bu şekilde yapabiliriz. Mutlaka bir yerlerde, bir makale okurken görmüşsünüzdür. Bu paket yönetimi işine ecnebiler "Dependency Management" yani bağımlılık yönetimi diyorlar. Oradan kafanızda canlansın.

Berkshelf

Teorik tanımlardan kurtulup örnek üzerinden anlatırsak, çok daha iyi anlayacağımıza eminim. Bu paket yönetimi işlemlerini Node.JS için npm, PHP için Composer, Java için Maven, Ruby için Bundler hallediyor. Biz ise bu paket yönetim işlemini Chef Development Kit içerisinde entegre gelen Berkshelf yazılımı aracılığı ile yapacağız. Ancak siz Berkshelf'e muadil olan librarian-chef yazılımınıda kullanabilirsiniz. Biz bu yazı dizisinde Berkshelf üzerinden anlatım yapacağız. Çünkü Berkshelf ile kendi cookbooklarımızı da hazırlayabiliyoruz. Bu harika!

Berkshelf'in resmi web sitesi şurası.

Neden Paket Yönetimi?

Hadi diyelim programlama dillerindeki paket yönetimini anladık. E arkadaş bizim Vagrant ortamında bu iş ile ne alakamız var diye gayet mantıklı bir soru sorabilirsiniz. Hemen cevaplayalım. Biliyorsunuz Vagrant'ın geliştirilme sebebi, geliştirme ve yayın ortamını birbirine eşitlemek diye defalarca tekrarladık. Peki bu eşitlik nasıl sağlanacak? Bunu sağlamak için, öncelikli olarak kullanılacak yazılımların bir şekilde iki ortamada zahmetsiz şekilde kurulması gerekiyor. Biz, Vagrant üzerindeki işletim sistemi üzerine kurulacak olan yazılımları (paketleri,bağlımlıkları vb.) bir metin dosyasında satır satır belirtiyoruz ve bu yazılımlar paket yöneticimiz Berkshelf aracılığı ile bilgisayarımıza indiriliyor.Yayın ortamına geçme zamanı gelip bu paketleri yayın sunucusuna kurmak istediğimde bana lazım olan sadece o basit dosya. Basit ama etkili.

Eğer paket yönetimi sistemini kullanmıyor olsaydık, neyse hiç bahsetmeyelim bile. Unutulmaması gereken bir nokta, Berkshelf sadece paket indirme işlemini yapabilir. İndirilen paketlerin sanal sunucuya kurulması işlemi Chef'e ait.

Cookbook Tanımı

Yukarıda bahsettiğimiz paketlerin herbiri, Chef tarafında cookbook kelimesi ile ifade ediliyor. Berkshelf aracını kullanarak Cookbook yönetimini yapıyoruz ve bu yönetimi sağlamak için Berksfile isimli dosyaları kullanıyoruz.

Tüm Cookbooklar belli bir repoda barındırılıyor. Biz herhangi bir cookbook indirip, kullanmak istediğmizde şu adrese gideceğiz ve arama kutusunu kullanarak istediğimiz cookbook'a erişmeye çalışacağız. Burası bizim "Cookbook Süper Marketimiz". İhtiyacımız olan ne ise bu marketten alıp gidiyoruz. Hemde hiçbir ücret ödemeden! Kasiyer yok, çalışan yok! Eee özgür yazılımın etinden sütünden faydalanmak böyle birşey işte :)

Örnek olarak cookbook repomuzdan node.js için bir arama yapalım.

Yukarıda bulunan ekran görüntüsünden anlaşılacağı üzere yaptığımız "nodejs" anahtar kelimesi için 9 sonuç bulundu. Birden fazla sonuç gelmesi durumunda en fazla indirileni tercih edebilirsiniz. Bu cookbook an itibariyle tam tamına 23,323,066 kez indirilmiş. Siz bu yazıyı okurken muhtemelen bu sayı artmış olacaktır.

Arama yaparken dikkat edilmesi gereken nokta ise anahtar kelimeyi yazdığınız kısmın solunda bulunan seçim alanı. Bu seçim alanında Cookbooks seçeneği seçilmiş olmalıdır.

Arattığınız cookbook'un desteklediği işletim sistemlerini sol altta bulunan Supported Platforms kısmından görebilir ve mouse ile üzerine geldiğinizde ilgili işletim sisteminin hangi versiyonlarında desteklendiği bilgisine erişebilirsiniz.

Dilerseniz bu siteye üye olarak kullandığınız cookboklarda yapılan değişikleri "follow" butonu aracılığı ile takip edebilirsiniz.

Son olarak bu cookbookların bağımlılıkları olabiliyor. Örneğin "nodejs" cookbook'u çalışabilmek için farklı cookbooklara ihtiyaç duyabiliyor. Siz "nodejs" cookbook'unu indirdiğinizde bağımlılığı olan cookbooklarda otomatik olarak indiriliyor.

Aşağıdaki ekran görüntüsünden anlaşılacağı üzere "nodejs" cookbook'u 5 ayrı cookbook'a bağımlı.

Bu görünüme herhangi bir cookbook'un detay sayfasına gidip "dependencies" sekmesinden erişebilirsiniz.

Chef Development Kit

Berkshelf'in ChefDK içerisine entegre geldiğini söylemiştik. Şimdi bu kurulumu yapmamız gerekiyor. Ekipman içeriğine, kurulum dosya ve talimatlarına şu adresten erişebilirsiniz. Gayet kolay bir kurulumu var.

Windows kullanan arkadaşların bu kurulumdan sonra bilgisayarı yeniden başlatması gerekiyor.

Git

İndireceğimiz cookbooklar bir git reposundan geleceği için, öncelikle sistemimizde git kurulu olması gerekmektedir. Aksi takdirde gerekli indirme işlemlerini gerçekleştiremeyiz. Git için kurulum talimatlarına şu adresten erişebilirsiniz.

İşe Başlayalım

Kullanıcı ev klasörüne gidelim ve "APP" ismine sahip bir klasör oluşturalım. Tüm işlemlerimiz bu klasör altında gerçekleşecek.

cd ~
mkdir APP

OluşturduğumuzAPP isimli klasöre gidelim ve içerisine Vagrantfile ve Berksfile isimli birer dosya oluşturalım.

Berksfile isimli dosyamızı metin editörümüz ile açalım ve içerisine aşağıdaki satırları ekleyelim.

source "https://supermarket.getchef.com"
cookbook 'apache2'
cookbook 'php'
cookbook 'nodejs'

Burada Berkshelf den bizim için apache2, php ve nodejs cookbooklarını ilk satırdaki adresteki web servis aracılığı indirmesini indirmesini istedik. Şuan sadece istedik, indir emrini vermedik. Hemen verelim! Komut satırından APP dizinine gelelim şu komutu çalıştıralım.

berks install

Komut çalıştırıldıktan sonra aşağıdakine benzer bir çıktı gelecektir.

Resolving cookbook dependencies...
Fetching cookbook index from https://supermarket.getchef.com...
Installing 7-zip (1.0.2)
Installing apache2 (3.1.0)
Installing apt (2.7.0)
Installing ark (0.9.0)
Installing build-essential (2.2.3)
Installing chef-sugar (3.1.0)
Installing chef_handler (1.1.9)
Installing homebrew (1.12.0)
Installing iis (4.1.1)
Installing mysql (6.0.22)
Installing nodejs (2.4.0)
Installing php (1.5.0)
Installing rbac (1.0.3)
Installing smf (2.2.7)
Installing windows (1.37.0)
Installing xml (1.2.13)
Installing yum (3.6.1)
Installing yum-epel (0.6.0)
Installing yum-mysql-community (0.1.17)

İşte! İstediğimiz cookbookları indirdik. Ama? Neden sadece bizim Berksfile içerisinde belirttiğimiz apache2, php ve nodejs kurulmadı? Yanıt çok basit. Yüklenen diğer cookbooklar bizim indirilmesini istediğimiz cookbookların bağımlılıkları da o yüzden.

Çok güzel! Peki bilgisayarımda hangi dizine indirildi bu cookbooklar? İşte burada!

Eğer Home dizinine gittiğinizde .berkshelf klasörünü göremiyorsanız CTRL+H kombinasyonu ile gizli klasörleri gösterebilirsiniz.

Windows ortamında ise varsayılan olarak C:\Users\{USER}\.berkshelf\cookbooks yolunda bulunuyor.

Berksfile dosyamıza yeni bir satır ile birlikte yeni bir cookbook ekleyip yeniden berks install komutunu verdiğimizde eskiden indirmiş olduğumuz cookboklar indirilmeyecek, sadece sistemimizde bulunmayan cookbooklar için indirme işlemi gerçekleşecektir.

Vagrantfile dosyası üzerinde değişiklik yaparken Sublime Text editörünü kullanmanızı tavsiye ediyorum. Sublime Text üzerine CTRL+SHIFT+P kombinasyonu ile açılan yazı kutusuna "Ruby" yazarak, yazım reklendirmesi ataması yapabilirsiniz. Eğer Sublime kullanmayı tercih etmiyorsanız, Ruby dili için renklendirme yapabilen bir editör edinmeniz yeterlidir.

Vagrantfile

Berkshelf'in temel mantığını öğrendik. Gelin şimdi Vagrantfile dosyamızda uğraşalım ve Vagrant ile Berkshelf'i nasıl birlikte kullanacağımızı öğrenelim.

İçi boş olan Vagrantfile dosyamızı şu şekilde dolduralım.

Vagrant.configure(2) do |config|
  config.vm.box = 'hashicorp/precise32'
  config.vm.network :private_network, ip: "172.22.22.23"
  config.vm.provider :virtualbox do |vb|
      vb.gui = true
  end

  # Berkshelf
  config.berkshelf.enabled = true
  config.berkshelf.berksfile_path = "./Berksfile"
end

Şimdi bu içeriği satır satır açıklayalım.

Sunucumuza kurulacak olan temel kutunun Ubuntu işletim sistemine sahip hashicorp/precise32 olmasını söyledik.

config.vm.box = 'hashicorp/precise32'

Sunucumuzun hizmet vereceği yerel ip adresini belirttik.

config.vm.network :private_network, ip: "172.22.22.23"

Bu kısım uygulamamız ile çok fazla alakalı olmamakla birlikte vagrant up komutu verildiği anda VirtualBox arayüzünü açmayı sağlıyor. Birkaç faydası daha var ama şuan burada yazmayalım.

config.vm.provider :virtualbox do |vb|
	vb.gui = true
end

Son iki satırda berkshelf kullanılacağını onaylayıp, Berksfile dosyamızın nerede olduğunu vagrant'a söyledik.

config.vm.provider :virtualbox do |vb|
	config.berkshelf.enabled = true
	config.berkshelf.berksfile_path = "./Berksfile"
end

Buraya kadar herşey güzel. Hadi sunucumuzu ayağa kaldırmaya çalışalım! Vagrantfile oluşturduğumuz APP dizinine gelerek aşağıdaki komutu çalıştıralım.

vagrant up

O da ne?

There are errors in the configuration of this machine. Please fix
the following errors and try again:

Vagrant:
* Unknown configuration section 'berkshelf'.

Şeklinde bir hata aldık. Hatanın sebebi berkshelf yazılımını kurmamıza rağmen Berkshelf ile Vagrant'ın haberleşemeyişdi. Bu sorunu aşmak için bu iki arkadaşı haberleştirmemiz lazım.

Bunu yapabilmek için bir Vagrant plugini yüklememiz gerekiyor.

vagrant plugin install vagrant-berkshelf

Komut işlendikten sonra muhtemelen aşağıdaki gibi kurulumun başarılı olduğuna dair bir mesaj gelecektir.

Installing the 'vagrant-berkshelf' plugin. This can take a few minutes...
Installed the plugin 'vagrant-berkshelf (4.0.4)'!

Bu hatayı da çözdüğümüze göre komutumuzu tekrar çalıştırabiliriz.

vagrant up

Tüm bu işlemlerden sonra, yüksek ihtimalle hiçbir sorun yaşanmadan sunucunun ayağa kalkması gerekiyor.

Klasör Senkronizasyonu

Aslında bu tanımı burada yapmamam gerekiyordu. Ancak bundan sonraki başlıktaki işlemleri yapabilmemiz için senkronizasyon işlemini yapmış olmak Vagrant tarafından zorunlu tutuluyor. İlk kısımlarda bahsetmiştik ancak çok fazla teknik detay vermemiştik. Hatırlarsanız eğer, Dropbox örneğini vermiştik. İşte şimdi bu senkronizasyon hakkında daha detaylı bilgi edineceğiz.

Mantık çerçevesinde baktığımızda, eğer yerel bilgisayarmızdaki proje dizin ve dosyaları Vagrant aracılığı ile kurmuş olduğumuz sanal sunucumuza ulaşmazsa bu proje dosyalarını çalıştıramayız. Bir şekilde bu dosyaların anlık olarak sanal sunucumuza ulaşması gerekiyor. Bu işlem için Vagrantfile dosyamızda çok basit bir tanımlama yapacağız. Tek satırdan ibaret olan bu tanım şu şekilde.

config.vm.synced_folder "/home/{USER}/APP/public" , "/var/www/"

Bu satırı Vagrantfile dosyamıza ekleyeceğiz. Vagrantfile içerisinde berkshelf tanımını yaptığımız satırdan sonrasına bunu ekleyebilirsiniz. Vagrantfile dosyamızın son hali şöyle;

Vagrant.configure(2) do |config|
  config.vm.box = 'hashicorp/precise32'
  config.vm.network :private_network, ip: "172.22.22.23"

  config.vm.provider :virtualbox do |vb|
      vb.gui = true
  end

  # Berkshelf
  config.berkshelf.enabled = true
  config.berkshelf.berksfile_path = "./Berksfile"

  # Senkronizasyon
  config.vm.synced_folder "/home/{USER}/APP/public" , "/var/www/"
end

Tabi {USER} ifadesi ile belirtilen kısma bilgisayarınızdaki kendi kullanıcı adınızı yazacaksınız. Windows için ise c:/APP/public gibi bir ifade ile yolu belirtebilirsiniz.

Yapmış olduğumuz işlemin özeti şu; APP klasörü içerisindeki public klasörüne ne eklenirse, aynısını al sanal sucunudaki /var/www/ dizinine ekle. Vallahi billahi sadece bunu yaptık.

APP dizininde public adlı klasörümüz şuan yok.Unutmadan hemen oluşturalım.

NFS Kavramı

Senkronizasyon işleminde kullanabileceğimiz kullanışlı bir kavram. Teorik tanımını Wikipedi den aynen alıyorum.

Ağ Dosya Sistemi (İngilizce: Network File System, kısaca NFS), Sun Microsystems tarafından 1984 yılında geliştirilmiş, ağdaki bilgisayarların ortak bir dosya sistemine, yerel diskleri kadar kolay ulaşmasını sağlayan, RPC temelli dağıtık dosya sistemi yapısıdır.

Özetin özetini yapacak olursak, senkronizasyon işlemini NFS ile yaptığınız takdirde, klasörleriniz normal senkronizasyona göre daha hızlı eşitlenecek ve uzak dizin sanki kendi bilgisayarınızda bulunan bir disk gibi kullanılacak.

NFS denilen dosya sistemi genelde tek bir havuz diskteki veriyi kullanan ekibin, bu diskin dosya tipini NFS yaparak sanki o havuz disk oradaki verileri kullanan kullanıcının fiziksel diskiymiş gibi algılanıyor. Adamlar yapmış muhtar!

Vagrant geliştiricileride bu nimeti göz ardı etmeyip senkronizasyon işlemi için kullanılabilsin diye Vagrant için hizmet verebilir hale getirmişler.

NFS Kurulumu

Her zaman olduğu gibi, Linux çekirdekli işletim sistemleri için hiç sorun yok. Problemsiz olarak NFS kurulabiliyor.

Ubuntu için;

sudo apt-get install nfs-kernel-server

Ancak gel gelelim Windows her zamanki gıcıklığını yapıyor. Vagrant tarafından, Windows için NFS desteği verilmiyor. NFS zaten Windows üzerinde kullanılabilir bir dosya sistemi değil. Ancak şurada hazırlanmış bir çözüm var. Ben denedim, çalışıyor. Vagrant üzerine plugin şeklinde kurup, kullanabilirsiniz. Ancak Linux ortamında olduğu kadar performaslı olurmu, tartışılır.

Vagrantfile adlı dosyamızın bulunduğu APP adlı dizinde vagrant halt komutunu kullanarak sunucumuzu kapatalım. Hemen sonra vagrant up komutu ile tekrar başlatalım. Eğer NFS kurulum ve tanımlamanızda bir sorun yoksa vagrant up komutundan sonra komut satırında verilen loglar arasında şu kısım gözünüze çarpacaktır.

Yukarıda cookbook'ları bilgisayarımıza indirdik. İndirdik indirmesine de, indirdiğimiz bu cookbookları bir şekilde sanal sunucumuz içerisine otomatik olarak kurulmasını sağlamamız gerekiyor. Gel gelelim bu makaleyi burada noktalamamız gerekiyor. Türk dizileri gibi hep en heyecanlı yerde bölümü bitiriyorum ama idare edeceksiniz artık :)

Bir sonraki makalede kaldığımız yerden aynen devam!

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Vagrant ile Çalışmaya Başlamak #4

mehmetseven0@gmail.com (Mehmet Seven) — Thu, 04 Jun 2015 00:00:00 GMT

1. Kutu Yönetimi

Vagrant'ın yapı taşı kutulardır.Terminoloji kısmında bahsetmiştik. Gelin şimdi bu kutular hakkında daha detaylı teknik bilgi edinelim.

Vagrant ile çalışmaya başlamak için, öncelikle bir temel kutuya ihtiyacımız var. Temel kutuların hangi adreslerde barındığını yine terminoloji kısmında belirtmiştim. Aynı adresleri burayada alalım.

1.1.Temel Kutu Eklemek

Vagrant içerisine bir temel kutu eklemek için iki ayrı seçenek mevcut.

Vagrant bulutunda tanımlı temel kutulardan birini eklemek.
Üçüncü kişiler tarafından hazırlanmış kutuları eklemek

Kutu eklemek için baz alacağımız taslak komut şudur;

vagrant box add [title] [url]

Tahmin edeceğiniz üzere [title] ve [url] ifadeleri birer parametre.

1.1.1 Buluttan Kutu Eklemek

Şu adrese gidelim. Burada listelenen temel kutular Vagrant bulutunda bulunan ve sizin kullanımınız için hazır hale getirilmiş kutular. Buradan kutu eklemek için Vagrant'a sadece kutu ismini belirtmeniz yeterli.

Buluttan kutuyu ekleyebilmemiz için vereceğimiz komutta [title] parametresi zorunlu olarak bulunmak durumunda.Listelenen kutulardan "hashicorp/precise32" temel kutusunu ekleyeceğiz. Bu kutunun açıklamasına baktığımızda "A standard Ubuntu 12.04 LTS 32-bit box" yazdığını görüyoruz.

Aşağıdaki komutu kullanarak ilk temel kutumuzu ekleyelim.

vagrant box add hashicorp/precise32

Komutu verdikten sonra ilgili temel kutunun download işlemi başlayacak ve aşağı yukarı, aşağıdaki gibi bir çıktı gelecektir.

vagrant box add hashicorp/precise32

==> box: Loading metadata for box 'hashicorp/precise32'
    box: URL: https://atlas.hashicorp.com/hashicorp/precise32
==> box: Adding box 'hashicorp/precise32' (v1.0.0) for provider: virtualbox
    box: Downloading: https://atlas.hashicorp.com/hashicorp/boxes/precise32/versions/1.0.0/providers/virtualbox.box
    box: Progress: 8% (Rate: 786k/s, Estimated time remaining: 0:05:29)

Eğer download işlemi tamamlandıysa, temel kutumuzun gerçekten eklenip eklenmediğini kontrol etmek için şu komutu çalıştıralım.

vagrant box list

Hemen çıktıya bakalım ve kutunun gerçekten eklendiğine emin olalım.

vagrant box list
# hashicorp/precise32 (virtualbox, 1.0.0)

Anlaşılan o ki, kutumuz başarı ile eklenmiş.

1.1.2 Başka bir kutu eklemek

Temel kutu eklemenin iki yolundan birini yukarıda anladık. Bir diğer yol olan, üçüncü kişiler tarafından hazırlanmış kutuların nasıl ekleneceğinide burada öğrenelim.

Ne zaman işe yarar ?

Bir proje için Vagrant ortamı hazırladınız ve bu ortamı takımdaki diğer arkadaşlarınızında kullanması gerekiyor. Siz içerisinde bulunduğunuz ortamı bir kutu haline getirerek, bir sunucuya yüklüyorsunuz. Kutunun sunucudaki bu adresini takımınızla paylaşıyorsunuz ve herkes kutuyu o adresten eklemiş oluyor.

Nasıl kullanılır ?

Buluttan kutu ekleme mantığından hiçbir farkı yok. Yine aynı komutu kullanıyoruz. Bu kutuları eklerken [title] kısmına kendi belirlediğimiz bir başlığı, [url] alanına ise kutunun bulunduğu adresi ekliyoruz.

Vagrantbox.es adresine gidelim ve kendimize bir temel kutu beğenelim. Bu sefer işletim sistemi Debian olan bir temel kutu eklemiş olalım. Beğendiğimiz kutunun bulunduğu url yi kopyaladık ve kendimize özgü bir başlık vererek download işlemini başlattık.

vagrant box add debian_kutum http://dl.dropbox.com/u/54390273/vagrantboxes/Squeeze64_VirtualBox4.2.4.box

Download işlemi bittiye şu komutu tekrar çalıştıralım.

vagrant box list

Debian kutumuzunda verdiğimiz isimle kaydedildiğini görüyoruz.

debian_kutum        (virtualbox, 0)
hashicorp/precise32 (virtualbox, 1.0.0)

İşte temel kutu eklemek bu kadar. Kolay dimi ?

Temel Vagrant Komutları

Hani söylemiştik.. Vagrant ile alakalı tüm yapılandırmamız Vagrantfile adındaki dosyamızda tanımlanacak diye. İşte şimdi sıra geldi bu Vagrantfile dosyasını oluşturmaya.

Vagrant init

Vagrantfile adındaki dosyayı, yeni bir dosya oluşturup ismini "Vagrantfile" yaparak oluşturabilirsiniz. Ancak bize ek faydalar sağlaması sebebiyle, Vagrantfile dosyasını komut satırında oluşturacağız. Vagrantfile oluşturmak için kullancağımız komut taslağı şudur;

vagrant init [kutu-adi] [kutu-url] [seçenekler]

kutu-adi: Eğer bilgisayarınıza daha önceden vagrant box add komutu ile tanımlamış olduğunuz temel kutular varsa, o kutulardan kullanmak istediğinizin ismini bu parametre yerine yazıyorsunuz.

kutu-url: Kullanacağınız temel kutunun url'sini, Vagrantfile oluştururken belirtmek isteyebilirsiniz. Bu gibi durumlarda bu parametreyi kullanabilirsiniz.

seçenekler

--force - Vagrantfile oluşturmak istediğiniz dizinde daha önceden oluşturulmuş Vagrantfile varsa ve biz "Vagrant init" komutunu çalıştırmışsak üzerine yazmadan hata veriyor. Ancak bu parametreyi kullanırsanız, var olan dosyanın üzerine yazabilirsin demiş oluyorsunuz.
--minimal - Bu parametreyi kullanmazsak Vagrantfile içerisinde açıklama satırları ile belirtilmiş bazı tanımlamalar geliyor (Aşağıda daha net açıkladım). Eğer bu parametreyi kullanırsanız, Vagrantfile içeriği minimize ediliyor ve içeriğine şu üç satır yazılıyor.

Vagrant.configure(2) do |config|
  config.vm.box = "base"
end

--output FILE - Bu komut, Vagrant tanımlamalarını içerisinde barındıracak olan Vagrantfile dosyasının farklı bir isimle kaydedilmesini sağlar. FILE kısmına ne yazarsanız dosya isminiz o olacaktır.

Örnek Zamanı

Diskimizin herhangi bir bölümünde "test" adında bir klasör oluşturalım ve komut satırını kullanarak bu dizine erişelim. Hemen bilgisayarımızda tanımlanmış ve kullanabileceğimiz kutu listesine göz atalım.

vagrant box list
# debian_kutum        (virtualbox, 0)
# hashicorp/precise32 (virtualbox, 1.0.0)

Daha önceden iki farklı temel kutu tanımlamışız. Birini seçelim ve "vagrant init" komutunu verelim.

vagrant init hashicorp/precise32
# A `Vagrantfile` has been placed in this directory. You are now ready to `vagrant up` your first virtual environment! Please read the comments in the Vagrantfile as well as documentation on `vagrantup.com` for more information on using Vagrant.

Evet, komut satırı bize Vagrantfile dosyasını başarı ile oluşturduğumuzu ve Vagrant up komutunu kullanarak makineyi ayağa kaldırabileceğimizi söylüyor. Bunu yapacağız, ama önce şu oluşturduğumuz Vagrantfile ın içeriğine bir metin dosyası görüntüleyicisi ile bakalım. Aceleye mahal yok.

Vagranfile içeriği Ruby dili kullanılarak yazılıyor. Tahmin edeceğiniz üzere dosya içerisinde, bir çok satır başında bulunan # sembolü, o satırın açıklama satırı olduğunu belirtiyor. Vagrant yapımcıları bu açıklama satırlarını Vagrantfile içeriğine yerleştirmişler. Eğer istersek, # ifadelerini silip devamındaki komutları hemen kullanabilelim diye.

Vagranfile içerisinde yapacağımız tüm spesifik tanımlamalar

Vagrant.configure(2) do |config|
	# Komutlar
end

ifadesinin arasında bulunacak.

Bu dosya içerisinde çok fazla kaybolmadan iki tanımlamaya daha bakalım ve daha fazla detayına burada girmeyelim.

config.vm.box = "hashicorp/precise32"

Şeklınde yapılan tanımlama, yine tahmin edeğiniz üzere temel kutumuzun ne olduğunu belirtiyor. Biz eğer vagrant init komutunu kullanırken ikinci parametre olarak {url} yide vermiş olsaydık, temel kutu tanımlamasının hemen altında,

config.vm.box_url = "http://ORNEK_ADRES/ornek_kutu.box"

gibi bir tanımlama olacaktı.

Vagrant Up

Sanal sunucumuzu her ayağa kaldırmak istediğimizde bu komutu kullanacağız. Bu komut, verildiği dizinde Vagrantfile isimli dosyayı arar. Bulursa içindeki tanımlamaları, Provider'a yani kullanmış olduğumuz VirtualBox yazılımına iletir. VirtualBox da bu bilgiler ışığında bize lazım olan sunucuyu hazır eder.

Az önce "test" dizini altında oluşturmuş olduğumuz Vagrantfile dosyasını kullanarak sunucumuzu ayağa kaldıralım o halde.

vagrant up

Komutunu çalıştırdıktan sonra muhtemelen aşağıdakine yakın bir çıktı alacaksınız.

Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'hashicorp/precise32'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'hashicorp/precise32' is up to date...
==> default: Setting the name of the VM: test_default_1433346413255_89589
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 => 2222 (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: Warning: Connection timeout. Retrying...
    default: Warning: Connection timeout. Retrying...
    default: Warning: Connection timeout. Retrying...
    default: Warning: Connection timeout. Retrying...
    default: Warning: Connection timeout. Retrying...
    default: Warning: Remote connection disconnect. Retrying...
    default: Warning: Remote connection disconnect. Retrying...
    default:
    default: Vagrant insecure key detected. Vagrant will automatically replace
    default: this with a newly generated keypair for better security.
    default:
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if its present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
    default: The guest additions on this VM do not match the installed version of
    default: VirtualBox! In most cases this is fine, but in rare cases it can
    default: prevent things such as shared folders from working properly. If you see
    default: shared folder errors, please make sure the guest additions within the
    default: virtual machine match the version of VirtualBox you have installed on
    default: your host and reload your VM.
    default:
    default: Guest Additions Version: 4.2.0
    default: VirtualBox Version: 4.3
==> default: Mounting shared folders...
    default: /vagrant => /home/mseven/APP/test

Verilen bu çıktıdaki her satırın bir anlamı var. Bunları ileride daha iyi anlayacağız.

Az önce söylemiştik. Vagrantfile dosyasındaki tanımlamalara göre VirtualBox sanal bir makine oluşturuyor diye. Gerçektende öylemi acaba ?

Gördünüzmü? İşletim sistemi Ubuntu olan, bir sanal makine oluşturulmuş ve bu makine "Running" yani çalışır durumda. Eğer biz temel kutu olarak Debian seçmiş olsaydık, debian kurulacaktı.

Vagrant Halt

Bu komut çalışır durumda olan sanal makinenizi tamamen kapatmanızı sağlar. Bilgisayarınızın bir sonraki açmanıza dek kapalı durması gibi düşünebilirsiniz.

vagrant halt [seçenekler]

Komutun kullanımı bu şekilde. Eğer herhangi bir sebep ile kapanmıyorsa [seçenekler] parametresi olarak --force veya kısaca -f verilebilir ve sunucu kapatılmaya zorlanabilir.

Vagrant Reload

Sanal makinenizi yeniden başlatmanızı sağlar.

vagrant reload [seçenekler]

Vagrant Suspend

Makinenizin aktif durumu kaydedilir ve uyku moduna almanızı sağlar."Resume" komutunu kullanana kadar makineniz güzel güzel uyur.

vagrant suspend

Vagrant Resume

"Suspend" ile uyuttuğunuz makinenizi uyandırmanızı ve kaldığı yerden çalışmaya devam etmesini sağlar.

vagrant resume

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Vagrant Kurulumu #3

mehmetseven0@gmail.com (Mehmet Seven) — Sun, 31 May 2015 00:00:00 GMT

Bu bölümde Vagrant kurulumunu yapıyoruz. Ancak ufak bir problemimiz var.

Windows ?

Bak kardeş! Sen de iyi biliyorsun, açık kaynak yazılımların çoğu Linux çekirdeği üzerinde geliştiriliyor. Geliştirilen bu yazılımları Windows üzerinde kullanmaya kalkınca haliyle ya hiç ya da etkin çalışmıyor. Vagrant ana hatları itibariyle Windows ile uyumlu çalışıyor. Fakat ileride kullanacağımız bazı özellikler için destek verilmeyebiliyor. O yüzden gel, yol yakınken bizim tayfaya dahil ol. Bir yazılım geliştirici isen, ki öyle olduğunu tahmin etmek zor değil, mutlaka Linux dağıtımlarından birini bilgisayarına kurmuşsundur. Bir iki kurcaladıktan sonra cenaze namazını kılıp, kaldırıp, Windows'a yeniden geri dönmüşsündür. Bu gayet normal. Elbette alışkanlıklardan bir anda vazgeçmek kolay değil. Ancak biraz sabredip kendini Linux dünyasına adapte ettiğinde çok doğru bir karar verdiğine inanacaksın. Windowsu kullanma demiyorum, hobi olarak yine kullan. Ancak, .NET Ortamında geliştirme yapıyorsan, anlarım. Fakat böyle bir durum yoksa gerçekten körü körüne kendine işkence ediyorsun. Benden demesi. Ben yine de makale boyunca hem Linux hem de Windows ortamına göre anlatmaya çalışacağım.

1. VirtualBox Kurulumu

Şu adrese gidelim ve işletim sistemimize uygun olan dosyayı bilgisayarımıza indirelim.

1.1. Windows İçin

Windows'a nasıl kuracağımızı Bill amca özetlemiş zaten, yukarıdaki resmi aynen alıyorum :)

1.2. Linux İçin

VirtualBox, kurulum dosyasını üç farklı dosya tipinde indirmemize imkan tanınıyor. Bu dosya tipleri .deb, .rpm ve run. İndirdiğiniz dosya tipi ne ise, aşağıdaki işlemi ona göre yapın.

İndirdiğiniz dosya .deb uzantılı ise, Yazılım Merkezinde açarak otomatik kurulmasını sağlayabilirsiniz.

Komut satırından kurmak için; CTRL+ALT+T kombinasyonu ile terminali açalım.

İndirilenler klasörüne gidelim.

cd Downloads

Aşağıda "DOSYA_ADI" diye belirttiğim yere, indirdiğiniz dosya ismi ne ise, onu yazın.

.deb uzantılı dosyalar için.

sudo dpkg -i DOSYA_ADI.deb

.rpm uzantılı dosyalar için.

rpm –ivh DOSYA_ADI.rpm

.run uzantılı dosyalar için.

sudo chmod +x DOSYA_ADI.run
sudo ./DOSYA_ADI.run

İşte oldu.

2. Vagrant kurulumu

Vagrant projesinin anasayfası burası. Hemen şuradan download sayfasına gidelim. İşletim sisteminize uygun olan dosyayı bilgisayarınıza indirin.

2.1. Windows İçin

Windows için yine hiçbir değişiklik yok. İndireceğiniz .msi uzantılı dosyayı açarak kurulumu yapıyorsunuz.

2.2. Linux İçin

Linux için indirebileceğiniz iki farklı uzantılı dosya mevcut. Biri .deb diğeri .rpm. Yapacağımız iş VirtualBox kurulumundan farklı olmayacak. Aynı komutları yine vereceğiz.

.deb uzantılı dosyalar için.

sudo dpkg -i DOSYA_ADI.deb

.rpm uzantılı dosyalar için.

rpm –ivh DOSYA_ADI.rpm

Vagrant kurulumu tamamdır. Kurulumun tamamlandığına emin olmak için sağlamasını yapalım. Komut satırına aşağıdaki ifadeyi yazıp çalıştıralım.

vagrant -v

Sonuç olarak Vagrant 1.7.2 gibi bir ifade yazacak olursa, olay bitmiştir. Bu komutla kurulu olan Vagrant versiyonunu öğrenmiş olduk. Siz bu makaleyi çok zaman sonra okuduğunuzda muhtemelen versiyon değişmiş olacak. Problem yok.

Artık Vagrant'ı kullanmaya hazırız. Bir sonraki makalede Vagrant'a ilk "çalış" komutunu vereceğiz kısmetse.

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Vagrant Terminolojisi #2

mehmetseven0@gmail.com (Mehmet Seven) — Fri, 29 May 2015 00:00:00 GMT

Terminoloji

Bir dili, yapıyı, teknolojiyi en iyi şekilde öğrenmenin en temel kuralı, o yapının içinde barındırdığı kelimeleri ve anlamlarını bilmektir. Aslında bunu sadece teknoloji alanıyla sınırlandırmamalıyız. Bir boya ustasını düşünün mesela. "Hangi zemin, hangi tip boya ile boyanır ? saten ve toz boya nedir? nerede kullanılır?" gibi soruların cevabı aslında o işin temelinde bulunan terminolojiden geçiyor. Bu yüzden sadece terminolojiye özgü tek bir makale hazırlamak istedim. Umarım böylesi daha iyi olur.

Terminolojide bulunan kelimeler hep İngilizce karşılığı ile anılıyor. Bu durum nereye gidersek gidelim böyle. O yüzden bende aşağıda İngilizce başlıklar ve Türkçe karşılıkları ile birlikte vereceğim.

Tanımını anlayamadığınız kelime üzerinde çok durmayın. Bu kelimeler zaten uygulama üzerinde kullanıldıkça bilinç altınıza, ifade ettiği karşılık ile birlikte yerleşecektir.

Boxes (Kutular)

Kutu diye ifade ettiğimiz yapı Vagrant felsefesinin yapı taşını oluşturuyor. İçinde bulunmuş olduğunuz geliştirme ortamı sizin kutunuz demektir. Vagrantdaki geliştirme ortamınızı paylaşmanız demek, aslında kutunuzu paylaşmanız demek. Peki biz bu kutuları nasıl oluşturuyoruz ? İşte burada ecnebilerin Base Box dediği Temel Kutu kavramı ortaya çıkıyor.Temel Kutu larda genellikle sadece işletim sistemi ve gerektirdikleri kurulu olarak gelmektedir. Biz bu temel kutuları kullanarak, kendi özelleştirilmiş kutularımızı oluşturuyoruz.

Aşağıdaki görsele bir forumda rast geldim. Aslında kutu mantığı en iyi şekilde bu görselde izah edilmiş.

Temel kutular şu iki adreste kullanımıza sunulmuş durumda.

atlas.hashicorp.com

vagrantbox.es

##Providers (Sağlayıcılar)

Artık biliyorsunuz. Vagrant sanallaştırma yazılımlarını (VirtualBox, VMware vb.) kullanarak çalışıyor. İşte bu kullanılan sanallaştırma yazılımlarına Provider adını vermişler.

Vagrant ile kullanmak için sağlayıcı anlamında en iyi çözümler VirtualBox yahut VMware.

Biz bu yazı dizisinde VirtualBox yazılımını kullanacağız. VirtualBox işinizi fazlasıyla görecektir ve tamamen ücretsizdir. Vagrant ile VMware kullanmak isterseniz, bu hizmet belli bir ücrete mukabil veriliyor.

Plugins (Eklentiler)

Vagrant'ı geliştiren kimselerden farklı olarak bu işe gönül veren açık kaynak yazılımcılar tarafından geliştirilen ve size Vagrant kullanımında ek fayda ve özellikler kazandıran, bir işi yerine getiren küçük çaplı yazılımlardır.

Eklentilere ufak bir örnek verecek olursak; Biz ileride bir sunucu kuracağız ve bu sunucunun hizmet verdiği yerel ağ üzerinde bir IP adresi olacak. Bu IP adresinin 127.0.0.1 olduğunu farz edelim. Biz istiyoruz ki local sunucumuza bu IP adresi ile değil, anlaşılabilir bir karakter katarı ile, daha açık olmak gerekirse "local.dev" gibi bir ifade ile girmek istiyoruz diyelim. Gidip hosts dosyasına el ile girmektense, bu eklenti aracılığı ile Vagrant içerisinde bir tanımlama yaparak, hosts dosyasına bu tanımlamayı eklemesini söylüyoruz. Bu ve benzeri ufak işlere yarayan bir yığın eklenti bulunmakta.

Provisioners

Sanırım buna Vagrant terminolojisinin en kilit kelimelerinden biri diyebiliriz. Provisioner kelimesinin tam gediğe oturan anlamlı bir karşılığı olmasada, hüküm verici, yerine getirici, provizyon verici gibi bir anlama geldiğini söyleyebiliriz.

Hani ilk makalede söylemiştik. Vagrant istediğimiz yazılımları kuracak, bu yazılımların konfigürasyonlarının nerede olduğunu bilecek ve en önemlisi çalışmamız bittikten sonra bu yapıyı olduğu gibi ürün sunucumuza gönderecekti. İşte o işi bu arkadaş yapıyor.

Provision işini yapan ve en çok kullanılan üç adet yapı var. Bunları aşağıda listeleyelim.

1.Chef

Kendisi bu seride kullanacak olduğumuz provisionerdır.

Dil: Ruby

Kullanım yoğunluğu: Ruby geliştiricileri.

Modül Sistemi: Recipes/Cookbooks

Öğrenme eğrisi: Ruby diline biraz aşina olmakla birlikte eğri biraz daha minimize edilebilir. Genel olarak bakıldığında normal bir öğrenim eğrisine sahiptir.

2.Puppet

Dil: Ruby

Kullanım yoğunluğu: PHP geliştiricileri.

Modül Sistemi: Manifests

Öğrenme eğrisi: Ruby diline biraz aşina olmakla birlikte eğri biraz daha minimize edilebilir. Chef'e göre biraz daha zorlu eğriye sahip.

3.Ansible

Dil: Python/YAML

Kullanım yoğunluğu: Python geliştiricileri.

Modül Sistemi: Playbooks

Öğrenme eğrisi: Python diline biraz aşina olmakla birlikte eğri biraz daha minimize edilebilir.En sevimli öğrenme eğrisine sahip olandır.

Vagrantfile

Terminolojinin bir diğer önemli ifadesi Vagrantfile. İşte buraya da zurnanın zırt dediği yer diyoruz. Vagrantfile dediğimiz zât, basit bir metin dosyasından ibaret. Vagrant ile alakalı yapacağımız tüm tanımlamalar bu dosyada bulunuyor ve biz Vagrant'a "hadi çalış bakalım" dediğimiz anda, çalış dediğimiz dizinde bu dosyayı arıyor ve içerisindeki tanımlamalara göre kendisine verilen görevi icra ediyor. Dizinde Vagrantfile dosyasını bulamazsa avazı çıktığı kadar bağırıyor.

Synced Folder (Senkronizasyon Klasörleri)

Şimdi önemli bir soru geliyor.

"İyi güzel de, ben proje dosyalarımı, kodlarımı,resim dosyalarımı kısacası proje dizinimi bu sanal sunucuya nasıl göndereceğim? Her değişiklik yaptığımda gidip VirtualBox içine mi kopyalacağım bu dosyaları?"

Hayır tabii. Vagrant size kendi makineniz ile sanal sunucu olarak çalışan makine arasında dosya senkronizasyonu yapmanızı sağlıyor. Kendi makinenizde kaynak klasörünüz var, birde sanal makinede hedef klasörünüz. İşte Vagrant bu ikisini birbirine eşitliyor.

Bir örnek verecek olursak; Akıllı telefonunuza Dropbox yazılımını muhtemelen kurmuşsunuzdur. Dropbox ne yapıyor? Cihazınızla bir fotoğraf çektiğiniz anda, fotoğraf diske kaydediliyor. Kayıt işlemi bittiği anda Dropbox bu fotoğrafı alıyor ve kendi bulut sunucusuna gönderiyor. Yani sizin cihazınızdaki resimler klasörünü, bulut sunucudaki hedef klasörünüzle eşitlemiş oldu. Siz cihazınızdaki o klasöre ne eklerseniz ekleyin, aynısı Dropbox'ın klasörünede gidecektir. Anlaştık değilmi?

Bu kadar teori yeter. Önümüzdeki makaleden itibaren aksiyon ve dolayısıyla eğlence başlıyor.

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Vagrant Nedir? #1

mehmetseven0@gmail.com (Mehmet Seven) — Thu, 28 May 2015 00:00:00 GMT

Vagrant

Sıkı durun, bu makale ile birlikte Vagrant hakkında bir yazı dizisi hazırlamaya başlıyoruz. Kaç seriden oluşur şu an için tahmin edemiyorum. Gittiği yere kadar artık. Eminim bu yazı dizisini tamamladığınızda programcılık hayatınıza yeni bir soluk gelecektir.

Vagrant Nedir? Ne için?

Vagrant'ın nasıl kullanılacağı yoğurdu yiyen kişiye göre değişiyor. Test uzmanları, yazılım uzmanları veya sunucu yöneticileri vb. kendi alanlarına uygun şekilde kullanabilirler. Tahmin edeceğiniz gibi biz mevzuya web geliştiriciler açısından bakacağız.

Şu diyaloğa hep denk gelmişizdir.

+ Oğlum ne yaptın işi?
- Hazır patron.
+ Hani? Hata veriyor?
- Yek yea lokalde çalışıyordu.

Bu arkadaşın durumuna düşmeyen varmı bilmiyorum. İşte Vagrant denen zımbırtı da tam bu noktada, bu duruma düşmemek için devreye giriyor ve ipleri eline alıyor. Geliştirme ve yayın ortamlarındaki yazılım ve donanım özelliklerini aynı hale getirip; uygulama local sunucuda nasıl çalışıyorsa, yayın ortamında da aynı şekilde çalışmasını sağlıyor. Nasıl? Güzel fikir dimi ?

Ayrıca hazırladığınız bu geliştirme ortamını başkalarıyla veya takımınızla paylaşarak tüm takımın aynı sahada top koşturmasını sağlayabilirsiniz.

Çok basit, teorik bir tanım yapacak olursak, VirtualBox veya Vmware yazılımlarını kullanarak her proje için ayrı sanal makine oluşturup, yazılım geliştirmenin bu ortamda yapılmasını sağlayan ve geliştirme bittiğinde bu local sunucuyu olduğu gibi ürün sunucusuna kopyalayan kullanışlı bir araç.

Şimdi hayal edelim. Diyelimki local sunucunuzda PHP ile bir yazılım geliştiriyorsunuz ve temelde PHP ile çalışan bu yazılım içerisinde;

Nginx | Apache
Elastic Search
MongoDB
Ffmpeg
Memcache
Redis ve bazı node.js modülleri kullandığınızı varsayalım.

Pek tabi olarak da kullandığınız bu teknolojilerin bazı özelleştirdiğiniz konfigurasyon dosyaları mevcut. (Apache de sites-avalabile, PHP de php.ini dosyaları gibi)

Bu kurulumları ve konfigürasyonları local sunucunuzda yaptığınız diyelim. Eee? Bide yayın ortamındaki sunucu için açıp tek tek bu yazılımlarımı kuracaksınız ? Hadi bi çılgınlık yapıp kurdunuz diyelim. Peki bu yazılımların konfigürasyon dosyaları? Onları da mı tek tek bulup düzenleyeceksiniz? Vagrant ın gözünü seveyim.

Siz bir dosyada, yayın sunucunuza vagrant'ın (aslında direkt vagrant değil) hangi yazılımları kuracağını ve hangi konfigürasyonları uygulayacağını söylüyorsunuz, o da yapıyor.

Web geliştiricilerin geneli Wamp, Lamp, MAMP Server, AppServ, Xampp gibi yazılımları kullanmıştır.Bu yazılımları kullanmanın zorluğunu çeken bilir. Özellikle Windows ortamında local sunucu oluşturmak maksadıyla bu yazılımları kullanıyorsanız aman aman, evlerden ırak.

Neden böyle söylüyorum, biraz açalım. Vakt-i zamanında Windows ortamında, Unix çekirdeği üzerinde geliştirilmiş yazılımlar üzerinde geliştirme yapmaya kalkmak gibi bir cahillikte bulunmuşluğum olmuştu.Bir boş bulunmuşluk diyelim. Wamp Server üzerine herhangi 3.parti bir yazılım kurmaya kaltığınız anda, işte ne üdüğü belirsiz bir siteden .dll dosyası bul, wamp server dizinine yapıştır, çalışıyormu diye dene (%85 çalışmaz), çalışsa bile yayın ortamındaki performansı ile local ortamdaki performansı tutarsız oluyor. Kısmetse bu yazı dizisi ile birlikte bu alışkanlıkları bırakıp Vagrant kullanmaya başlayalım.

Serinin Tüm Başlıkları

Part 1 - Vagrant Nedir?

Part 2 - Vagrant Terminolojisi

Part 3 - Vagrant Kurulumu

Part 4 - Vagrant ile Çalışmaya Başlamak

Part 5 - Berkshelf ile Paket Yönetimi

Part 6 - Vagrant Provision

Javascript request Animation Frame Metodu

mehmetseven0@gmail.com (Mehmet Seven) — Sat, 23 May 2015 00:00:00 GMT

Biliyorsunuz, Javascript'de bir işi, işleyişi tekrar etmek için temel anlamda iki metod kullanıyoruz. Bunlar setInterval ve setTimeout metodları.

Bu metodlardan harhangi birini kullanarak bir animasyon işlemini yapması için çalışır hale getirdiğimizi varsayalım. Hazırladığımız sayfada animasyon çalışırken iyi hoş.Peki animasyonun çalıştığı sayfadan ayrılıp başka bir pencereye geçersek veya web tarayıcısını simge durumuna küçültürsek? Animasyon devam edecek mi? Evet edecek. İşte bu durum bazı sıkıntılara yol açıyor. Özellikle canvas üzerinde çizimler yapıyor ve hatta işin içine 3 boyutlu grafik işleme işlerinin girdiğini düşünürsek, bu durum boş yere merkezi işlem birimi ve grafik kartı işlemcisinin kullanımı anlamına geliyor.

Peki işin doğrusu nedir? requestAnimationFrame kullanımı. Eğer biz senaryosunu kafamızda çizdiğimiz uygulamayı setInterval veya setTimeout ile yapmak yerine requestAnimationFrame ile yapsaydık bu tip bir sıkıntı olmayacaktı. Zira bu metod ile çalışan animasyon, sayfa herhangi bir şekilde terkedildiği takdirde duracak ve sayfaya yeniden gelindiğinde kaldığı yerden devam edecekti.

Temelde bakıldığında requestAnimationFrame metodu da kendi içerisinde setTimeout kullanıyor. Hemen requestAnimationFrame metodu içeriğine bakalım.

window.requestAnimationFrame = (function () {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();

Gördüğünüz üzere setTimeout kullanılıyor ve fps oranı olarakda insan gözünün en iyi ayırt edebileceği oran olan 1000/60 verilmiş durumda.

Hemen bir örnek yapalım da, ciğerlerimiz bayram etsin. Canvas üzerine çok basit bir çizim yaptırıp, bu çizimi bir animasyon işlemi haline getirelim.

<canvas id="canvas" width="900" height="200" style="background:black">canvas>
<br />
<input type="button" value="Run" id="run" />

function init() {
  var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  var radius = 1;
  var color = 0;

  function draw() {
    ctx.fillStyle = 'hsl(' + color++ + ',100%,40%)';
    ctx.beginPath();
    ctx.arc(450, 200, radius, 0, Math.PI * 2, false);
    ctx.fill();
    radius += 0.5;

    if (color < 600) requestAnimationFrame(draw);
  }
  draw();
}

document.getElementById('run').onclick = function () {
  init();
};

Çalışır halini görmek için tıklayın.

İsterseniz bu animasyonu çalıştırıp, simge durumuna küçültün ve bir yaz tatili yapıp gelin. Sayfayı tekrar açtığınızda animasyonun kaldığı yerden devam ettiğini göreceksiniz.

Remastersys ile Ubuntu Yedeği Almak

mehmetseven0@gmail.com (Mehmet Seven) — Wed, 14 Jan 2015 00:00:00 GMT

Biliyorsunuz, ubuntu denilen zımbırtı insanı sürekli araştırmaya, öğrenmeye ve üretmeye teşfik eden bir yapı. Hal böyle olunca sistem üzerinde deneme yanılmalar, birinci dereceden sistem ayar dosyalarını elden geçirmeler bir hayli artıyor. Eee tabi doğal olarak her defasında başarı sağlanamıyor.Özellikle Linux dağıtımları üzerinde çok fazla tecrübe sahibi değilseniz,bir noktadan sonra sistemin çalışmasını olumsuz etkileyen yanlışlıklar yapabilirsiniz. Bu gayet doğal. Sakın Linux dağıtımlarını kullanmaktan vazgeçmeyin. Birgün zaten istesenizde vazgeçemeyeceksiniz :)

Diyelimki ubuntu üzerinde terör estirdik,esdik,gürledik. Ve bir baktık, ubuntu artık bize dayanamıyor ve topallamaya başladı.O kolay kolay topallamaz ya neyse.. Konuyu dağıtmadan esas değinmek istediğim noktaya geleyim. Fakat şunu da söylemeden edemeyeceğim.

Az da olsa uzman olmadıkça, ubuntuyu bozamazsınız.

Ubuntu ortamında, windows ortamında bulunduğu kadar gelişmiş, sistem yedeği almayı sağlayan yazılımlar bulunmuyor. Fakat ubuntuda her zaman bir çıkış yolu vardır.Gözlemlediğim kadarıyla Remastersys adı verilen yazılım ubuntuda sistem yedeği almayı ve ihtiyaç duyulduğunda geri yükleme işlemini fazlasıyla iyi bir şekilde yapıyor.

Gereklilikler

Aslında çok fazla bir şeye ihtiyacınız yok.

Flash bellek. Kapasitesini sistem yedeğinizin kaplayacağı alana göre seçmelisiniz.
Ubuntu üzerine kurulmuş Remastersys yazılımı.

Yapılacaklar

Remastersys kurulumu.
Sistem yedeğini almak. (Backup)
İso formatlı sistem yedeğini flash belleğe yazmak.
Alınan yedeği yüklemek. (Restore)

Kurulum

Hemen terminali açalım ve root yetkilerini isteyelim.

sudo su

Remastersys paketini kaynağından indirip, paket kaynağı listemize ekleyelim.

wget -O - http://www.remastersys.com/ubuntu/remastersys.gpg.key | apt-key add -

Kaynak listemizi açalım.

sudo gedit /etc/apt/sources.list

Şu anda gedit aracılığı ile sources.list dosyası açılmış olmalı.Açılan dosyanın en altına şu satırları ekleyelim.

#Remastersys Precise
deb http://www.remastersys.com/ubuntu precise main`

Son olarak paket depolarımızı güncelleyip, remastersys ve remastersys gui kurulumunu başlatalım.

sudo apt-get update && sudo apt-get install -y remastersys remastersys-gui

Tüm bu işlemleri yaptıktan sonra, klavyeden Super tuşuna basalım ve kurulumu tamamladığımıza emin olalım.

Tıklayıp açtığımızda, aşağıdaki arayüz ile karşılaşıyoruz.

Bu ekranda Customize butonuna tıklayalım. Açılan ekranda Configure kısmına girelim. Bu alan, oluşturulacak .iso formatlı yedek dosyasının konumu,ismi,açıklaması ile alakalı ayarlamaların yapıldığı kısımdır. İsteğinize göre doldurabilirsiniz.

WORKDIR kısmı backup ile alakalı işlemler sonucu oluşturulan dosyaların kök dizininin neresi olacağını ifade eden çalışma dizinidir.Backup sonucu bize lazım olan iso dosyasıda buraya kaydedilir ve varsayılan olarak /home/remastersys olarak gelir.Gerekli ayarlarınızı yaptıkran sonra Save butonuna basın ve ana ekrana gelin.

Gelelim yedek alma işlemini başlatmaya. Yedek alma işlemi için iki farklı seçenek çıkıyor karşımıza.

Backup - Kişisel verilerinizi yedek dosyasına ekler.
Distribution - Orjinal ubuntu kalıbını baz alarak yedekleme işlemi yapar.

Burada bizim kullanacağımız seçenek Backup seçeneğidir. Backup butonuna tıklayalım ve bir kahve alıp arkamıza yaslanalım.

Remastersys yedeklemeye başladı bile!

Tüm bu işlemler bittikten sonra /home/remastersys/remastersys dizinine iso dosyanızın geldiğini göreceksiniz. Bu iso dosyasını, ister usb belleğinize yazıp bilgisayarınızı bu usb bellek ile başlatarak yedeğinize geri dönün, isterseniz VirtualBox gibi sanal makine yazılımlarını kullanarak aldığınız yedeğin durumunu test edin.

Ben VirtualBox üzerinde iso dosyasını çalıştırdım. İlk gelen ekran aşağıdaki gibi.

Dilerseniz buradaki arkaplanı remastersys arayüzünde kendinize göre değiştirebilirsiniz. İlk seçenek olan "live - boot the Live System" i seçip girelim.

İşin bundan sonraki kısmı malum... Yedeğini almış olduğunuz sistem açılıyor ve masaüstünde aldığınız yedeğe geri çevirmek için bir kısayol beliriyor. Bu kısayolu açıp gerekli ayarlarınızı yaptıktan sonra sisteminizi eski haline getirebilirsiniz.

Hadin görüşürüz!