ZawaWorks’s diary

プログラミング技術メモ

Node.jsでサーバーを立ててngrokで外部公開

Node.js JavaScript

はじめに

Node.jsでサーバーを立てて、htmlファイルを読み込むとき、ローカルホストではなく外部からURLを開くと自分のPCのIPアドレスがバレバレになってしまいます。今回は、それを防ぐために、ngrokというサービスを使った話をします。

Node.jsでサーバを立てる

同じフォルダー内にserver.jsとindex.htmlを作ります。

sever.js

var http = require('http'),
    port = 3000,//ポート番号
    ipadress = 'localhost',//IPアドレス
    fs = require('fs');


var server = http.createServer();

server.on('request', function (req, res) {
    fs.readFile(__dirname + '/index.html', 'utf-8', function (err, data) {
        if (err) {
            res.writeHead(404, { 'Content-Type': 'text/plain' });
            res.write("not found!");
            return res.end();
        }
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.write(data);
        res.end();
    });
});

server.listen(port, ipadress);
console.log("server listening ...");

index.html

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    Hello,world!
</body>

</html>

そうしたらコマンドラインを開いて、そのフォルダー内でnode serverとコマンドを打ちます。 そして、ブラウザでhttp://localhost:3000/を開いてください。下の画像のようになったら成功です。 f:id:ZawaWorks:20171225225338p:plain

ngrokで外部に公開

ngrokをインストールするとngrokコマンドが使えるようになります（ngrokのインストール方法）。 Node.jsでサーバを立てたら、以下のコマンドを打ってください。

ngrok http 3000

ここでの3000はserver.jsで指定したポート番号です。 そうすると以下のような結果が返ってきます。 f:id:ZawaWorks:20171225230017p:plain 上の画像の赤線を引いたURLをブラウザで開いてください。 f:id:ZawaWorks:20171225230156p:plain そうするとローカル環境のサイトであるindex.htmlが外部で公開できていることが分かります。