Membuat Server Lokal Dapat Diakses Dari Alamat Publik

Saya telah mengembangkan situs web selama lebih dari 10 tahun dan salah satu masalah terbesar saya adalah selalu pengembangan lokal dan menyinkronkan situs lokal untuk tes langsung. Menggunakan lingkungan lokal itu bagus karena cepat, tetapi tidak dapat dilihat dari jauh dan mentransfer ke suatu tempat berarti operasi basis data, mengubah nama tabel, nilai, dan sebagainya..

Dalam artikel ini, saya akan menunjukkan cara mudah kepada Anda jalankan server lokal yang kamu bisa akses dari ponsel Anda dan perangkat seluler lainnya secara asli, dan juga disiarkan melalui Internet, yang berarti berbagi pekerjaan Anda dengan klien, tanpa meninggalkan hosting lokal yang baik.

Menggunakan Vagrant Untuk Menciptakan Lingkungan Lokal

Beberapa waktu yang lalu saya menulis sebuah artikel di Hongkiat tentang penggunaan Vagrant jadi saya hanya akan membahas dasar-dasarnya di sini. Untuk info lebih lanjut, lihat artikelnya!

Untuk memulai, Anda harus mengambil dan menginstal VirtualBox dan Vagrant. Keduanya gratis dan digunakan untuk membuat mesin virtual yang akan menjalankan server Anda.

Sekarang, buat folder untuk menyimpan situs web Anda. Mari kita gunakan direktori bernama “Situs web” dalam direktori pengguna utama kami. Itu akan menjadi / Pengguna / [nama pengguna] / Situs web pada OS X dan C: / Pengguna / [nama pengguna] / Situs web di Windows.

Buat folder baru dengan nama wordpress. Di sinilah saya akan membuat mesin virtual. Idenya adalah bahwa setiap folder di dalamnya Situs web merumahkan mesin virtual yang terpisah. Sementara kamu bisa letakkan sebanyak mungkin situs web di satu mesin virtual, saya ingin mengelompokkannya berdasarkan platform - misalnya: WordPress, Laravel, Kustom

Untuk keperluan tutorial ini saya akan membuat situs web WordPress.

Di dalam WordPress folder kita harus membuat dua file, Vagrantfile dan install.sh. Ini akan digunakan untuk mengatur mesin virtual kami. Jeffrey Way telah membuat dua file pemula yang bagus; Anda dapat mengambil Vagrantfile-nya dan menginstal file .sh.

Selanjutnya, menggunakan terminal, arahkan ke WordPress direktori dan jenis gelandangan. Ini akan memakan waktu cukup lama, karena kotak perlu diunduh dan kemudian dipasang. Ambil secangkir kopi dan lihat posting ini di 50 tips WordPress sambil menunggu.

Setelah proses selesai, Anda harus bisa pergi ke 192.168.33.21 dan lihat halaman yang disajikan dengan benar. Folder konten Anda harus menjadi folder html dalam direktori WordPress. Anda sekarang dapat mulai menambahkan file, menginstal WordPress, atau apa pun yang Anda inginkan.

Jangan lupa membaca panduan Vagrant lengkap untuk informasi lebih lanjut tentang cara membuat host virtual, seperti pemetaan domain mytest.dev dan seterusnya.

Membuka Situs Lokal Di Jaringan Yang Sama Menggunakan Gulp

Saat membangun situs Anda harus berpikir tentang responsif. Layar kecil dapat ditiru sampai batas tertentu dengan mempersempit jendela browser, tetapi itu bukan pengalaman yang sama, terutama jika Anda melempar layar retina ke dalam campuran..

Idealnya, Anda ingin membuka situs web lokal di perangkat seluler Anda. Ini tidak terlalu sulit untuk dilakukan, asalkan perangkat Anda berada di jaringan yang sama.

Untuk menyelesaikan ini kita akan menggunakan Gulp dan Browsersync. Gulp adalah alat untuk otomatisasi pengembangan, Browsersync adalah alat yang hebat yang tidak hanya dapat membuat server lokal tetapi juga mensinkronkan gulir, klik, formulir, dan lainnya di seluruh perangkat.

Menginstal Gulp

Memasang Gulp sangat mudah. Buka halaman Memulai untuk mendapatkan petunjuk. Satu prasyarat adalah NPM (Node Package Manager). Cara termudah untuk mendapatkan ini adalah dengan menginstal Node itu sendiri. Pergilah ke Situs Node untuk mendapatkan petunjuk.

Setelah Anda menggunakan npm instal --global tegp perintah untuk menginstal gulp secara global, Anda perlu menambahkannya ke proyek Anda. Cara untuk melakukan ini adalah menjalankan npm instal --save-dev tegukan di folder root proyek Anda, lalu tambahkan a gulpfile.js file di sana.

Saat ini mari kita tambahkan satu baris kode di dalam file itu yang menunjukkan bahwa kita akan menggunakan Gulp itu sendiri.

var meneguk = membutuhkan ('tegukan');

Jika Anda tertarik pada semua hal keren yang dapat dilakukan Gulp seperti menggabungkan skrip, mengkompilasi Sass dan KURANG, mengoptimalkan gambar, dan sebagainya, baca Panduan Untuk Gulp kami. Pada artikel ini kita akan fokus membuat server.

Menggunakan Browsersync

Browsersync memiliki ekstensi Gulp yang dapat kita pasang dalam dua langkah. Pertama, mari kita gunakan npm untuk mengunduhnya, lalu kita tambahkan ke Gulpfile kita.

Masalah itu NPM menginstal browser-sync tegukan --save-dev perintah di root proyek di terminal; ini akan mengunduh ekstensi. Kemudian, buka Gulpfile dan tambahkan baris berikut untuk itu:

var browserSync = mengharuskan ('sinkronisasi browser'). create ();

Ini membuat Gulp tahu bahwa kita akan menggunakan Browsersync. Selanjutnya kita akan mendefinisikan tugas yang mengontrol bagaimana Browsersync akan bekerja.

gulp.task ('sinkronisasi browser', function () browserSync.init (proxy: "192.168.33.21"););

Setelah ditambahkan, Anda dapat mengetik teguk browser-sync ke terminal untuk memulai server. Anda akan melihat sesuatu seperti gambar di bawah ini.

Ada empat URL terpisah di sini, inilah artinya:

Lokal: URL lokal adalah tempat Anda dapat mencapai server di mesin tempat Anda menjalankannya. Dalam kasus kami, Anda dapat menggunakan 192.168.33.21 atau Anda dapat menggunakan yang disediakan oleh Borwsersync.
Luar: Ini adalah URL yang dapat Anda gunakan pada perangkat apa pun yang terhubung ke jaringan untuk mencapai situs web. Ini akan bekerja pada mesin lokal Anda, ponsel Anda, tablet dan sebagainya.
UI: URL ini menunjuk ke opsi untuk server yang sedang berjalan. Anda dapat melihat koneksi, mengatur pembatasan jaringan, melihat riwayat atau opsi sinkronisasi.
UI eksternal: Ini sama dengan UI, tetapi dapat diakses dari perangkat apa pun di jaringan.

Mengapa Menggunakan Browsersync?

Sekarang setelah kita selesai dengan fase ini Anda mungkin berpikir: mengapa menggunakan Browsersync sama sekali? URL 192.168.33.21 juga dapat dijangkau dari perangkat apa pun. Meskipun demikian, Anda perlu menginstal WordPress ke URL ini.

Saya biasanya menggunakan virtualhost dan memiliki domain seperti wordpress.local atau myproject.dev. Ini diselesaikan secara lokal sehingga Anda tidak dapat mengunjungi wordpress.local di ponsel Anda dan melihat hasil yang sama seperti di komputer lokal Anda.

Sejauh ini bagus, kami sekarang memiliki situs uji yang dapat diakses dari perangkat apa pun di jaringan. Sekarang saatnya untuk go global dan menyiarkan pekerjaan kami melalui internet.

Menggunakan ngrok Untuk Membagikan Localhost Kami

ngrok adalah alat yang dapat Anda gunakan untuk membuat terowongan aman ke hosting Anda. Jika Anda mendaftar (masih gratis) Anda mendapatkan terowongan yang dilindungi kata sandi, TCP, dan beberapa terowongan simultan.

Menginstal ngrok

Buka halaman unduh ngrok dan ambil versi yang Anda butuhkan. Anda dapat menjalankannya dari folder yang ada di dalamnya atau memindahkannya ke lokasi yang memungkinkan Anda menjalankannya dari mana saja. Di Mac / Linux Anda dapat menjalankan perintah berikut:

sudo mv ngrok / usr / local / bin / ngrok

Jika Anda mendapatkan kesalahan bahwa lokasi ini tidak ada, cukup buat folder yang hilang.

Menggunakan ngrok

Untungnya bagian ini sangat sederhana. Setelah Anda menjalankan server Anda melalui Gulp, lihatlah port yang digunakannya. Pada contoh di atas, server lokal sedang berjalan di http: // localhost: 3000 yang artinya menggunakan port 3000. Di tab terminal baru, jalankan perintah berikut:

ngrok http 3000

Ini akan membuat terowongan yang dapat diakses ke localhost Anda, hasilnya akan seperti ini:

URL yang Anda lihat di sebelah “Penerusan” adalah apa yang dapat Anda gunakan untuk mengakses situs web Anda dari mana saja.

Kesimpulan

Pada akhirnya kami sekarang dapat melakukan tiga hal:

Lihat dan kerjakan proyek kami secara lokal
Lihat situs web kami melalui perangkat apa pun di jaringan
Biarkan orang lain melihat pekerjaan kami di mana saja dengan tautan sederhana

Ini akan memungkinkan Anda untuk fokus pada pengembangan alih-alih berlomba untuk menjaga server lokal dan menguji sinkronisasi, memigrasi basis data dan tugas mengkhawatirkan lainnya.

Jika Anda memiliki metode berbeda untuk bekerja secara lokal dan membagikan hasilnya, beri tahu kami!