Help us understand the problem. What is going on with this article?

LANに繋がれたRaspberry Piをインターネットから使う。

More than 1 year has passed since last update.

自宅などのLANに設置されたRaspberry piをスマホやPCから利用できるようにします。

image.png
外部からLAN内のRaspberry piを制御するのにnorgkを使用します。
ngrokは、NATおよびファイアウォールの背後にあるローカルサーバーをパブリックインターネットに公開します
image.png
Linux Arm用をダウンロードして
unzip ngrok-stable-linux-amd64.zip
を行います。
解凍されたファイルを/usr/binにコピーします。
sudo cp ngrok /usr/bin/

ngrok http http://192.168.1.13:5555
ngrok by @inconshreveable                                       (Ctrl+C to quit)

Session Status                online                                            
Session Expires               7 hours, 59 minutes                               
Version                       2.3.35                                            
Region                        United States (us)                                
Web Interface                 http://127.0.0.1:4040                             
Forwarding                    http://d99bc688.ngrok.io -> http://192.168.1.13:5555
Forwarding                    https://d99bc688.ngrok.io -> http://192.168.1.13:5555

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

https://d99bc688.ngrok.ioをアクセスすると

image.png

テストプログラム

index1.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>{{title}}</title>
    <style>
        .bx {
            width: 137px;
            height: 70px;
            font-size: small;
            margin: 2px !important;
        }
    </style>
    <script>
    $(function(){
        $('.bx').click(function(){
            $.ajax({
              url: '/click/'+$(this).attr('id'),
              success: function(html){
              }
            });
        });
    });
    </script>
</head>
<body>
    <div class="mt-2 container body-content">
        <div class="jumbotron">
            <h1>{{title}}</h1>
            <p class="lead">ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels</p>
        </div>
        % c='primary,secondary,success,danger,warning,info,light,dark,link'.split(',')
        % for i,x in enumerate(c):
        <button class='bx btn btn-{{x}}' id='btn{{i}}'>
            <h3>B{{i}}</h3>   </button>
        % end
    </div>
</body>
</html>
web.py
from bottle import *
import os,sys
TEMPLATE_PATH.insert(0, '.') #テンプレート(view)のディレクトリのキャンセル
@route('/')
@view('index1')
def home():
    return dict(title='hello ngrok')
# favicon.icoの要求
@route('/favicon.ico')
def favicon():
    return static_file("/favicon.ico", root=".")
#クリックしたとき
@route('/click/<id>')
def click(id):
    print(id)
    return "200 ok"
#上記以外のURLを叩いた場合
@route('/<action>')
def action(action):
    print(action)
    return "<h1>%s</h1>"%action
run(server='wsgiref', host='0.0.0.0', port=5555)

非常に簡単にraspberry piをインターネットに公開できます。

hiratarich
生涯プログラマ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away