Genel Bir Adresden Erişilebilir Bir Yerel Sunucu Oluşturma
10 yılın daha iyi bir kısmı için web siteleri geliştiriyorum ve en büyük sorunlarımdan biri yerel gelişim ve yerel siteleri canlı testlerle senkronize etmek oldu. Yerel bir ortam kullanmak harikadır, çünkü hızlıdır, ancak uzaktan görülememesi ve bir yere aktarılması, veritabanı işlemi, tabloların, değerlerin yeniden adlandırılması vb. Anlamına gelir..
Bu yazıda size kolay bir yol göstereceğim yerel bir sunucu çalıştır hangisini yapabilirsin telefonunuzdan ve diğer mobil cihazlardan erişim yerel olarak ve ayrıca Internet üzerinden yayın yapın; bu, çalışmanızı müşterilerle paylaşır, yerel ortamdan ayrılmadan.
Yerel Bir Ortam Oluşturmak İçin Serseri Kullanmak
Kısa bir süre önce Hongkiat'ta Vagrant'ı kullanma hakkında bir yazı yazdım, bu yüzden sadece buradaki temelleri gözden geçireceğim. Daha fazla bilgi için makaleye bir göz atın.!
Başlamak için, VirtualBox ve Vagrant'ı alıp kurmanız gerekir. Her ikisi de ücretsizdir ve sunucunuzu çalıştıracak sanal bir makine oluşturmak için kullanılır.
Şimdi, web sitelerinizi depolamak için bir klasör oluşturun. Hadi adında bir dizini kullanalım. “Web siteleri” ana kullanıcı rehberimiz içerisinde. Olurdu / Kullanıcılar / [adı] / İnternet siteleri OS X’de ve C: / Kullanıcılar / [adı] / İnternet siteleri Windows'ta.
Adlı yeni bir klasör oluşturun wordpress. Sanal makineyi yaratacağım yer burası. Fikir, içindeki her klasörün Web siteleri ayrı bir sanal makine barındırıyor. Sen iken kutu bir sanal makineye istediğiniz kadar web sitesi ekleyin, bunları platformlara göre gruplandırmayı severim - örneğin: WordPress, Laravel, Custom
Bu yazının amaçları için bir WordPress web sitesi oluşturacağım.
İçinde WordPress klasörde iki dosya oluşturmamız gerekecek, Vagrantfile ve install.sh. Bunlar sanal makinelerimizi kurmak için kullanılacak. Jeffrey Way iki harika başlangıç dosyası yarattı; Vagrantfile ve install.sh dosyalarını alabilirsin.
Sonra, terminali kullanarak WordPress dizin ve tür sersemlemiş. Kutunun indirilip kurulması gerektiğinden bu işlem biraz zaman alacaktır. Bir fincan kahve alın ve beklerken 50 WordPress ipucunda bu yazıya göz atın.
İşlem tamamlandıktan sonra devam edebilmelisiniz. 192.168.33.21 ve düzgün bir şekilde sunulan bir sayfaya bakın. İçerik klasörünün, WordPress dizini içindeki html klasörü olması gerekir. Artık dosya eklemeye, WordPress'i veya istediğiniz herhangi bir şeyi yüklemeye başlayabilirsiniz..
Sanal ana bilgisayarlar oluşturma, alan adlarını haritalama hakkında daha fazla bilgi için Vagrant rehberinin tamamını okumayı unutmayın. mytest.dev ve bunun gibi.
Gulp Kullanarak Aynı Şebekede Yerel Siteleri Açma
Bir site inşa ederken, yanıt verebilirliği düşünmelisiniz. Tarayıcı penceresini daraltarak küçük ekranlar bir dereceye kadar taklit edilebilir, ancak bu özellikle karışımda retina ekranları fırlatırsanız aynı deneyim değildir..
İdeal olarak, yerel web sitenizi mobil cihazlarınızda açmak isteyeceksiniz. Cihazlarınızın aynı ağda olması koşuluyla bu işlemi yapmak zor değildir.
Bunu yapmak için Gulp ve Browsersync kullanacağız. Gulp, geliştirme otomasyonu için bir araçtır, Browsersync, sadece yerel bir sunucu oluşturmakla kalmayıp aynı zamanda cihazlar arasında kaydırma, tıklamalar, formlar ve daha fazlasını senkronize eden harika bir araçtır..
Gulp Kurulumu
Gulp'u kurmak çok kolaydır. Yönergeler için Başlarken sayfasına gidin. Ön koşullardan biri NPM'dir (Node Package Manager). Bunu elde etmenin en kolay yolu Düğümün kendisini yüklemektir. Yönergeler için Düğüm Web Sitesine gidin.
Kullandıktan sonra npm yüklemek - küresel gulp gulp'u global olarak kurma komutunu, projenize eklemeniz gerekir. Bunu yapmanın yolu kaçmaktır npm install - save-dev gulp projenizin kök klasöründe gulpfile.js orada dosya.
Şu anda, o dosyanın içine Gulp'un kullanacağımızı gösteren tek bir kod satırı ekleyelim..
var gulp = zorunlu ('gulp'); Gulp'in senaryoları birleştirmek, Sass ve LESS'i derlemek, görüntüleri optimize etmek ve benzeri şeyleri yapmaktan hoşlanıyorsanız, Gulp Kılavuzumuzu okuyun. Bu yazıda sunucu oluşturmaya odaklanacağız.
Browserersync'i kullanma
Browsersync'in iki adımda kurabileceğimiz bir Gulp uzantısı var. İlk önce npm'i kullanalım. Sonra Gulpfile'e ekleyelim..
Sorunu npm tarayıcı senkronize gulp yüklemek - save-dev terminaldeki proje kökünde komut; bu uzantı indirecektir. Ardından, Gulpfile'i açın ve aşağıdaki satırı ekleyin:
var browserSync = requ ('browser-sync'). create (); Bu, Gulp’in Tarayıcı Kullanacağımızı bilmesini sağlar. Sonra, Browserersync'in nasıl çalışacağını kontrol eden bir görev tanımlayacağız.
gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21");); Eklendikten sonra yazabilirsiniz yunan tarayıcı senkronizasyonu Bir sunucuyu başlatmak için terminale Aşağıdaki resimdeki gibi bir şey görmelisin.
Dört ayrı URL var, işte onların anlamı:
- Yerel: Yerel URL, üzerinde çalıştığınız makinedeki sunucuya erişebileceğiniz yerdir. Bizim durumlarımızda kullanabilirsiniz
192.168.33.21veya Borwsersync tarafından sağlananı kullanabilirsiniz.. - dış: Bu, web sitesine erişmek için ağa bağlı herhangi bir cihazda kullanabileceğiniz URL'dir. Yerel makinenizde, telefonunuzda, tabletinizde vb..
- UI: Bu URL, şu anda çalışan sunucunun seçeneklerini gösterir. Bağlantıları görebilir, ağ azaltmayı ayarlayabilir, geçmişi görüntüleyebilir veya senkronizasyon seçeneklerini görebilirsiniz..
- Harici kullanıcı arayüzü: Bu, kullanıcı arayüzü ile aynıdır ancak ağdaki herhangi bir cihazdan erişilebilir.
Neden Tarayıcı Tarayıcısını Kullan?
Şimdi bu aşamada işimiz bittiğini düşünüyor olabilirsiniz: neden Browserersync kullanıyorsunuz? 192.168.33.21 URL'sine ayrıca herhangi bir cihazdan da erişilebilir. Bu durumda, WordPress'i bu URL'ye yüklemeniz gerekir..
Genellikle sanal ana bilgisayarları kullanır ve wordpress.local veya myproject.dev gibi etki alanlarına sahibim. Bunlar yerel olarak çözülür, böylece cep telefonunuzda wordpress.local adresini ziyaret edemez ve yerel bilgisayarınızdaki aynı sonucu göremezsiniz.
Şimdiye kadar iyi, şimdi ağdaki herhangi bir cihazdan erişilebilen bir test sitemiz var. Artık küreselleşmenin ve çalışmalarımızı internet üzerinden yayınlamanın zamanı geldi.
Localhost'umuzu Paylaşmak İçin ngrok Kullanımı
ngrok, yerel ana sisteminize güvenli tüneller oluşturmak için kullanabileceğiniz bir araçtır. Eğer kaydolursanız (hala ücretsiz) şifre korumalı tüneller, TCP ve çoklu eşzamanlı tüneller alırsınız.
Ngrok kurulumu
Ngrok indirme sayfasına gidin ve ihtiyacınız olan sürümü alın. İçinde bulunduğu klasörden çalıştırabilir veya herhangi bir yerden çalıştırmanıza izin veren bir konuma taşıyabilirsiniz. Mac / Linux'ta aşağıdaki komutu çalıştırabilirsiniz:
sudo mv ngrok / usr / yerel / bin / ngrok
Bu konumun var olmadığına dair bir hata alırsanız, yalnızca eksik klasörleri oluşturun..
Ngrok kullanımı
Neyse ki bu bölüm son derece basittir. Sunucunuzu Gulp üzerinden çalıştırdığınızda, kullandığı bağlantı noktasına bakın. Yukarıdaki örnekte, yerel sunucu çalışıyor http: // localhost: 3000 bu, bağlantı noktası 3000 kullanıyor demektir. Yeni bir terminal sekmesinde, aşağıdaki komutu çalıştırın:
ngrok http 3000
Bu, yerel ana makinenize erişilebilir bir tünel oluşturacaktır, sonuç şöyle olmalıdır:
Yanında gördüğünüz URL “nakliye” web sitenize her yerden erişmek için kullanabileceğiniz şey.
Sonuç
Günün sonunda şimdi üç şey yapabiliriz:
- Projemizi yerel olarak görüntüleyin ve çalışın
- Web sitemizi ağdaki herhangi bir cihaz üzerinden görüntüleyin
- Başkalarının çalışmalarımızı herhangi bir yerde basit bir bağlantıyla görmelerine izin verin
Bu, yerel ve test sunucularını senkronize, veri tabanlarını ve diğer endişe verici görevlerde tutmak için yarışmak yerine gelişmeye odaklanmanızı sağlar.
Yerel olarak çalışmak ve sonucu paylaşmak için farklı bir yönteminiz varsa, bize bildirin!
