キッズプログラミング教室ぐらみん

X

自分のパソコンで動かしているサーバーを外からでも見えるようにする

自分のパソコン内で既に動かしているサーバーを外からでも見えるようにする方法を紹介します。

1. なぜこの記事を書いたか

ぐらみんの子供向けオンラインクラスの ぐらみんこーど では Node.js を使ってさまざまなサーバープログラムを作っています。

ただ、せっかく作ったサーバーなのでパソコンだけでなく自分の携帯で見たり、他の方に見せたりしたくなったりします。

そんな時のために無料でカンタンに利用できる方法を紹介します。

2. 使う技術

パソコンの IP アドレスとポートの組み合わせに対して外からアクセスするトンネルを作ることで外から見えるようにします。

3. 使うツール

localtunnel を使います。

このツール自体はオープンソースでできていて誰でも無料で利用できます。

4. さっそく使ってみよう

4-1. まずは自分のサーバーを起動します

まずは自分のサーバーを起動します。どのプログラミング言語で作ったサーバーでも問題ありませんが、HTTP プロトコルで待ち受けているサーバーを起動します。

例えば、Node.js ベースで作った時は下のようなコマンドですね。

node index.js

このサーバーは起動したままにして下さい。

4-2. サーバーのポートを確認します

自分のサーバーのポートが何番になるかを確認しておきましょう。

サーバーを作ったプログラミング言語やフレームワークにより調べ方は様々ですが、例えば Node.js で作る場合は下のように server.listen(port, hostname) の port に入る数字になります。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000; // このポート番号 3000 が server.listen に渡される

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

上のプログラムの場合は 3000 番ですね。

4-3. npm を使えるようにする

Node.js についているパッケージ管理ツールである npm を使えるようにします。

下のコマンドを実行してみましょう。

npm --version

実行した時に 6.14.4 のようなバージョン情報が出ない時はまだ使える状態ではありません。

下のサイトから Node.js をインストールしましょう。これで npm コマンドは使えるようになります。

https://nodejs.org/ja/

4-4. localtunnel を起動します

次に localtunnel を起動します。自分が作ったサーバーがまだ起動していることも確認して下さい。

実行する場所はどこでも大丈夫です。

npx localtunnel --port 3000

実行すると下のような表示が出ます。

npx: 22個のパッケージを3.258秒でインストールしました。
your url is: https://bitter-carpets-live-xxx-xxx-xxx-xxx.loca.lt

xxx の部分は 123.123.123.123 のような IP アドレスの景色です。

この URL にブラウザからアクセスしましょう。携帯からでも他のパソコンからでもアクセスできます。

こんな画面が出るので Click to Continue ボタンをクリックします。

実際のサーバーが見えました。

気をつけること

ユーザー名・パスワード(認証)を使うことはできません。そのため、ちょっとだけ確認する位の時に使うようにしましょう。