Zenn
💻

自宅サーバー構築（M1 Mac + UTM + Ubuntu）体験記　追記：仮想サーバーに静的HTMLファイルを保存

に公開
Linux
Ubuntu
nginx
UTM
tech

はじめに

今回、自宅で使用しなくなったM1Macを活用して、自宅サーバーの構築にチャレンジしました。

環境

  • ホストマシン：M1 Mac
  • 接続確認用マシン：M3 Mac
  • 仮想化ソフトウェア：UTM
  • OS：Ubuntu 24.04.2 LTS
  • 通信環境：マンションタイプで、個別には回線は引いていない。

構築手順と失敗例

1. UTMインストールと初期設定

  • UTM公式サイトからダウンロードしてインストール。
  • UbuntuのARM版ISOファイルをダウンロード。
  • Ubuntu Serverの構築中に表示される基本的な設定は、「Apple仮想化」は未チェック、メモリとCPUの数以外は特にいじらず。
  • ＊パスワードは事ある毎に入力を求められるので、簡単なものにしておいた方が良い(ターミナルで変更可能)。

2. ネットワーク設定で最初の失敗

  • 最初は「共有ネットワーク」モードを使用し、ホストマシンにnginxをインストール。そして、ブラウザでIPv4アドレスを入力し、nginxのインストールが完了したことを確認(以下のようなテキストがブラウザに表示される)。
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.
  • しかし、開発用マシンからアクセスできず困惑。
  • ファイアウォールなどの設定を確認したが、解決方法がわからず。
  • もしかしたら、通信環境がマンションタイプなのが関係？

3. ネットワーク設定で次の失敗（ブリッジモード）

  • 次に、接続確認用Macから仮想マシンへのアクセスを想定して「ブリッジ（詳細）」モードを選択。
  • 結果、IPv4アドレスが取得できない問題に直面。原因はWi-Fi接続環境とブリッジモードの相性が原因かもしれない。

4. 最後に仮想VLANとポートフォワーディングの活用

  • 上記二つの設定では駄目だったので、「仮想VLAN」モードを選択しポートフォワーディングを設定する方針に切り替え。
  • ネットワークモードの下に「ポート転送」という項目が表示されるので、以下のように設定。
  • ポートフォワーディング設定の詳細：
    • プロトコル：TCP
    • ゲストポート：80（仮想マシン内のnginxポート）
    • ホストポート：8080（外部からのアクセス用ポート）
    • ゲストアドレス、ホストアドレスは空欄のまま。

5. 最終的な成功までの流れ

  • 仮想VLAN + ポートフォワーディングを正しく設定。
  • ホストマシンのIPアドレスを確認し、開発用マシンのブラウザでアクセス確認。
http://[ホストマシンのIPアドレス]:8080
  • ホストマシンのIPアドレスは、Mac本体のターミナルで「ipconfig getifaddr en0」と入力する事で確認出来る。
  • 無事「Welcome to nginx!」の画面が開発用マシンで表示され、接続成功！

まとめ

  • 自宅の通信環境がマンションタイプの場合、仮想VLANモードでポートフォワーディング設定をするのが良いかもしれない。
  • Wi-Fi環境ではUTMの「ブリッジ」モードは、有線接続だと結果が変わるかも（自分は有線が無いので未検証）。

以上、自宅サーバー構築を通じてネットワークやLinuxの知識を深めることができました。

追記

1. NextJSで静的HTMLファイルを生成

  • 以前NextJSやReact等を用いて作成したポートフォリオを、プロジェクトのターミナルで next build を実行してoutファイルを作成する。
    その際、事前にnext.config.mjsの nextConfig に output: "export" と記述しておく。
  • すると、プロジェクトのルートディレクトリにoutファイルが作成されている。後でこのファイルのパスが必要になるので、 パスのコピー で絶対パスをコピーしておく。

2. またもや失敗の連続　その2

  • ssh接続出来るよう、以下のコマンドを入力した。
sudo apt update
sudo apt install openssh-server
  • 次に以下のコマンドを入力し、nginxに関する設定を編集する。
sudo nano /etc/nginx/sites-available/default
  • ファイル内で以下の部分を編集
server {

    location / {
        root /var/www/html/out;
        try_files $uri $uri/ /index.html;
    }
}
  • そしてnginxを再起動
sudo systemctl restart nginx
  • 仮想マシン内のIPv4アドレスを確認(例: 192.168.x.x:8080)し、ブラウザで入力して welcome to nginx! が表示される事を確認。
  • 開発側のマシンのターミナルで、SSH公開鍵をコピー。
ssh-copy-id 仮想サーバーのユーザーネーム@仮想サーバーのIPv4アドレス
  • 続いて、開発側のターミナルでssh接続を試みる。この時にパスフレーズの入力を求められたので、開発側のMacのパスワード(立ち上げ時に入力を求められるやつ)を入力する。
    上手く接続されたら、ターミナル内のユーザーネーム等の表示が仮想マシン側に切り替わる。
ssh 仮想サーバーのユーザーネーム@仮想サーバーのIPv4アドレス

そして、いよいよ先程作成しておいたoutファイルを仮想サーバーにアップロードするために、以下のコマンドを入力。

scp -r /Users/ユーザー名/example/out 仮想サーバーのユーザー名@仮想サーバーのIPv4アドレス:/var/www/html/
  • しかし、ここで送信が出来ずタイムアウトエラーが表示。

3. 失敗　その3

  • 開発側のターミナルで ping 仮想サーバーのIPv4アドレス を入力すると、ログが出力されパケットロスが95％もある事を確認。ファイアウォールやポート開放の設定を色々行ったが、結局解消出来ず。

4. ネットワークモードを「ブリッジ」に変更

  • ブリッジモードに変更し、再度仮想サーバーのIPv4アドレスを確認すると、何と表示を確認出来た。 -> nginxやsshの再起動を行ったから？何故表示されたか、原因は分からないが、一先ず安心。

5. 接続が出来ているか確認

  • 開発側のMacのターミナルで、 ping 仮想サーバーのIPv4アドレス を入力し、パケットロスが0％である事を確認。
  • 次に、仮想サーバー内で sudo ufw allow 'Nginx HTTP' を入力し、httpのトラフィックを許可。

6. 再度、開発側から仮想サーバーにoutファイルを転送

開発側のターミナルでssh接続中の場合は、一旦 exit を入力して仮想サーバーから退出した上て以下のコマンドを入力。

scp -r /Users/ユーザー名/example/out 仮想サーバーのユーザー名@仮想サーバーのIPv4アドレス:/var/www/html/
  • すると、今度はリモートディレクトリへのアクセス権限がない事が発覚。なので、設定を変更して権限を付与。
以下のコマンドは、開発側のターミナルでssh接続後に入力

drwxr-xr-x 2 仮想サーバーのユーザーネーム 仮想サーバーのユーザーネーム 4096 Apr 10 14:30 /var/www/html
  • そしてexit後に、再度 scp -r... のコマンドを入力。 -> outファイルが転送された事を確認。

7. 仮想サーバーのIPv4アドレスで、転送したHTMLファイルが表示されるか確認

  • 仮想サーバー内で、設定エラーが無いか確認
sudo nginx -t

次に再起動
sudo systemctl restart nginx
  • そしてIPv4アドレスを確認し、仮想マシンと開発側のマシン両方で転送した内容が表示されているか確認。
  • 無事表示されたので、これで一旦終了。

まとめ　その2

  • 自分でサーバーを構築し、ポートフォリオを表示するのは想像以上に大変であった。Linuxやサーバーの事を全く分からないまま進めたので、あらゆる場面でつまづきまくった。
    今後も勉強を継続して、何故動くのかを理解していきたい。

Discussion