ラズパイに立てたWebサービスを公開する方法(３つ)

方法1) ルータでポートを開放する方法

どんな場合？

ルーターのWAN側にGlobalアドレスがつくサービスの場合は
ルーターの設定でラズパイのポートをGlobal側に開放すれば
ラズパイに外からアクセスできるようになります。

設定手順

1. ルーターのIPアドレスを調べる

LAN側の xxx.xxx.xxx.1 であることが多いようです。
192.168.0.1とか。
I-O Dataだと MagicalFinder というスマホアプリがあって、これで見つけることもできます。
Windows/Macだと こんな 方法があります。

2. ポート開放の設定を行う

ルーターの設定画面から「ポートの開放」を選んで、以下の設定をすればOK
この例はI-O DATAのWN-CS300FRです。I-O DATAのルータだったら大体どれも同じような設定画面のはず
NECのAtermも同様の設定項目が「ポートマッピング」という名前であるようです

• 設定名 = 適当につける
• 公開する機器のIPアドレス = ラズパイのIPアドレスを入力する
• プロトコル = HTTPなのでTCPを選ぶ
• LAN側ポート番号 = ラズパイのサービスのポート番号。HTTPの場合は80番
• インターネット側ポート番号 = 適当な番号を付けます。80番でもいいのだけれど、とりあえず10080番にしておきました。

3. WAN側につくアドレスが変動する場合

ルーターのWAN側につくIPアドレスが変動する場合は、DDNSサービスを利用します。
I-O Dataの場合は、iobb.netというダイナミックDNSサービスが提供されており、無料で利用できます。

まだサービスへの登録を行っていない場合は https://ioportal.iodata.jp から登録を行います。

製品を登録すると、iobb.netに対応している場合には「変更・サービス申し込み」というボタンが出ます。

利用状況にチェックがついてればサービス利用中です

方法2) SSH port forward を利用する方法

どんな場合？

ルーターのWAN側につくIPアドレスが、プライベートIPアドレスの場合は、
ルーターでポート開放しても、そもそも外からルーターにたどり着けません。
しかし、GlobalアドレスがついているVPSを持っていれば、それを利用して、ポート開放ができます。

設定手順

1. VPSのパケットフィルタ設定で利用するポートをあける

さくらVPSはグローバルアドレスがついてくれます。
(160.16.xxx.xxxがグローバルアドレス)
パケットフィルタの設定でポートをあけます。今回は 8889 番をあけています。

2. SSH port forward でポートを転送する

$ ssh user名:160.16.xxx.xxx -R 8889:192.168.0.6:80 -f -N

で、ラズパイ(192.168.0.6)の80番ポートをさくらVPS(160.16.xxx.xxx)の8889番ポートに転送します。
そとから
http://160.16.xxx.xxx:8889/
にアクセスすると、さくらVPSのSSHとラズパイのSSHが協力して、通信をラズパイの80番ポートに転送してくれます。
便利！

ネットワークの概略は以下の通り

方法3) ポート公開サービスを利用する方法

どんな場合？

いやいやVPSなんて持っていないよ、という場合でも、ポート公開サービスがあります。
色々あるようですが、ngrokというサービスが便利なので利用します。

【公式】ngrok
https://ngrok.com/

設定手順

1. インストールする

$ npm install ngrok -g

2. サインアップする

サインアップしなくても使えるんですが、8時間という時間制限がかかってしまいます。
サインアップ(無料)をすると、この時間制限がなくなります。

https://dashboard.ngrok.com/signup
から入ってサインアップ。
もし、Githubを利用しているならば、Sign up with Githubが便利。

サインアップすると、トークンの登録コマンドラインが表示されます。親切設計。

3. トークンを登録する

サインアップしたときに表示されたコマンドラインをラズパイ上で実行するだけです。

$ node_modules/ngrok/bin/ngrok authtoken <<トークン>>
Authtoken saved to configuration file: /home/pi/.ngrok2/ngrok.yml

4. ngrokを起動する

$ node_modules/ngrok/bin/ngrok http 80
----------------------------------------
ngrok by @inconshreveable                                       (Ctrl+C to quit)

Session Status                online
Account                       ★ユーザ名がここに表示されます★ (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxxxxxxx.ngrok.io -> http://localhost:8
Forwarding                    https://xxxxxxxxxxxx.ngrok.io -> http://localhost:

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
----------------------------------------

これで完了。
起動のたびに xxxxxxxxxxxx の部分にランダムな文字列がはいり、そのURLでアクセスできます。
httpsのURLも作ってくれるのがすごくありがたい... 神サービスです。

以上です。