konchangakita

KPSを一番楽しんでいたブログ 会社の看板を背負いません 転載はご自由にどうぞ

【Nutanix ログほいほい】Nutanix 各ページへの入口ページと各ページのデザインを決める

この記事は Nutanix Advent Calendar 2023 の12月2日分として執筆しました。ここまで仕事の合間に時間をかけながらちょこちょこと作ってきた「ログほいほい」ブログ以外にも今までに Nutanix Meetup でも、ログほいほいについてお話してきました アカウント…

【Nutanix ログほいほい】Nutanixクラスタ登録ページを作る

足回りが揃ってきたので、実際にWebページを作っていきます まずは入口となる「クラスタ登録」と「クラスタを選択」して次のページに進む TOPのページです手書きの設計図より 今回の完成ソースはコチラです 画面遷移の設計 登録されたPCの表示 Prism Central…

【Nutanix ログほいほい】バックエンド(Elasticsearchも)のベースコンテナ作る

フロントエンドはJava Scriptフレームワークの Next.jsをベースに作りました バックエンド側は FlaskをAPIゲートウェイ的にたてて、Pythonでデータのやりとりの中心として作っていきます 開発環境全体像 Githubリポジトリ GitHub - konchangakita/blog-logho…

【Nutanix ログほいほい】フロントエンドのベースコンテナ作る

今回から Github でコードを公開していきます Githubリポジトリ このブログ用リポジトリはここに公開していきます https://github.com/konchangakita/blog-loghoi.git開発用サーバで、git cloneすると良いです % git clone https://github.com/konchangakita…

【Nutanix ログほいほい】開発環境の整備(VScodeとDocker)

今回は、開発用のリモートサーバをセットアップして、ローカルPCからどうやって開発やってくかの基礎部分を整備していきます インストール・設定するもの ローカルPCの開発環境 OS: MAC/Windows エディタ:VScode REST APテスト用:Postman リモートサーバ…

【Nutanix ログほいほい】の画面設計、開発計画する

まずは完成予想図を描いていきます 開発素人なので、分かりやすいところから攻めます 全体のイメージと画面遷移を考える ざっくり5つの画面から構成することにします 1.クラスタ選択・登録 2.各種設定と各機能へ入り口 3-1.リアルタイムログビューワ…

【Nutanix ログほいほい】を作る

しばらくブログの更新止まっていましたが、今年も開発チャレンジの季節がやってきました こんどは何をつくる? Nutanix で検証・構築・運用してみてこんなことに遭遇したことないでしょうか? Nutanix の何か挙動がおかしい・アラートが出てるけど、ログ取得…

NKE で Kubeflow してみる

こちらの記事は、Nutanix Advent Calendar 2022 3日目の記事です NKEに再入門中ですので、なんか作ってみようと、MLOps入門として、KubeflowをとりあえずNKE上に構築してみようと思います Kubeflowまだ何よくわかってないですがKubeflowとは Kubeflowは、Kub…

NKE(旧Nutanix Karbon)のアップデートでハマった話

こちらの記事は、Nutanix Advent Calendar 2022 2日目の記事ですちょっと昔に Nutanix Karbon で Kubernetes入門していました 【Nutanix Karbon】Xi IoTの為のKubernetes環境を作ってみる - konchangakita今は Nutanix Karbon から NKE(Nutanix Kubernetes …

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 Layout を作る

SSR で Fetch して表示するデータはそろってきましたここでページ移動しても共通で表示させる「ナビゲーションバー」を Layout コンポーネントを作ってみます【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 ・ログインページをデザイン ・フォ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 SSR で Fetch する

Fetch で得た レスポンスデータ を使ってページ遷移までを行いました 次に、ページ遷移した後に表示するデータをバックエンド(Flask、Elasticsearch)から取得して サーバサイドレンダリング(SSR)を行います 【Nutanix UUIDエクスプローラーを作ってみよ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 FetchからRouterでページ遷移

前回はとりあえず fetch してレスポンスを確認しただけだったので、フォーム入力されたデータを使って、ページ遷移します下記エントリで Native React で Fetch を作り込んだ「/api/connect」、「/api/latestdataset」からデータひっぱってきたいと思います …

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 とりあえずFetchする

フォームで受け取ったデータ(Prism IP、ユーザ名、パスワード)を使ってバックエンドにリクエスト行い、レスポンスを取得する Fetch を実装します ※SSR(サーバサイドレンダリング)までは実装は次でNext.jsの実装とともに、フロントエンドとバックエンドの…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 フォームの実装

Nutanixクラスタに接続するための「Prism IP」、「ユーザ名」、「パスワード」フォーム入力の制御には、通常入力を必須にしたり、エラーメッセージの実装を作り込む必要があります そうすると、フォームごとになかなかコードが増えてくし、なによりそれぞれ…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 ログインページをデザイン

Native React の環境では、一つのページ(URL)の中でNutanixクラスタへ接続、検索、結果表示を行う、SPA(シングルページアプリケーション)でのカタチで作ってました今回はなんとなく、それぞれ別にページを作っていきます 【Nutanix UUIDエクスプローラー…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js環境に tailwindcss/ DaisyUI/ Font Awesomeを導入

tailwindcss.com daisyui.com fontawesome.com 今回はNext.js環境に、デザインを意識したコンポーネント群を導入、初心者なのでとりあえずフレームワークを満載にして、フロントエンド開発環境をパワーアップさせてみます【Nutanix UUIDエクスプローラーを作…

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js で 導入

React を CDN でぼちぼちJavaScriptしてきましたが、ここからフロントエンド部分を独立させ大きく開発環境を進化させます フロントエンドのコンテナを別に作り、Reactベースのフロントエンドフレームワークの Next.js を導入していきます【Nutanix UUIDエク…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - filter編

前回まで、CDNを使い fetchして取得したデータで state を更新して、表示というところまでを実装してきました データ表示部分にリアルタイムでフィルタする動作を付け加えてみます ようやく JavaScript 触ってるっぽい感じに 【Nutanix UUIDエクスプローラー…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - fetch編

fetchって言葉は今回実際使ってみるまで、知らなかったのですが(Web初心者丸だし。。。)、Webページ上からFormなどから httpリクエストしてデータをひっぱってくるやつです 【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ ・Flask表示までのまと…

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - state編

ようやくここから JavaScript っぽいことをはじめていきます(JavaScriptよくわからないまま)【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ ・Flask表示までのまとめ ・React で JavaScript へ挑戦 - CDN導入編 ・React で JavaScript へ挑戦 - …

【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - CDN導入編

Flask の render template 機能で、Webページ表示というところまで作ってみました 次は、Webページの中身を JavaScript を使って表示というのにチャレンジです ちな JavaScript は全くの初心者ですJavaScript の2大フレームワークとして、React と Vue とい…

【Nutanix UUIDエクスプローラーを作ってみよう】Flask表示までのまとめ

しばらく時間があいてしまいましたが、UUIDエクスプローラーを作ってみようプロジェクト再開ですここから、また長いみちのりになりそうです ここまでは、Jupyter notebook 上で個別に実行しながら、Nutanix REST API 、Elasticsearch と Flask で表示までの…

【Nutanix UUIDエクスプローラーを作ってみよう】Elasticsearch から Flask

【Nutanix Advent Calendar 2021】 11日目の記事です!前回までは、Nutanix REST API からの Elasticsearch 投入までやったみましたので、次は簡単な Web GUI にチャレンジです【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ ・REST APIしてみる …

【Nutanix UUIDエクスプローラーを作ってみよう】REST API 結果を Elasticsearch へ

【Nutanix Advent Calendar 2021】 6日目〜 なんかったらElasticsearch #Nutanix_JP

【Nutanix UUIDエクスプローラーを作ってみよう】REST APIしてみる

【Nutanix Advent Calendar 2021】 2日目の記事です!Nutanix で 何ごとか調査するときには往々にして uuid をキーにして調査することが多いです。 uuid と一言で言ってみても、VM の uuid やら Volume Group (Volumes)の uuid やらあれやこれや調べる必要…

VS Code で Azure CLI してみる

せっかく Azure のお勉強をしはじめたので、Azure Cloud Shell のコマンドを VS Code から実行できる環境を作ってみたいとみたいと思いますAzure Cloud Shell は、通常 Azure ポータル上で実行する CLI のやつです Windows に Azure CLI をインストールする…

Azure Solutions Architect Expert(AZ-303/AZ-304)お勉強メモ

これだけ覚えてたら、勝てる、、、わけもなく こんだけ知らなかったってこと 裏を返すと、ここに書いてることは当然理解して周辺情報を説明できることは必須desu!では、いってみよー 自分の備忘録用 AZ-303 / AZ-304 対策ごちゃまぜメモ ■ログ/監視 関連 ・…

Azure の資格試験にチャレンジ

必要にせまられたわけでもなく、Azure を仕事で使っているわけでもないのですが、なんとなくブログにネタにしようってレベルでチャレンジこれまでの Azure歴は、Jetson Nano からの Azure IoT で エッジAI/IoT 的なことやったり、Nutanix KPS で Blob になん…

【おてがる開発環境をつくろう】VS Code あれもこれもエクステンション

VS Codeは、初期状態からエクスプローラ機能、ターミナルが使えて便利ですが、拡張機能(エクステンション)を導入することで真価を発揮します エクステンションは数多くあるので、奥が深いです とりあえず自分が使った範囲で、Python、Jupyter、Dockerを扱…

【おてがる開発環境をつくろう】さいきょうのえでぃた VS Code

ルーキー開発者が最強のえでぃたを装備した おてがる開発環境シリーズの最後は、「VS Code」です 今までの、Docker、Python、Jupyter 全てにおいて、VS Code で便利に使うことができます【おてがる開発環境をつくろう】 1.まずは Docker Desktop インスト…