Posted at

スマホからMacに立てたgulp-webserverに接続する

More than 3 years have passed since last update.

gulp-webserverはgulpから簡易的なwebserverを立ち上げるgulp-plugin

live reload機能等もあり開発中は大変お世話になっている(詳しくはこちら

開発ではMacを使っていて、Macから確認する分にはいいのだが、やはり実機で確認したい


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>こんにちは、世界</p>
</body>
</html>

(Macからは簡単に確認できる)

同じWi-Fi環境に接続できれば話は早いのだが、僕の環境ではそれは叶わなかったので

Macのインターネット共有機能を使って実現する


Mac側の設定


  1. システム環境設定の共有からインターネット共有をONに



  2. システム環境設定のネットワークからIPアドレスをメモ




  3. gulp-webserverのオプションでhostに'0.0.0.0'を指定


    gulpfile.js

     var gulp = require("gulp");
    
    var webserver = require("gulp-webserver");

    gulp.task('webserver', function() {
    return gulp.src('sample')
    .pipe(webserver({
    host: '0.0.0.0', // gulp-webserverのオプションでhostに'0.0.0.0'を指定
    livereload: true,
    open: true
    }));
    });




あとはいつも通り起動

$ gulp webserver

[11:21:21] Using gulpfile gulpfile.js
[11:21:21] Starting 'webserver'...
[11:21:22] Webserver started at http://0.0.0.0:8000
[11:21:22] Finished 'webserver' after 249 ms


iPhoneから確認


  1. 共有中のインターネットに接続



  2. ブラウザから先ほどメモったIPにアクセス

    (今回ならhttp://169.254.200.8:8000/にアクセス)




    やったぜ!Androidでもなんでも繋げば見れた



    live reloadも効くのですばらしい


所感

終わってみれば設定もやることもめっちゃ簡単だったが、ここまでたどり着くのに相当苦労してしまった

というかそもそもgulp-webserverのページに書いてた


Why can't I reach the server from the network?

Solution: Set 0.0.0.0 as host option.


ただネットワーク周りのことは結局全然理解できてないので勉強しなきゃなーと思う