いつもブログをご覧くださり、ありがとうございます。
これまで、UbuntuにDockerをインストールし、PHPやMySQLを使った開発環境を構築してきました。
Ubuntu上でPHPファイルを編集する際には、SSHでUbuntuへ接続して nano などのエディタを使うこともできます。
ただ、実際に開発を進めていくのであれば、普段使っているMacのエディタからUbuntu上のファイルを直接編集できた方が便利です。
そこで今回は、MacのVisual Studio Code（VS Code）からSSHを利用してUbuntuへ接続し、Ubuntu上のPHPファイルを直接編集できる環境を構築します。
今回構築する環境のイメージは次のとおりです。
Mac
│
│ VS Code
│ Remote SSH
▼
Ubuntu
│
├── /home/ユーザー名/workspace/php-test/
│
└── Docker
├── PHP
└── MySQLVS Code自体はMac上で動作しますが、編集するファイルはUbuntu上にあります。
目次
今回の環境
今回使用した主な環境は次のとおりです。
クライアントPC：Mac
エディタ：Visual Studio Code
接続方式：SSH
Ubuntu：Ubuntu 24.04 LTS
Docker：Docker Engine
PHP：PHP 8.4
MySQL：MySQL 8.4なお、本記事に掲載しているIPアドレス、ユーザー名などは説明用の値に置き換えています。
ご自身の環境に合わせて読み替えてください。
事前にMacからSSH接続できることを確認する
まず、MacのターミナルからUbuntuへSSH接続できることを確認します。
例えばUbuntuのIPアドレスを 192.168.1.100、Ubuntuのユーザー名を ubuntuuser とすると、
ssh ubuntuuser@192.168.1.100を実行します。
パスワードを入力してUbuntuへログインできれば、SSHそのものは正常に利用できます。
今回は、このSSH接続をVS Codeから利用します。
VS CodeにRemote – SSHをインストールする
MacでVS Codeを起動します。
左側の「Extensions（拡張機能）」を開き、
Remote - SSHを検索します。
Microsoftが提供している「Remote – SSH」をインストールします。
Remote – SSHを利用すると、SSH接続したLinuxサーバー上のファイルを、MacのVS Codeから直接開いて編集できます。
MacのSSH設定を作成する
続いてMacのSSH設定を確認します。
Macのターミナルから、
nano ~/.ssh/configを実行します。
Ubuntuへの接続設定として、例えば次のように記述します。
Host ubuntu-dev
HostName 192.168.1.100
User ubuntuuserそれぞれ、
Host → 接続時に使用する分かりやすい名前
HostName → UbuntuのIPアドレス
User → Ubuntuのユーザー名という意味です。
設定後、
ssh ubuntu-devとするだけでUbuntuへ接続できるようになります。
VS CodeからUbuntuへ接続する
VS Codeで、
Command + Shift + Pを押してコマンドパレットを開きます。
続いて、
Remote-SSH: Connect to Host...を選択します。
接続先として、
ubuntu-devを選択します。
正常に接続できれば、VS Codeの画面に
SSH: ubuntu-devと表示されます。
これでMacのVS CodeからUbuntuへ接続できました。
Ubuntu上のプロジェクトを開く
今回はUbuntu上に次の開発ディレクトリを作成しています。
/home/ubuntuuser/workspace/php-testVS Codeからこのフォルダを開きます。
すると、
php-test
├── compose.yaml
├── Dockerfile
├── hello.php
├── db-test.php
└── users.phpといったUbuntu上のファイルを、MacのVS Codeから直接確認できます。
ここで重要なのは、Macへファイルをコピーして編集しているわけではないという点です。
VS CodeからUbuntu上のファイルを直接編集しています。
PHPファイルを編集してみる
例えば hello.php をVS Codeで開いて、
<?php
echo "Hello from VS Code!";と変更します。
Command + S で保存します。
今回構築したDocker環境では、
volumes:
- .:/appとしてUbuntu上のプロジェクトディレクトリをPHPコンテナへマウントしています。
そのため、
MacのVS Code
↓
Ubuntuのhello.php
↓
Dockerコンテナの/app/hello.phpという形で変更が反映されます。
ブラウザから、
http://192.168.1.100:8001/hello.phpへアクセスすると、
Hello from VS Code!と表示されました。
これで、
Macでコードを書く → UbuntuのDockerで実行 → Macのブラウザで確認する
という開発環境ができました。
Remote SSHが「Initializing VS Code Server…」で止まった
今回の環境構築では、最初から正常に接続できたわけではありませんでした。
VS Codeから接続すると、
Setting up SSH Host ubuntu-dev:
Initializing VS Code Server...という状態から先へ進まない現象が発生しました。
一方、Macのターミナルから、
ssh ubuntu-devを実行すると、パスワード認証で正常にUbuntuへログインできました。
つまり、
Mac
↓
SSH
↓
Ubuntuという通常のSSH接続自体には問題がありません。
そこで、VS Codeからの接続についてはパスワード認証ではなく、SSH公開鍵認証を利用することにしました。
MacでSSH鍵を作成する
まずMac側で、Ubuntu接続専用のSSH鍵を作成しました。
ssh-keygen -t ed25519 -f ~/.ssh/ubuntu-dev作成すると、
~/.ssh/ubuntu-dev
~/.ssh/ubuntu-dev.pubという2つのファイルができます。
ubuntu-dev 秘密鍵
ubuntu-dev.pub 公開鍵秘密鍵はMac側で安全に保管します。
公開鍵だけをUbuntuへ登録します。
公開鍵をUbuntuへ登録する
Macから次のコマンドを実行しました。
cat ~/.ssh/ubuntu-dev.pub | ssh ubuntu-dev 'mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys'このときは、Ubuntuのパスワードを入力します。
登録後、
ssh -i ~/.ssh/ubuntu-dev ubuntu-devを実行します。
Ubuntuのパスワードを入力することなくログインできれば、公開鍵認証は成功です。
SSH設定に秘密鍵を指定する
Macの
~/.ssh/configを次のように変更しました。
Host ubuntu-dev
HostName 192.168.1.100
User ubuntuuser
IdentityFile ~/.ssh/ubuntu-devこれで、
ssh ubuntu-devだけでUbuntuへ公開鍵認証で接続できます。
VS Codeから改めて、
Remote-SSH: Connect to Host...を実行して ubuntu-dev を選択したところ、今度は正常に接続できました。
Ubuntu側には、
~/.vscode-serverも作成されていました。
これはRemote SSHを利用するためにUbuntu側へ配置されるVS Code Serverのファイルです。
ディスク容量も確認しておく
今回のトラブルシューティング中に、Ubuntuのディスク使用率が高くなっていることにも気付きました。確認には、
df -h /を使用しました。当初は、
Filesystem Size Used Avail Use%
/dev/sda3 292G 262G 16G 95%となっていました。
どこで容量を使っているのか、
sudo du -xhd1 / 2>/dev/null | sort -hで確認すると、/home が大部分を使用していました。
さらに、
sudo du -xhd1 /home/ユーザー名 2>/dev/null | sort -hと掘り下げたところ、不要になったサイトバックアップが約234GB保存されていることが分かりました。
不要なバックアップを整理した結果、
Filesystem Size Used Avail Use%
/dev/sda3 292G 28G 250G 10%まで改善しました。
今回のRemote SSHの問題がディスク容量だけに起因していたとは断定できませんが、Dockerを利用するサーバーでは、Dockerイメージやコンテナ、ボリュームなどでもディスクを使用します。
そのため、
df -hで定期的に空き容量を確認しておくことも大切だと感じました。
まとめ
今回は、MacのVS CodeからRemote SSHを利用してUbuntuへ接続し、Ubuntu上のPHPファイルを直接編集できる環境を構築しました。最終的な構成は次のようになりました。
Mac
│
├── Visual Studio Code
│
└── SSH公開鍵認証
│
▼
Ubuntu 24.04
│
├── VS Code Server
│
└── workspace/php-test
│
▼
Docker Compose
├── PHP 8.4
└── MySQL 8.4これまではSSH接続後に nano などを使ってPHPファイルを編集していましたが、VS Codeから直接編集できるようになったことで、かなり開発しやすくなりました。また、VS Codeでファイルを保存するとUbuntu上のファイルが更新され、その変更がDockerコンテナにも反映されます。
これで、
VS Codeで編集
↓
Ubuntuへ保存
↓
DockerでPHPを実行
↓
Macのブラウザで動作確認という一連の開発フローが完成しました。
今後は、この環境を利用してPHPとMySQLを使った簡単なWebアプリケーションの開発も試していきたいと思います。
お問い合わせはこちらから
