2023.10.24 Nutanix Meetup Hybrid 23.10 in Osaka で喋った資料

1. ログほいほい
を作って
みた話
Nutanix Japan 合同会社
Sr. SE 近藤 暁
satoru.kondou@nutanix.com
@konchangakita

2. おやくそく
開発シロートによるNutanixを楽しく、映えるなにかを作
ってみた趣味の範囲が多く含まれます
あたたかくお⾒守りください

3. ログほいほい なんで作ったの︖
• ライブ配信@.NEXT on Tour Tokyo をみてください︕
- https://nutanix.connpass.com/event/297164/

4. どうやって作ったの︖
• まずはじめに絵を描く︕
- iPad
• 環境つくる︕
- VS Code、Docker Compose、Python、Flask、Next.js、Elasticsearch
• ググりながらコーディング
- Chat-GPUも駆使

5. やりたいことの絵を描く
• たのしい、けど盛り込みすぎないように

6. 画⾯遷移を考える

8. 開発環境をつくる
Frontend Backend
API
Browser
Json
Format
http
API/
ssh
Data Source
Search Engine
syslog server
syslog

9. フロントエンドはたのしい
• 使ったフレームワーク︓
• デザイン⽤には Tailwind + Daisy UI
• やったことがすぐ⽬に⾒えるので、やりがいがある
• 時間泥棒
• 製品のGUIにやさしくなれる
• ただし

11. できあがりはこんな感じ

13. バックエンドは素直
• バックエンドとNutanix 間は、REST APIかSSH
- https://www.nutanix.dev/
• フロントエンドとバックエンド 間
- Flaskを採⽤、軽量で簡単
- Pythonのコード内にデコレータ（@app.route〜〜）をつけて、returnするだけ
# GET PC List
@app.route("/api/pclist", methods=["GET"])
def pclist():
cluster_list = {}
return make_response(jsonify(cluster_list))

14. バックエンドは Flaskで APIゲートウェイ的に
• リクエスト︓
- http://localhost:7776/api/pclist
- メソッド GET
{
"cluster_list": {
"172.16.10.125": [
{
"hypervisor": "AHV",
"name": "OsakaG7",
"pc_ip": "172.16.10.125",
"prism_ip": "172.16.10.123",
"timestamp": "2023-04-01T06:35:36.118008"
}
],
"172.16.10.24": [
{
"hypervisor": "VMWARE",
"name": "OsakaG5hb",
"pc_ip": "172.16.10.24",
"prism_ip": "172.16.10.83",
"timestamp": "2023-04-01T06:36:41.000809"
},
{
"hypervisor": "AHV",
"name": "OsakaG6af",
"pc_ip": "172.16.10.24",
• レスポンス︓ json

15. Next.js バージョンアップ 12 → 13
• ブログを書き始めたころに
• Next.js 13がリリースされる
• どうせやるなら最新やろ
• Pages Router から App Router

16. Next.js バージョンアップ
• ブログを書き始めたころに
• Next.js 13がリリースされる
• どうせやるなら最新やろ
べつもんやん

18. 続きはWebで
https://konchangakita.hatenablog.com/

19. DEMO

20. 今後は
• syslog 設定をGUI化
• ssh key設定もGUI化してみる︖
• Nutanixクラスタを使っている⼈が誰でもサクッと使えるように︕