自宅などのLANに設置されたRaspberry piをスマホやPCから利用できるようにします。
外部からLAN内のRaspberry piを制御するのにnorgkを使用します。
ngrokは、NATおよびファイアウォールの背後にあるローカルサーバーをパブリックインターネットに公開します
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
テストプログラム
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)