Mewujudkan Pelayan Tempatan Boleh diakses Dari Alamat Awam

Saya telah membangunkan laman web untuk bahagian yang lebih baik dalam 10 tahun dan salah satu isu terbesar saya adalah sentiasa pembangunan tempatan dan penyegerakan laman web tempatan untuk menjalani ujian. Menggunakan persekitaran setempat adalah hebat kerana ia pantas, tetapi tidak dapat dilihat dari jauh dan pemindahan di tempat bermaksud operasi pangkalan data, jadual penamaan, nilai dan sebagainya.

Dalam artikel ini, saya akan menunjukkan cara mudah untuk anda jalankan pelayan tempatan yang anda boleh akses dari telefon anda dan peranti mudah alih yang lain secara semula jadi, dan juga disiarkan melalui Internet, yang bermakna berkongsi kerja anda dengan pelanggan, tanpa meninggalkan tempat yang baik.

Menggunakan Vagrant untuk Mewujudkan Persekitaran Tempatan

Tidak lama kemudian saya menulis artikel di sini mengenai Hongkiat tentang penggunaan Vagrant jadi saya hanya akan mengatasi asas-asas di sini. Untuk maklumat lanjut, lihatlah artikel tersebut!

Untuk memulakan, anda perlu merebut dan memasang VirtualBox dan Vagrant. Kedua-duanya adalah percuma dan digunakan untuk membuat mesin maya yang akan menjalankan pelayan anda.

Sekarang, buat folder untuk menyimpan laman web anda. Mari gunakan direktori bernama “Laman web” dalam direktori pengguna utama kami. Itu akan berlaku / Pengguna / [nama pengguna] / Laman web pada OS X dan C: / Pengguna / [nama pengguna] / Laman web pada Windows.

Buat folder baru bernama wordpress. Di sinilah saya akan mencipta mesin maya. Idea ialah setiap folder dalam Laman web rumah mesin maya yang berasingan. Semasa anda boleh letakkan seberapa banyak laman web pada satu mesin maya seperti yang anda suka, saya ingin menyusunnya dengan platform - misalnya: WordPress, Laravel, Custom

Untuk tujuan tutorial ini, saya akan membuat laman web WordPress.

Di dalam WordPress folder yang kami perlukan untuk membuat dua fail, Fail Vagrant dan install.sh. Ini akan digunakan untuk menubuhkan mesin maya kami. Jeffrey Way telah mencipta dua fail permulaan yang hebat; anda boleh merebut fail Vagrant dan fail install.shnya.

Seterusnya, dengan menggunakan terminal, navigasi ke WordPress direktori dan jenis berani. Ini akan mengambil sedikit masa, kerana kotak perlu dimuat turun dan kemudian dipasang. Dapatkan secawan kopi dan semak siaran ini pada 50 tips WordPress semasa anda menunggu.

Setelah proses selesai, anda sepatutnya dapat pergi 192.168.33.21 dan lihat halaman yang disampaikan dengan betul. Anda folder kandungan harus menjadi folder html dalam direktori WordPress. Anda kini boleh mula menambahkan fail, memasang WordPress atau apa-apa lagi yang anda mahukan.

Jangan lupa membaca panduan Vagrant yang lengkap untuk maklumat lanjut mengenai mewujudkan tuan rumah maya, memetakan domain seperti mytest.dev dan sebagainya.

Membuka Laman Tempatan Di Rangkaian Sama Menggunakan Gulp

Semasa membina laman web, anda perlu memikirkan tentang respons. Skrin kecil boleh ditiru sedikit demi sedikit dengan menyempitkan tetingkap penyemak imbas, tetapi itu bukan pengalaman yang sama, terutama jika anda membuang skrin retina dalam campuran.

Sebaiknya anda ingin membuka tapak web setempat anda pada peranti mudah alih anda. Ini tidak terlalu sukar dilakukan, dengan syarat peranti anda berada pada rangkaian yang sama.

Untuk menyelesaikannya, kami akan menggunakan Gulp dan Browsersync. Gulp adalah alat untuk automasi pembangunan, Browsersync adalah alat yang hebat yang bukan sahaja dapat membuat pelayan setempat tetapi syncronize scrolling, klik, bentuk dan banyak lagi di seluruh peranti.

Memasang Gulp

Memasang Gulp sangat mudah. Pergi ke laman Persiapan untuk arahan. Satu prasyarat ialah NPM (Pengurus Pakej Nod). Cara paling mudah untuk mendapatkannya adalah memasang Node itu sendiri. Kepala di bawah ke Laman Web Node untuk arahan.

Sebaik sahaja anda telah menggunakannya npm install - gulp global perintah untuk memasang gulp di seluruh dunia, anda perlu menambahnya ke projek anda. Cara untuk melakukan ini adalah untuk menjalankan npm install --save-dev gulp dalam folder root projek anda, kemudian tambah gulpfile.js fail di sana.

Pada masa ini mari kita tambah satu baris kod dalam fail itu yang menunjukkan bahawa kita akan menggunakan Gulp sendiri.

var gulp = require ('gulp');

Sekiranya anda berminat dengan semua perkara yang sejuk, Gulp boleh melakukan skrip menggabungkan, menyusun Sass dan kurang, mengoptimumkan imej dan sebagainya, baca Panduan Kami Untuk Gulp. Dalam artikel ini kita akan memberi tumpuan kepada mewujudkan pelayan.

Menggunakan Browsersync

Browsersync mempunyai sambungan Gulp yang boleh dipasang dalam dua langkah. Pertama, mari kita gunakan npm untuk memuat turunnya, kemudian kita tambahkannya ke Gulpfile kami.

Mengeluarkan npm memasang pelayar penyegerakan gulp --save-dev arahan dalam akar projek di terminal; ini akan memuat turun sambungan. Kemudian, buka Gulpfile dan tambahkan baris berikut kepadanya:

var browserSync = memerlukan ('penyemak imbas penyegerakan'). buat ();

Ini membolehkan Gulp tahu bahawa kami akan menggunakan Browsersync. Selanjutnya kita akan menentukan tugas yang mengawal bagaimana Browsersync berfungsi.

gulp.task ('penyegerakan pelayar', fungsi () browserSync.init (proxy: "192.168.33.21"););

Setelah ditambahkan, anda boleh menaip menyelinap penyemak imbas penyegerakan ke terminal untuk memulakan pelayan. Anda harus melihat sesuatu seperti imej di bawah.

Terdapat empat URL berasingan di sana, inilah maksudnya:

• Tempatan: URL setempat adalah di mana anda boleh mencapai pelayan di mesin yang anda gunakan. Dalam kes kami, anda boleh menggunakannya 192.168.33.21 atau anda boleh menggunakan yang disediakan oleh Borwsersync.
• Luar: Ini ialah URL yang boleh anda gunakan pada mana-mana peranti yang disambungkan ke rangkaian untuk sampai ke laman web. Ia akan berfungsi pada mesin tempatan anda, telefon anda, tablet dan sebagainya.
• UI: URL ini menunjukkan pilihan untuk pelayan yang sedang berjalan. Anda boleh melihat sambungan, sediakan pendaratan rangkaian, sejarah paparan atau pilihan penyegerakan.
• UI luaran: Ini sama dengan UI, tetapi boleh diakses dari mana-mana peranti di rangkaian.

Kenapa Gunakan Browsersync?

Kini kami selesai dengan fasa ini anda mungkin berfikir: mengapa menggunakan Browsersync sama sekali? URL 192.168.33.21 juga boleh dicapai dari mana-mana peranti. Walaupun demikian, anda perlu memasang WordPress ke URL ini.

Saya biasanya menggunakan virtualhosts dan mempunyai domain seperti wordpress.local atau myproject.dev. Ini menyelesaikan secara tempatan supaya anda tidak boleh melawat wordpress.local di telefon bimbit anda dan melihat hasil yang sama seperti pada komputer tempatan anda.

Setakat ini begitu baik, kami kini mempunyai tapak ujian yang boleh diakses dari mana-mana peranti di rangkaian. Sekarang tiba masanya untuk pergi global dan menyiarkan kerja kami melalui internet.

Menggunakan kerajaan untuk berkongsi Localhost kami

sarok adalah alat yang boleh anda gunakan untuk membuat terowong selamat ke localhost anda. Jika anda mendaftar (masih bebas), anda akan mendapat terowong dilindungi kata laluan, TCP dan beberapa terowong serentak.

Memasang konkrit

Pergi ke halaman muat turun dan ambil versi yang anda perlukan. Anda boleh menjalankannya dari folder yang ada atau mengalihkannya ke lokasi yang membolehkan anda menjalankannya dari mana-mana sahaja. Pada Mac / Linux anda boleh menjalankan arahan berikut:

sudo mv ngrok / usr / local / bin / ngrok

Jika anda mendapat ralat bahawa lokasi ini tidak wujud, cukup buat folder yang hilang.

Menggunakan ngrok

Syukurlah bahagian ini sangat mudah. Sebaik sahaja anda menjalankan pelayan anda melalui Gulp, lihat pada port yang ia gunakan. Dalam contoh di atas, pelayan tempatan sedang berjalan pada http: // localhost: 3000 yang bermaksud ia menggunakan port 3000. Dalam tab terminal baru, jalankan arahan berikut:

ngrok http 3000

Ini akan mewujudkan terowong yang boleh diakses ke tempat asal anda, hasilnya sepatutnya seperti ini:

URL yang anda lihat di sebelah “Penghantaran” adalah apa yang anda boleh gunakan untuk mengakses laman web anda dari mana-mana sahaja.

Kesimpulannya

Pada penghujung hari, kita kini boleh melakukan tiga perkara:

• Lihat dan bekerjasama dengan projek kami secara tempatan
• Lihat laman web kami melalui sebarang peranti di rangkaian
• Biarkan orang lain melihat kerja kami di mana saja dengan pautan yang mudah

Ini akan membolehkan anda memberi tumpuan kepada pembangunan dan bukannya berlumba untuk memastikan pelayan tempatan dan ujian disegerakkan, memindahkan pangkalan data dan tugas-tugas lain yang membimbangkan.

Sekiranya anda mempunyai kaedah yang berbeza bekerja di dalam negara dan berkongsi hasilnya, beritahu kami!