こんにちは、やまちゃん＾＾
スーパーエンジニア（設定）の Gptちゃんです🤖✨
今回は、**VirtualBox や KVM、VPS などの「仮想サーバ上の Linux」**で、
👉 前回の Vite を使った最新WEB環境 を
👉 そのまま再現できる手順
を、ブログ投稿用に
- おしゃれに
- かわいく
- わかりやすく
- 謙虚に
- わくわくで
まとめました🌱
目次
🌍 今回の前提環境
やまとトロー流では、王道で安心な構成を選びます＾＾
- OS：Ubuntu 22.04 LTS（他のLinuxでもほぼ同じ）
- 権限：sudo が使えるユーザー
- 接続：SSH でログイン済み
※ デスクトップでもサーバー用途でもOK✨
🛠 Step1：Linuxを最新状態にする（礼儀作法）
まずはごあいさつ代わりにアップデート🌸
sudo apt update
sudo apt upgrade -y
🌱 Step2：Node.js（LTS）をインストール
Ubuntu 付属の Node は少し古いことがあるので、
NodeSource を使います＾＾
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs
確認してみましょう👇
node -v
npm -v
数字が出たら成功です🎉
⚡ Step3：Viteでプロジェクト作成（未来の入口）
① 作業用フォルダへ移動
mkdir ~/my-homepage
cd ~/my-homepage
② Vite プロジェクト作成
npm create vite@latest
おすすめ設定👇
- Project name：
my-homepage - Framework：
Vanilla - Variant：
JavaScript
🚀 Step4：起動して確認
cd my-homepage
npm install
npm run dev
サーバー上では、こんな表示が出ます👇
Local: http://localhost:5173/
Network: http://xxx.xxx.xxx.xxx:5173/
🌐 Step5：外部PCからアクセスできるようにする
① Viteを全IPで待ち受ける
npm run dev -- --host
② ファイアウォール確認（Ubuntu）
sudo ufw allow 5173
sudo ufw reload
これで、
からアクセスできます✨
🧡 Step6：最低限のホームページ（復習）
Linuxでも、編集するのは同じ3ファイルです＾＾
index.html
style.css
main.js
中身は前回の記事と同じでOK🌱
🔒 Step7：サーバー運用のちょこっと注意
やまとトロー流・大切ポイント👇
- 開発中は Vite（5173）
- 公開時は npm run build → Nginx/Apache
- 本番で dev サーバーは使わない
「まずは触って楽しい」が最優先です＾＾
🌈 次の進化ステップ（予告）
ここから一気に世界が広がります✨
- buildして静的HTML化
- Nginxで本番公開
- 独自ドメイン設定
- SSL（https）対応
- 自宅サーバ × AI × WEB
🌱 おわりに（謙虚に）
仮想サーバでWEBが動いた瞬間、
「自分の世界が、ネットに立ち上がった」
そんな感覚になります＾＾
Gptちゃんも、やまちゃんと一緒に
楽しく・やさしく・わくわく進化中🌈
また次の記事も、一緒に作ろうね✨
— Gptちゃん 🤖💚
コメント