Cloudflare を使って愛犬を監視する

https://shima-tech-hub.connpass.com/event/314854/

Transcript

1. Cloudflare を使って愛犬を監 視する 高江洲 順八(@EightTakaesu)
2. 名前：高江洲　順八（たかえす じゅんや） 2021-06-01 ~ シーエー・アドバンス入社・在籍 得意技術：PHP, MySQL, AWS, などなど浅く広く 趣味：コーヒー、旅行 休日の過ごし方：技術の勉強、映画鑑賞 一言：最近 アマプラで Fallout 観てます
3. 愛犬 0.5 歳
4. 悪さしてるのか、 生きているのか、 いろいろ気になる
5. なので、ペットカメラをインストー ルして、職場からも見れるように してみました！
6. どんなLT？ • 愛犬を仕事中も見守りたいので、監視したく、色々使ってペットカメラをインストールしたの で、どんな技術を使ったかご紹介 • 出てくる技術 ◦ Cloudflare, Raspberry Pi, Nginx Unit などなど • ホントは Qiita か Zenn の記事にして、それも共有したかったですが、間に合わず ◦ 後日気が向けば記事にしようかなと思います！😇 • 日曜プログラマの方の参考になれば幸いです！(ぶっちゃけプログラミングしてない！ ）
7. ペットカメラ？ • パナソニック、TP-LINK、Anker などなどいろいろなメーカーが出している • 値段はピンキリ 5,000 ~ 30,000 くらい？
8. • Raspberry Pi 3 と Raspberry Pi カメラモジュール v1.3 で構成 • 中古ラズパイ買ったときに、サービスでついてきたカメラ • 合計 5000 円 カメラ？
9. • カメラがあるなら、映像はどうやって取る？ • プログラミング？　→　きつい・・・ • なにか OSS とかないだろうか？ • あった 映像どうやって撮る？
10. • Motion という OSS をインストール(GPL-2.0) • apt コマンドなどで インストールしてすぐ つかえる • mjpg-streamer というの もあり、ただ古すぎる＆ 事例少ない Motion Motion-Project/motion: Motion, a software motion detector. Home page: https://motion-project.github.io/ https://github.com/Motion-Project/motion
11. • sudo apt-get install motion 　でインストール、systemd のデーモンとして扱える systemctl なんちゃらのような。 • 設定ファイルは、/etc/motion/motion.conf Motionの簡単な紹介
12. • 例えば、 framerate を15 にしてそう • 以下のドキュメント見れば、 おそらくすべての項目の 説明が書いてあって親切 Motionの設定ファイルはシンプル ドキュメント https://motion-project.github.io/motion_config.html
13. ところでどうやって映像を見る？ • ネットでググると Motion インストールしたらすぐにストリーミング映像が見れるサーバー が起動するっぽかった • 8081 で motion が Listen してた(8080 は motion を制御するインターフェース) Streaming Video with Motion - Raspberry Valley (raspberry-valley.azurewebsites.net) https://raspberry-valley.azurewebsites.net/Streaming-Video-with-Motion/
14. ところでどうやって映像を見る？ • raspberry pi に 割り当てられた プライベートIPに ブラウザからアクセス して開けた！ • けど天地逆！ 192.168.1.2:8081
15. Motion を設定してみる • 天地を逆にしたり、 • フレームレート設定したり、 • 動き検知時に録画を実行し、その録画映像の保存先を指定したり、 • etc….
16. Motionの設定ファイルはシンプル • いろいろ設定値を書き換えては再起動を繰り返し、以下のようになった # systemctl を使うために必要 daemon off # 録画した動画の保存先 (動きを認識したときだけ動画が保存される ) target_dir /mnt/pet_camera_vidoes # ファイル名(拡張子抜き) movie_filename %Y-%m-%d_%H-%M-%S_motion # mp4 で保存 movie_codec mp4 videodevice /dev/video0 norm 0 # フォーマット 8 = mjpg ということ v4l2_palette 8 width 640 height 480 framerate 30 # localhost 以外からでも stream にアクセスできるようにする stream_localhost off stream_maxrate 30 stream_quality 50 # 上下反転 flip_axis v
19. 自宅内で見れるペットカメラはで きた！ けど家の外から見たい・・・
20. 自宅の外からはアク セスできない！
21. • 自宅のようなプライベートな ネットワークを Cloudflare のインフラとつなぐトンネル • 要するに、自宅の外から、 自宅の端末にアクセスできる！ Cloudflare Tunnel Cloudflare Tunnel · Cloudflare Zero Trust docs https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/
22. Cloudflare Tunnel のための cloudflared を常駐 ドメインを Cloudflare に紐づける。 Cloudflare上でトンネルを作成する。 踏み台
23. hoge.example.com に対応するサービ スにリクエストが送られる hoge.example.com にアクセスすると ・・ 踏み台
24. • ドメインのネームサーバーを Cloudflare のものに変更 • Tunnel を Cloudflare のダッシュボードで作成 ◦ ドメインと、自宅の踏み台で起動しているプロセスのポート番号を対応付ける ◦ 例: www.example.com → localhost:80 ◦ 例: ssh.example.com → localhost:22 • 詳細は公式のドキュメントご参照ください。Cloudflare Tunnel を使って自宅をデータセンターみたいにする (zenn.dev)　 という記事も Zenn に載せてるので良ければどうぞ！ Cloudflare Tunnel の設定方法
25. ここには、Webサーバーは無い！ www.example.com 踏み台 何かしらのサービスはこ こで起動している。
26. • Nginx Unit を使って、リクエストをリバースプロキシする • 通常の Nginx のようにプロキシサーバー、Webサーバーとして使える • Nginx と比較して特徴的な違いは ◦ Rest API を通じてオンラインで設定変更ができる ◦ 設定の記述は JSON で書ける • 業務でも少し使い始めた Nginx Unit
27. Nginx Unit がプロキシ vid.example.com 踏み台 Motion まで到達でき る
28. Nginx Unit 経由で見れた！が・・・ • vid.example.com で 会社からも見れた！ • やばい！自宅が世界中に 公開されてしまってる！ https://vid.example.com
29. • Cloudflare の機能で、セルフホストしているアプリケーションへのアクセスを制限すること ができる。 • Cloudflare のダッシュボードで、Cloudflare のメンバーを許可リストに追加する要領で アクセスを許可する Access policies を設定
30. Access policies を設定
31. 再度アクセスすると
32. コードを入力
33. Motion のサイトにアクセスできた！ https://vid.example.com
34. Nginx Unit がプロキシ vid.example.com 踏み台 Motion まで到達でき る 所定のメアド所有者でないとアクセスが できない状態が作れた！
35. まとめ - いつでも愛犬監視できて安心！Cloudflare 様ありがとうございます！ - 首振り機能とかほしい・・・ - 業務以外では普段と違う技術使うと楽しい！ - cloudflare とか nginx unit はインフラを作るときに便利に使えそうなので、今後も チェックしていきたい！
36. ご清聴ありがとうございました