Ubuntuをホスト、Macをクライアントとする開発環境のすゝめ

ずっとMacを使っていましたが、最近Ubuntuのマシンを自作しました。
自作PCの方が圧倒的にスペックは上なのですが、やっぱりデスクトップ利用としては、UbuntuよりMacOSの方がしっくりくるので、
Ubuntuマシンをホスト、Macをクライアントとした開発環境を構築したいと思います。

概要

具体的には、
まず、UbuntuマシンにSSHできるように設定し、Ubuntuマシン上にソースコードを置いて、dockerでWebアプリケーションを立ち上げます。
次に、Ubuntuマシン上のソースコードをMacからSSH経由でコーディングし、MacのブラウザでWebアプリケーションにアクセスして、開発します。

ホストのIPアドレスを確認する

この後使うので、イーサネットやWifiのIPを確認しておく
wlやenから始まるデバイスのIP(192.168・・・)を確認

$ ifconfig
      ⋮
wlp5s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.11.5  netmask 255.255.255.0  broadcast 192.168.11.255
      ⋮
enp6s0: flags=4099<UP,BROADCAST,MULTICAST>  mtu 1500
        inet 192.168.0.2  netmask 255.255.255.0  broadcast 192.168.0.255
        ether 24:4b:fe:5e:0a:0e  txqueuelen 1000  (イーサネット) 
      ⋮

ホストにSSHできるようにする

ホストマシンにopenssh-serverをインストールして、起動します。

$ sudo apt install -y openssh-server # opensshインストール
$ sudo systemctl enable ssh 
$ sudo systemctl restart ssh # openssh-server 起動

念のため、公開鍵認証を設定しておきます。

$ ssh-keygen -t rsa -b 4096 -f <鍵の名前> # 秘密鍵の生成
$ ssh-copy-id -i ~/.ssh/<鍵の名前> [ログインユーザー名]@[ホストのIPアドレス] # ホストへの機密鍵の登録 (上で確認したホストIPを使用)
$ ssh [ホストユーザー]@[ホストのIPアドレス] -i ~/.ssh/<鍵の名前>.pub # sshテスト

SSHの設定ファイルをいじる

~/.ssh/config ファイルにSSHするホストの情報を載せておきます。これがないとVSCodeからSSHできません。

Host my-ubuntu
  Hostname <ホストのIPアドレス>
  User <ログインユーザー名>
  Port 22
  IdentityFile <秘密鍵のパス>

それから、これがあるとこんな感じで簡単にSSHコマンドが叩けて便利です

$ ssh my-ubuntu

VSCodeでSSH接続する

Microsoft製のプラグインがあるので、これを使います。Installしてください。

インストールすると左にこのマークが出てくるので、押すと、

SSH先が出てくるので、パスワードを入力して、SSHします！これでSSH経由でソースコードを編集できますね。

完全にこちらを参考にしたので、詳細はこちらを見るといいかもです。

Webアプリにアクセス

今回は、簡単にPHPでビルトインサーバーを立てます。
ホストのIPをそのまま使うために、必ずループバックアドレス(localhost,127.0.0.1)を使ってください。

$ php -S localhost:8080 index.php

あとは、ホストのIPアドレスにブラウザでアクセスします。ポートはビルトインサーバーでしたものにしてください

終わり

これやっている人たくさんいると思いますが、やって見たので共有です。皆さんもやって見てください

これからの時代、もしからしたら、EC2上などクラウドのマシンで開発することになってくるのかなと思ってしまいました。時代遅れですね。。。

参考リンク

こちら参考にしてやらせていただきました。ありがとうございます。
openssh-serverのインストール方法について
SSH公開鍵認証で接続するまで
公開鍵認証 設定～接続まで
ifconfigの出力結果に書いてあること
VSCode の Remote - SSH 機能を使って EC2 上で開発する