haku-maiのブログ

インフラエンジニアですが、アプリも作ります。

【自分用】作成物のまとめ(2022/4/12更新)

本記事で行うこと

  • いままで趣味で作成したものを振り返る
  • あくまでも仕事で作成したものは含まない
  • 自分の記録用

モチベーション

  • 今まで趣味でなにを作ったのかをまとめて見たくなったため。
  • 後で見返して、今後の設計に活かすため。

サマリ

ページ内リンク 技術スタック git
自宅kubernetes環境 (rancher/rke2) kubernetes, rancher, rke2, dnsmasq, nginx ingress controller, istio, Longhorn, prometheus, ansible ※非公開repo
https://github.com/n-guitar/private-server-ansible
https://github.com/n-guitar/private-cluster
資産設計シミュレーションWebアプリ Python3, Django3, sqlite, Bootstrap, chartjs2 ※非公開repo
https://github.com/n-guitar/personal_finance
Slack Botで家電操作 Python3, slackbot ※非公開repo
https://github.com/n-guitar/family-bot
家電操作Webアプリ(Flask Nature Remo) Python3, Flask, javascript https://github.com/n-guitar/flask-natuer-remo
Slackもどき (Websocket勉強用) Python3, Django3, Websocket https://github.com/n-guitar/django-webchat/tree/webchat-chat-room-design
家電操作Webアプリ v2 (Vue Nature Remo) vue.js2,vuex3, vuetify2 https://github.com/n-guitar/vue-natuer-remo
家電操作モバイル向けWebアプリ v3 (Vue Nature Remo PWA) vue.js2,vuex3, vuetify2, PWA ※非公開repo
https://github.com/n-guitar/vue-natuer-remo-pwa
ファイルアップローダー (fiber-file-uploader) vue.js2, golang, fiber https://github.com/n-guitar/fiber-file-uploader
Web時計 ランダム英語表示 (english-web-clock) vue.js2, nuxt.js2, Bootstrap4, v-calendar, dayjs ※非公開repo
https://github.com/n-guitar/english-web-clock
container buildツール (build-ops-container) Frontend: vue.js2, nuxt.js2, vuetify
Backend: golang, fiber, sqlite, gorm, img
※非公開repo
https://github.com/n-guitar/build-ops-container-ui
https://github.com/n-guitar/build-ops-container
資産設計シミュレーションWebアプリ (vue.js版, 追加開発中) Frontend: vue2, nuxt.js2, vuetify, apexcharts
Backend: python3, fastapi, pydantic, sqlalchemy
※非公開repo
https://github.com/n-guitar/private_fp_ui
https://github.com/n-guitar/private_fp_api
Web Terminal (プロトタイプ作成, 追加開発中) Frontend: vue.js2, xterm.js
Backend: python3, fastapi, websocket, paramiko
※vue3, typescriptで本格開発予定
※非公開repo

作成物

自宅kubernetes環境 (rancher/rke2)

  • 構成イメージ
    f:id:n-guitar:20220412002853p:plain:w800

  • 利用ステータス
    アプリ実行環境として運用中

  • 技術スタック
    kubernetes, rancher, rke2, dnsmasq, nginx ingress controller, istio, Longhorn, prometheus, ansible

  • 機能・こだわり
    code-serverやjupiter notebookを使うことデプロイしておくことで、低スペックのchromebookからもお風呂で開発できるようになった。
    private registryの許可設定をして、自作containerをpull/runできるようにしている。
    wildcard dns、nginx ingress controllerを利用し、自己証明をPC/iPhoneにインストールすることでurlベースアクセス&tls/sslを実現
    マシンスペック節約のため、軽量なkubernetesディストーションのrke2を採用。
    rancher自体はdockerを利用しているが、rke2ではdockerは利用していない。

  • モチベーション・感想
    Cloudでも良かったのだが、なんとなくお金を払うのが嫌で自宅で基盤を用意することにした。
    実は停電や予期せぬ障害で何度か作成し直していて、最終的に今の軽量なRKE2に落ち着いた。
    自作アプリをすぐに家庭内に展開できるのでそれなりに満足している。
    普通に仕事と同じく、家庭の基盤も障害復旧やメンテナンス、定期バックアップなどの運用している。
    ちなみにUPSを購入し、停電は怖くなくなった。

資産設計シミュレーションWebアプリ

  • 画面イメージ f:id:n-guitar:20220411224201p:plain:w800

  • 利用ステータス
    稼働停止
    後にvue.jsで再作成したため。

  • 機能・こだわり
    プラス資産・マイナス資産と資産推移をグラフで表現し、視覚的にマイナスになってしまうところがすぐに分かるようにしたところ
    chartjsで表示できるように、配列の0埋め、プラス資産の繰越計算結果の配列の作成
    シンプルにするために1テーブルで実現

  • 技術スタック
    Python3, Django3, sqlite, Bootstrap, chartjs2

  • モチベーション・感想
    自分の家庭の資産設計シミュレーションを行いたかったため作成した。
    おそらくこれがDjangoで作成した後にちゃんと使ってた最初のWebアプリケーションだと思う。
    確か会社の(STEP休暇)長期休暇中に

Slack Botで家電操作

  • 画面イメージ
    f:id:n-guitar:20220411230115p:plain:w400

  • 利用ステータス
    稼働停止
    正直あまり使わなかったため。

  • 機能・こだわり
    NatureRemoのApiを、Slack bot経由で実行する。
    正規表現で曖昧な言葉でも反応してくれる。

  • 技術スタック
    Python3, slackbot
    https://github.com/scrapinghub/slackbot

  • モチベーション・感想
    リモートの打ち合わせ中に声を出さずにエアコンや照明をコントロールしたかった。
    かなり簡単に実装できるため、別用の用途でまた使って見るかもしれない。

家電操作Webアプリ(Flask Nature Remo)

  • 画面イメージ

f:id:n-guitar:20220411231618g:plain:w800

  • 利用ステータス
    稼働停止
    後にvue.jsで再作成したため。

  • 技術スタック
    Python3, Flask, javascript

  • 機能・こだわり
    NatureRemoのApiを、Webアプリ経由で実行する。
    Top画面をアップロードして変更できる
    css,Javascript部分はフレームワークを使わず一からすべて書いた。

  • モチベーション・感想
    タブの切り替え部分は苦労したのを覚えているが、こうやって実現しているんだというのがわかった気がする。
    iPadからでも反応するように、window.ontouchstart ? 'touchstart' : 'click';を記載しないと行けないのかということに初めて気がついた。
    CSSを全部書くのはかなり大変だった記憶。

Slackもどき (Websocket勉強用)

  • 画面のイメージ
    f:id:n-guitar:20220411233557p:plain:w800

  • 利用ステータス
    稼働停止
    勉強用のため。

  • 技術スタック
    Python3, Django3, Websocket

  • 機能・こだわり
    任意のチャンネルにメッセージをブロードキャストする。
    django channelsを使わずに実装。

  • モチベーション・感想
    作成当時、djangoがまだ非同期(ASGI)に対応したばかりで、実装例が英語圏のサイトでもほとんどなかったと思う。
    ASGIってそもそも何?からWebsocket仕様まで詳しくなったきっかけだと思う。

家電操作Webアプリ v2 (Vue Nature Remo)

  • 画面のイメージ
    f:id:n-guitar:20220411234959g:plain:w800

  • 利用ステータス
    PWA版と併用して利用中

  • 技術スタック
    vue.js2,vuex3, vuetify2

  • 機能・こだわり
    基本的にはFlask版と同じ機能
    Tokenを起動時ではなく、起動後に画面から設定する方式(LocalStorage or Vuex.Storeに保存)に変更

  • モチベーション・感想
    Flask版では起動時に環境変数として、Tokenの設定が必要であったが画面から設定できるようにしてみた。
    BrowserのCookie、LocalStorageの仕組みについて学んだと思う。
    LocalStorage保存モードはセキュアではないが、家庭内だけ利用ということでOKとし、最低限画面上から削除も同時にできるようにした。
    コンポーネントから設定したTokenを親やその他のコンポーネントから利用する作りであり、createdイベントのときにLocalStorageやstoreからいちいち取得してくる仕様になっている。親で取得して、propsで渡せばよかったと正直思っており作りが微妙・・・。
    この反省は、PWA版の設計に取り入れることとした。

家電操作モバイル向けWebアプリ v3 (Vue Nature Remo PWA)

  • 画面のイメージ

f:id:n-guitar:20220412000401g:plain:w600

  • 利用ステータス
    Web版と併用して利用中

  • 技術スタック
    vue.js2,vuex3, vuetify2, PWA

  • 機能・こだわり
    PWA(Progressive Web Apps)の技術を使い、嫁さんにアプリインストールさせることなく家電操作機能を提供。
    機能はWeb版とほぼ同じだが、一括で照明を消す機能を追加。

  • モチベーション・感想
    アプリインストールなく嫁さんにアプリ機能を提供したかった。
    今でも利用してくれて嬉しい。
    ほぼすべてのアプリは自宅のkubernetes上で稼働しているのだが、kubernetesが障害中でもPWAとして機能していてPWAすげーと思った。
    PWAの実装例が当時あまりなくて、service-workerって何やねんって思ってた。

※ここまで記載

ファイルアップローダー (fiber-file-uploader)

  • 画面のイメージ
    f:id:n-guitar:20220412094000g:plain:w600

  • 利用ステータス
    利用中。

  • 技術スタック
    vuejs2, golang, fiber
    https://github.com/gofiber/fiber

  • 機能・こだわり
    特定のディレクトリに、複数のファイルを同時にアップロードする。

  • モチベーション・感想
    自宅サーバに手元のMacからファイルの移動を行いたかったため。
    golangのfiberのwebフレームワークを使ってみたかったため。
    FlontendからFormで複数同時にfiber側で受け取り方法を模索した気がする。
    fiberがかなり使いやすかったので、後にBackendとしてたまに使うことになる。
    Front画面はvue.js2だがあえて、CDNから持ってきてindex.htmlのみのファイルとした。

Web時計 ランダム英語表示 (english-web-clock)

  • 画面のイメージ
    f:id:n-guitar:20220412095105p:plain:w600

  • 利用ステータス
    利用中。

  • 技術スタック
    vue.js2, nuxt.js2, Bootstrap4, v-calendar, dayjs

  • 機能・こだわり
    時計を表示。
    一定間隔ごとに表示する英文を更新。

  • モチベーション・感想
    nuxt.jsを使ってみたかった。
    手元のタブレットで時間を表示したかった。
    英語を常に見る習慣をつけて置きたかった。
    nuxt.jsはrouterとか設定する必要がなくて便利だなーと思った。
    このとき初めてプラグインやモジュールをどうやってnuxt.jsに追加するかを調べた気がする。

container buildツール (build-ops-container)

  • 画面のイメージ
    f:id:n-guitar:20220412100219p:plain:w600

  • 利用ステータス
    停止中。
    そんなに利用頻度が高くなく、ほぼ使っていないので停止中とした。

  • 技術スタック
    Frontend: vue.js2, nuxt.js2, vuetify
    Backend: golang, fiber, sqlite, gorm, img

  • 機能・こだわり
    FrontendからBackendのAPIを実行し、DBの登録、gitコマンド、imgコマンドを実行する。
    container内部から実行することを想定し、containerないからgit clone&container build&container registry登録を行う。

  • モチベーション・感想
    手元がM1 Mackubernetes環境がIntel環境だったため、M1 Macでbuildしたcontainerイメージをpushしてしまうと、kubernetes上で動作しないため、じゃぁWeb画面でポチッと押すだけでregistryへの登録までやろうというのが発端。
    Racnher付属の機能でbuild機能があるのだが、rancher.yamlなるものをgithubに登録したくなかったので作成。
    Jenkins等使おうと思ったが、使う機能は限られているので、作って見ようと思った。
    alpine linux containerからprivate registryにpushするまでそこそこハマった気がする。
    imgを使った理由はdockerをalpineかにdocker in dockerみたいな感じでインストールしたくなかった。
    golang経由でdbを更新するのを久しぶりに行った気がする。
    gormを使うことで、起動時にtableを作成してくれるのは便利だなーと思った記憶がある。

資産設計シミュレーションWebアプリ (vue.js版, 追加開発中)

  • 画面のイメージ

f:id:n-guitar:20220412103620p:plain:w600

f:id:n-guitar:20220412102953p:plain:w600

  • 利用ステータス
    利用中。
    追加開発中。

  • 技術スタック
    Frontend: vue2, nuxt.js2, vuetify, apexcharts
    Backend: python3, fastapi, pydantic, sqlalchemy

  • 機能・こだわり
    基本機能はDjango版と同じ。
    グラフ上のクリックイベントを拾って右側に詳細を表示する。

  • モチベーション・感想
    fastapiの公式チュートリアルをAdvancedも含めて一度全部やってみたのだが、かなり使いやすくメインのBackendではfastapiにしようとなり、とりあえず開発してみようと思ったのがきっかけ。
    Djangoよりかっこよくしたかったのだけれども、あまりかっこよくならなくてUIの難しさも知った気がする。(デザイナーってすごい)
    chartjs→apexchartsに変更している。これはchartjsがnuxt.jsでうまく動作しなかったからに起因する。
    gitのissue上で、対応が間に合っていないのを知り、OSSの資金面・開発斜面での難しさを思い知った。
    jsの世界で貢献できる余裕がなく・・・申し訳ない気持ちになった。

Web Terminal (プロトタイプ作成, 追加開発中)

  • 画面のイメージ

f:id:n-guitar:20220412105449p:plain:w600

  • 利用ステータス
    開発中。

  • 技術スタック
    Frontend: vue.js2, xterm.js
    Backend: python3, fastapi, websocket, paramiko
    このタイミングでvue3, typescriptに置き換えを検討中。

  • 機能・こだわり
    web browserでserverにssh接続し、対話型で操作する。

  • モチベーション・感想
    Frontend(websocket) → Backend(websocket) → ssh → serverで処理する部分が結構ハマった。
    そうしても、sshの部分でsocket通信の部分でblockingしてしまい、コマンド結果を正しく画面に返せなかった。
    このblocking部分をどうやって突破するか一週間位かかったと思う。
    最終的に、threading + asyncioで突破することができたけど、ここまで来るのが長かった。
    実はtornadoで実装している例はgithub上に行く使ったが、絶対に使わずいこうと決めていた。
    実はこれを開発するために、websocketを学んでいた部分はある。
    メイン機能の実装ができたので、今後このアプリをメインに開発していく。

その他画面なし

JOB実行ツール

任意のコマンドをWeb上からリモートで実行するツール。
Python, Django, paramikoで実装。
kubernetesのcronjobで十分だったため、ボツ

読み方登録

用語の読み方、意味を登録・投票するwebアプリケーション
Python, Django,実装。
vueかreactで作り直すかもしれない。

感想

  • 2022/4/12時点の感想
    golang, python, javascript, java, Django, flask, fastapi, SpringBoot, Fiber, vue.js, react.js, nuxt.jsあたりを主に個人開発で使ってきたが、現時点ではnuxt.js + fastapiが最も早く開発ができそう。
    react.jsはhooksが出てきてから開発しやすくなったが、基本的に複雑な処理はBackendに寄せる方針なので、JSX記法の恩恵をあまり受けないなぁという印象のためvue.jsをメインとした。
    現時点の仕事では、インフラディレクション業務やSRE的な業務、マネジメント系が多いので、FrontendもBackendも書くことがほぼ0ではあるが、結果的に仕事にも活用できている。
    単純に自分や家庭で使うものを開発して、それを活用もしているのでテクノロジーで便利になっているのを実感できてとても楽しい。