70
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

VagrantでVScodeのRemote Developmentを使おう!

はじめに

最近LaravelのでVagrantを用いたHomestead環境で作業をしており,remoteの作業環境としてVScode拡張機能のSSH FSを使用していました(この記事).

上記記事を投稿したところ,VScodeではもうremote developmentが使えるよ!と教えていただいたので,使ってみたいと思います.

実行環境
- macOS Mojave v10.14.5
- VScode v1.36.1

クソ簡単

とりあえずVagrantを動かすディレクトリに移動します.
その後,vagrantでssh接続する際の設定をみてみます.

cd Homestead
vagrant ssh-config

上記コマンドのように,vagrantが動くところに行ってvagrant ssh-config,というイメージで大丈夫です.

すると以下のようにvagrantでssh接続する際の設定が吐き出されます.

Host homestead
  HostName 127.0.0.1
  User vagrant
  Port [port.No]
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/[username]/Homestead/.vagrant/machines/homestead/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  ForwardAgent yes

vagrantならすでにリモート側にssh接続をする準備が整っているので,ホストのssh接続に関するconfigに設定を書き込んでおきます.

以下のコマンドを実行してください.
vagrant ssh-configで出力される結果を~/.ssh/configに書き込みます.

vagrant ssh-config >> ~/.ssh/config

設定は以上だけで終わりです!

あとはVScode(アップデートはしておいてください)で拡張機能の"Remote Development"を検索してください.

Remote Developmentをインストールしたら,画面左下に表示される><のようなマークをクリック,"Remote-SSH: Connect to Host"を選択して先ほど設定したリモートサーバの名前を選択します.

以上で接続終了です!

ローカルに入っている拡張機能はリモート側では導入されていないことがありますので,必要な拡張機能をインストールしてカスタマイズしていきましょう.

まとめ

設定ファイルの記述がコマンド一発なのはCHO-RAKUですね.
各種intellisenseやemmet, git lensなどの拡張機能も使えてかなり開発が捗りそうです.
VScode, 最強!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
70
Help us understand the problem. What are the problem?