【Atom】remote-ftpプラグインでvagrant上でもいつものAtomエディタを使う方法

WEB開発

vagrantで仮想環境を作れたけど、いつもの手に馴染んだAtomが使えない!viも初期設定のやつだし、、。

その悩みはAtomのプラグインのremote-ftpが解決してくれた。
作者の icetee氏にはただただ感謝である。

比較的簡単に解決できたが、.ftpconfigの記述に迷った点があったのでそこだけは注意しよう。

もくじ

  • Atomでremote-ftpパッケージをインストールする
  • remote-ftpの設定ファイル .ftpconfigを作成する
  • ftp.config を設定する
  • Atomとvagrantとsshコネクションを確立させる。

Atomでremote-ftpパッケージをインストールする

  1. Atomを開く
  2. 左上のメニューよりAtom -> Preferenceを開く
  3. Settingのメニューより+ Installを開く
  4. + Install Packages の検索窓で remote-ftp を入力する
  5. icetree 氏が作者のremote-ftpを選んでinstallする

remote-ftpの設定ファイル .ftpconfigを作成する

  1. Atomを開く
  2. AtomにてVagrantfileを持つ、編集したい対象のディレクトリを開く
  3. メニューのPackagesよりRemote FTPを開く
  4. Remote FTPのメニューよりCreate SFTP config fileを選ぶ
  5. 2のディレクトリに.ftpconfigが自動的に作成される

ftp.config を設定する

ターミナルにて vagrant ssh-config で現在のじぶんのssh情報が取得できる。

必要な情報を.ftpconfigの対応する箇所に値を記述する。

対応表

vagrant ssh-config .ftpconfig
HostName 127.0.0.1 "host": "127.0.0.1"
Port 2222 "port": "2222"
User vagrant "user": "vagrant"
sshパスワードがあれば "pass": ""
ssh-configに記載なし "remote": "/home/vagrant",
IdentityFile /Users/、、、/privatekey "privatekey" :"/Users/、、、/privatekey"

Atomとvagrantのコネクションを確立する。

  1. Atom のメニュー PackagesよりRemote FTPを開く
  2. Remote FTPのメニューよりToggleを選ぶ
  3. Atom 左側Projectタブの隣にRemoteタブが自動的に作成される
  4. RemoteタブのConnectをクリックする
  5. Atom の右上にRemote Connectedが表示されればコネクション確率が成功
  6. Remoteタブをみると、期待通りのvagrant上のディレクトリが見える。あとはいつもの様にAtomで編集しよう

まとめ

Atomをこの程度の手間でvagrant仮想環境上で使える様になるなら、十分取り組む価値があると思う。

特に、vagrant初心者にこの設定をしておくことを強くおすすめする。

良きAtomライフを。