LoginSignup
14

More than 5 years have passed since last update.

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

Posted at

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からは簡単に確認できる)
Macから

同じWi-Fi環境に接続できれば話は早いのだが、僕の環境ではそれは叶わなかったので
Macのインターネット共有機能を使って実現する

Mac側の設定

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

  2. システム環境設定のネットワークからIPアドレスをメモ
    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でもなんでも繋げば見れた:sushi:
    live reloadも効くのですばらしい

所感

終わってみれば設定もやることもめっちゃ簡単だったが、ここまでたどり着くのに相当苦労してしまった
というかそもそもgulp-webserverのページに書いてた

Why can't I reach the server from the network?
Solution: Set 0.0.0.0 as host option.

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14