Open6

MacにUTMでUbuntu仮想環境を作ってSSH接続する

eemlis7-keeemlis7-ke

はじめに

このスクラップでは、MacにUTMを使用して仮想環境を構築し、その中のUbuntuにSSHで接続する方法をまとめます。最終的には、VSCodeからSSH接続し、ローカルのエディタでコードを書きつつ、リモート環境で実行できるフロント開発環境を構築します。

使用環境

OS: macOS Sequoia 15.2
macマシン: Mac Mini M4 Pro / RAM 64GB
仮想化ツール: UTM v4.6
仮想マシン: Ubuntu Server 24.04 (arm64)

eemlis7-keeemlis7-ke

ステップ 1: UTMのインストール

UTMは、Apple Silicon（M1/M2など）およびIntel Macで動作するオープンソースの仮想化ツールです。

1.1 UTMのダウンロード

  1. UTM公式サイトにアクセスします。
    https://mac.getutm.app/
  1. [Download] ボタンをクリックして最新バージョン（例: v4.6）をダウンロードします。
  2. ダウンロードされた.dmgファイルを開きます。

1.2 UTMのインストール

  1. UTMのアイコンを「Applications」フォルダにドラッグ&ドロップします。
  2. LaunchpadまたはFinderからUTMを起動します。

1.3 初期設定

  1. 初回起動時に「UTMを開いてもよいですか？」と表示されたら、[開く]を選択します。
  2. 仮想マシンを追加する画面が表示されますが、ここではスキップしておきます。（この後の工程でUbuntuをインストールするため）
eemlis7-keeemlis7-ke

ステップ 2: Ubuntu Serverの仮想マシン作成

2.1 必要な準備

1. Ubuntu Server ISOのダウンロード

  • Ubuntu公式サイトにアクセスします。
  • Ubuntu Server 24.04 LTSのarm64バージョンを選択してダウンロードします。
  • ダウンロードされたファイル（例: ubuntu-24.04-live-server-arm64.iso）を確認します。

2. 仮想マシンに割り当てるリソースの決定

  • CPU: 2〜4コア（推奨）　→ デフォルト
  • RAM: 2〜4GB（推奨）→ 8GB
  • ストレージ: 最低20GB以上（推奨）→ 40GB

2.2 UTMで新規仮想マシンを作成

1. UTMを起動

FinderまたはLaunchpadからUTMを開きます。

2. 新しい仮想マシンの追加

[＋] ボタンをクリックして新しい仮想マシンを作成します。
「仮想化」オプションを選択して[続ける]をクリックします。

3. OSのインポート

「ISOまたはオペレーティングシステムをインストール」オプションを選択し、ダウンロードしたUbuntuのISOファイルを指定します。

4. 仮想マシンの設定

「名前」: UbuntuServer2404
「システムアーキテクチャ」: ARM64（自動）
「メモリ」: 8GB
「プロセッサ数」: デフォルト
「ストレージサイズ」: 40GB

5. ネットワークの設定

「ネットワークモード」: NAT を選択します（後でSSHを設定する際に調整可能）。

6. 設定を保存

仮想マシンの設定を確認し、[保存]をクリックします。

2.3 Ubuntuのインストール

1. 仮想マシンを起動

作成した仮想マシンを選択し、[起動] ボタンをクリックします。

2. Ubuntuのインストール

インストーラが起動するので、以下の手順でインストールを進めます：
* 言語の選択: JapaneseまたはEnglish。
* キーボードレイアウト: デフォルト設定を使用。
* ネットワーク: 自動設定（DHCP）。
* ストレージ設定: 推奨設定を使用（ディスク全体を使用）。
* ユーザーアカウント: 管理者アカウントを作成（例: username, password）。
* パッケージ選択: Minimal installation（最小構成）を選択。

3. インストールの完了

インストールが完了すると、仮想マシンが再起動します。
CDをアンマウントする。
黒い画面のまま進まない場合は、仮想マシンを一度再起動する。
起動したら、作成した管理者アカウントでログインします。

2.4 初期設定

  1. アップデート
    システムを最新の状態に更新します：
sudo apt update && sudo apt upgrade -y
  1. 必要なツールのインストール
    基本的なツールをインストールします：
sudo apt install -y curl wget git build-essential
  1. IPアドレスの確認
    現在のIPアドレスを確認します：
ip addr

表示されるinetアドレスを控えておきます（例: 192.168.64.2）。

2.5 SSHの有効化

  1. SSHサーバーのインストール
    SSHをインストールします：
sudo apt install openssh-server
sudo systemctl enable ssh
sudo systemctl start ssh
  1. ファイアウォールの設定
    ufwをインストール：
sudo apt update
sudo apt install ufw -y

SSHポート（22番）を許可します：

sudo ufw allow ssh
sudo ufw enable
  1. SSH接続のテスト
    Macのターミナルから仮想マシンにSSHで接続します：
ssh username@<UbuntuのIPアドレス>
eemlis7-keeemlis7-ke

役立つパッケージやツール（必要なら検討する一覧）

開発環境や一般的なシステム運用に必要なツールやパッケージは、プロジェクトや用途によって異なりますが、以下にいくつかの一般的に役立つパッケージやツールを紹介します。必要に応じて追加してください。

1. 開発関連のツール

python3 / python3-pip: Python 3とそのパッケージ管理ツール

sudo apt install -y python3 python3-pip

nodejs / npm: JavaScriptのランタイムとパッケージマネージャー

sudo apt install -y nodejs npm

default-jdk: Java開発キット（JDK）

sudo apt install -y default-jdk

ruby: Rubyプログラミング言語

sudo apt install -y ruby

gcc / g++: C/C++コンパイラ（build-essentialに含まれますが、必要に応じて個別にインストールも可能）

sudo apt install -y gcc g++

2. データベース関連

mysql-server: MySQLデータベースサーバー

sudo apt install -y mysql-server

postgresql: PostgreSQLデータベースサーバー

sudo apt install -y postgresql

sqlite3: 軽量なSQLデータベースエンジン

sudo apt install -y sqlite3

3. ネットワーク関連

net-tools: ネットワーク設定を確認するためのツール（ifconfigなど）

sudo apt install -y net-tools

openssh-server: SSHサーバー（リモート接続用）

sudo apt install -y openssh-server

telnet: Telnetクライアント

sudo apt install -y telnet

samba: SMBサーバー（ファイル共有）

sudo apt install -y samba

4. システム管理関連

htop: システムリソースをモニタリングするツール

sudo apt install -y htop

vim / nano: テキストエディタ

sudo apt install -y vim nano

tmux: ターミナルマルチプレクサ（複数のターミナルセッションを管理）

sudo apt install -y tmux

ufw: ファイアウォール設定ツール

sudo apt install -y ufw
  1. その他の便利なツール
    unzip / zip: ZIPファイルの圧縮・解凍ツール
sudo apt install -y unzip zip

jq: JSONデータを処理するコマンドラインツール

sudo apt install -y jq

tree: ディレクトリ構造をツリー表示するツール

sudo apt install -y tree

rsync: ファイルやディレクトリを同期するツール

sudo apt install -y rsync
  1. コンテナ関連
    docker: コンテナプラットフォーム
sudo apt install -y docker.io

docker-compose: 複数のコンテナを管理するツール

sudo apt install -y docker-compose

7. セキュリティ関連

fail2ban: 不正アクセスを防ぐためのツール

sudo apt install -y fail2ban

clamav: ウイルススキャンツール

sudo apt install -y clamav

8. グラフィカル環境関連（GUIが必要な場合）

x11-apps: X11関連のツール

sudo apt install -y x11-apps

gnome-terminal: GNOMEターミナルエミュレータ

sudo apt install -y gnome-terminal

9. プロジェクト固有の依存関係

プロジェクトによっては、特定のライブラリやツールが必要になる場合があります。例えば：

libssl-dev: OpenSSL開発用ライブラリ

sudo apt install -y libssl-dev

libxml2-dev: XML処理用ライブラリ

sudo apt install -y libxml2-dev
eemlis7-keeemlis7-ke

選別中

フロントエンド開発向け（必要なら検討する一覧）

フロントエンド開発に必要なツールやパッケージは、主にJavaScriptやCSS、HTMLの開発環境を整えるためのものです。以下に、フロントエンド開発に必要なツールやパッケージのリストを紹介します。

1. 基本的な開発ツール

Node.js: JavaScriptランタイム。フロントエンド開発では必須です

sudo apt install -y nodejs npm

または、最新版のNode.jsをインストールする場合は、NodeSourceからインストールします。

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Git: バージョン管理システム

sudo apt install -y git

2. パッケージマネージャー

npm: Node.jsのパッケージマネージャー（Node.jsと一緒にインストールされます）

Yarn: npmの代替パッケージマネージャー。

npm install -g yarn

3. バンドラー

Webpack: モジュールバンドラー

npm install -g webpack webpack-cli

Vite: 高速なビルドツール

npm install -g create-vite

Parcel: ゼロコンフィグのバンドラー

npm install -g parcel-bundler

4. フレームワークとライブラリ

React: フロントエンドライブラリ

npx create-react-app my-app

Vue.js: プログレッシブフレームワーク

npm install -g @vue/cli
vue create my-project

Angular: フルスタックフレームワーク

npm install -g @angular/cli
ng new my-project

5. CSS関連ツール

Sass: CSSプリプロセッサ。

npm install -g sass
PostCSS: CSS変換ツール
```bash
npm install -g postcss-cli

Tailwind CSS: ユーティリティファーストのCSSフレームワーク

npm install -g tailwindcss

6. 開発支援ツール

ESLint: JavaScriptのリンター（コードの品質チェック）

npm install -g eslint

Prettier: コードフォーマッター

npm install -g prettier

Babel: JavaScriptのトランスパイラ（最新のJavaScriptを古いブラウザ向けに変換）

npm install -g @babel/core @babel/cli

7. ブラウザツール

Google Chrome: 開発者ツールが充実したブラウザ

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb

Firefox Developer Edition: 開発者向けのFirefox

sudo apt install -y firefox

8. テストツール

Jest: JavaScriptのテストフレームワーク

npm install -g jest

Cypress: エンドツーエンドテストツール

npm install -g cypress

Mocha: テストフレームワーク

npm install -g mocha

9. その他の便利なツール

http-server: 簡単なHTTPサーバー

npm install -g http-server

nodemon: ファイル変更を監視して自動でサーバーを再起動

npm install -g nodemon

lighthouse: Webページのパフォーマンス分析ツール

npm install -g lighthouse

10. エディタとIDE

Visual Studio Code: 人気のコードエディタ

sudo apt install -y code

11. バージョン管理とコラボレーション

GitHub CLI: GitHubのコマンドラインツール

sudo apt install -y gh

12. プロジェクト固有の依存関係

プロジェクトによっては、以下のような追加のツールが必要になる場合があります。

TypeScript: JavaScriptの型付きスーパーセット

npm install -g typescript

GraphQL: APIクエリ言語

npm install -g graphql

まとめ

上記のツールやパッケージをインストールすることで、フロントエンド開発環境を整えることができます。プロジェクトの規模や使用するフレームワークによって必要なツールは異なるので、適宜選択してください。