logoKanikanLab
AboutBlog
0
Next.jsとcloudflareで学内NASの利用環境を整えてみた

Next.jsとcloudflareで学内NASの利用環境を整えてみた

2025-05-07

はじめに

うちの高専の学生で、macbookのストレージ枯渇に悩んでる人が多かったので、学校と協力して自作でTrueNASサーバーを作りました。

今回はその中で苦労したことや知見を書いていきたいと思います。

きっかけ

神山まるごと高専では、テクノロジーだけでなくデザインにも力を注いでいます。そのためさまざまなアプリを授業で使用していくのですが、このアプリがどれも高負荷のものばかりなんですよね。

プログラミングはvscodeやその他ライブラリ、日頃から開発する学生はさまざまなアプリを入れてます。

デザインに関してもAdobeの主要ツール(Illustrator, Photoshop)はデフォルトで使ってますし、学年も上がればFusionだったりBlenderを入れるはめになります。

はい、あまりにもスペック不足が目立つんですよね。

流石に入学するとき比較的高スペックの購入を勧められるでしょ!って思うかもしれませんが、この学校の大半はM1, 256GBを使ってます

自分もmacを買い替える前まで上のスペックを使っていて結構苦しんでた覚えがあったので(初期化は1回してる)いい機会だと思いプロジェクトの計画を始めました。

アーキテクチャ

長期的な金銭コストや物理的な管理のしやすさなどを踏まえて、今回はオンプレミスを採用しました。

サーバー構成

サーバーを1から作るということで、まずはサーバーのパーツ構成から厳選を始めました。

スクリーンショット 2025-05-08 20.46.50.png

全体で50万円くらいの構成です。この費用は学校の制度を利用して全額負担していただきました。とってもありがたい。

これとついでに、LLMやAIの学習などを目的としたGPUサーバーも構築しました。

スクリーンショット 2025-05-08 20.54.52.png

これは全体で120万円くらいの構成ですね。これも全額負担してくれました。本当にありがとうございます。

Web側の構成

TrueNASを使う上で、一からデータセットやアカウントを手打ちするのはあまりにも面倒くさいです。

なのでTrueNASのAPIを使い、Webフォームを入力したらすぐに使えるような設計にしました。

image.png

動かしてみた

サーバーも作り終わり、Web側も完成したので実際にテストします。

スクリーンショット 2025-04-23 17.23.29.png

フォームを入力するとこんな出力が。いい感じに作成されてますね。

Vercelにデプロイすると動かない

ここまでは正直想定通りなんですが、このフォームを全体公開するためにVercelを使おうと思いました。

しかし、いざデプロイすると動かない…。

このサーバーはうちのネットワークでしか動作しないので、外部のデプロイサーバーだとここにアクセスできないんですよね。

これを解決するために、Cloudflare tunnelというサービスを利用しました。

Cloudflare tunnelとは?

自分もよくわかってないサービスなので、Grokに解説してもらいました。

Cloudflare Tunnelは、Cloudflareが提供するサービスで、固定のパブリックIPアドレスやポート開放を必要とせずに、内部のサーバーやリソースを安全に外部からアクセス可能にするものです。具体的には、サーバー上で軽量なデーモン(cloudflared)を動作させ、Cloudflareのグローバルネットワークにアウトバウンド接続(トンネル)を確立することで、HTTPウェブサーバー、SSHサーバー、リモートデスクトップなど様々なプロトコルを安全に公開できます。

というわけなんですが、めっちゃアバウトに説明すると、わざわざローカルホストサーバーをポート解放しなくても、自分の持ってるドメインと繋げて実質的に外部からでも接続できるということです。便利。

実際にコンソールで設定をしてフォームを動かしてみる。

スクリーンショット 2025-05-08 21.37.30.png

リクエスト通った!

スクリーンショット 2025-05-08 21.38.54.png

TrueNASの方でもデータセットが作られたことを確認できました。

終わりに

学生の課題解決のために自作サーバーを作ってみましたが、普段使うことのないTrueNASサーバーの使い方や有用性について学ぶことができたので楽しかったです。

フォーム側のWebアプリはGitHubにも載せてるのでぜひ確認してみてください。

https://github.com/tarabakz25/truenas-form

logo

Kizuki

神山まるごと高専一期生。 東京→徳島 旅行、生成AI、テクノロジーを追って日々精進中。 主にプログラミング、生成AIに関する情報を発信中。時々趣味の話が上がるかも?

\ Follow me! /

@2025 KanikanLab

プライバシーポリシー免責事項