VSCode(統合エディタ)を使用して、WEB開発をする人は今では多いでしょう。
僕もメインで使用しているエディタはVSCodeです。便利な機能拡張がたくさんあって、これからWEB開発を始める人はかなりオススメできるエディタです。
今日は、画像を中心に、VSCodeを介し、サーバー環境にSSH接続(リモート接続)をして、ファイルを編集できるようにする方法です。
RemoteDevelopmentをインストール
下記画像から順に説明します。
- VSCodeを開いた状態で、左メニューから画像①の部分をクリックします。
- 機能拡張検索エリアにフォーカスし、「Remote Development」と入力します。
- 検索後、下あたりに「Remote Development」と表示されるので、それを選択。
- 「インストール」ボタンをクリックし、インストールします。
確認
インストール後、「無効にする」「アンインストール」という項目が出ればOKです。
※機能拡張パックとして
- Remote-WSL
- Remote-Containers
- Remote-SSH
がセットでインストールされます。(上級者？は必要なパッケージのみカスタマイズでインストールするのもアリ)
SSHターゲット(接続先)の設定
RemoteDevelopmentを無事にインストールを終えたら、下記、赤枠のメニューが追加されます。
クリックして、選択します。
リモートエクスプローラーの箇所で、「SSH Target」を選択してください。
次に、下の画像の赤枠の歯車マークを選択し「Select SSH configuration file to update」でSSH Keyが存在するフォルダの場所を選択します。
※ここで、サーバーに接続するためのSSH Keyを事前に作成＆配置しておく必要があります(もしくは管理者から配布？)。配置場所に特にこだわりが無ければ、ユーザー名以下に.sshディレクトリを作成しその中に鍵をしまっておいて良いと思います。
※SSH作成については: https://git-scm.com/book/ja/v2/Gitサーバー-SSH-公開鍵の作成
今回は鍵配置後、C:\\Users\ユーザー名\.ssh\configを選択しました。
ssh_configを設定します。今回の設定した項目は以下になります。
※画像は初期設定項目です。
Host ホスト名（接続先表示用）
HostName 接続先IPアドレスorホスト名
User ログインユーザ名
Port 22（接続用ポート番号を変更している場合はその番号を設定）
IdentityFile 秘密鍵（SSH接続に鍵認証方式を使用している場合に設定）
各項目を設定し、保存します。
保存を終えると、SSH設定は完了です。
SSH初期接続設定
実際に接続するには「SSH TARGETS」以下に、ssh_configで設定したホスト名が表示されるので、赤枠の部分をクリックして、SSH接続を開始します。
対象のサーバーに始めてSSHリモート接続すると、初期の接続設定をする必要があります。
僕の環境はAmazonLinux2なので、「Linux」を選択しました。
その後、「Continue」を選択し、操作を続けてください。
SSH接続が成功すると、左メニュー横に「Open Folder」と表示されるのでクリックします。
次に、作業を行いたいディレクトリを選択し、OKボタンを押します。
対象ディレクトリが開かれるので、目的のファイルを開き、作業を行うことができます。
※赤枠は、自分のWEBサイトサービスディレクトリに接続完了しました。これでVSCodeでSSHリモート作業ができるようになりました。
最後に
僕は今まで、ローカルでXAMPPなどを使用し、そこでWEB開発した成果物をGitLabなどを介して、Jenkinsでビルドするケースが多く、サーバー上にリモート接続することがなかった(直接触る機会が例外時以外になかった)です。
いざ、サーバー上で手作業をしなければいけない時は、viで臨時的に作業をしたりといったことが幾度でした。
(まあ、viもシンプルで大好きなので、特に不便はありませんでしたが。)
ただ、今の開発環境は開発サーバーが存在し、SSHリモートでの作業がメインなので、やはり使い慣れているエディタが一番効率が良く、VSCodeのリソース食いつぶし問題を解決することができれば、かなり使いやすいエディタだと思います。
ちなみに、その問題を解決する記事はコチラ。
エディタは人それぞれ好みがありますが、決してツールに振り回されないよう、成果物にこだわっていきましょ。
要は、使い慣れている(気に入っている)ツールが結局一番いいんですよ。
じゃ、そーいうことで！