VSCode(統合エディタ)を使用して、WEB開発をする人は昨今では多いことかと思います。
僕もメインで使用しているエディタはVSCodeです。便利な機能拡張がたくさんあって、これからWEB開発を始める人はかなりオススメできるエディタです。
今日は、画像を中心に、VSCodeを介し、サーバー環境にSSH接続(リモート接続)をして、ファイルを編集できるようにする方法です。
RemoteDevelopmentをインストール
下記画像から順に説明します。
- VSCodeを開いた状態で、左メニューから画像①の部分をクリックします。
- 機能拡張検索エリアにフォーカスし、「Remote Development」と入力します。
- 検索後、下あたりに「Remote Development」と表示されるので、それを選択。
- 「インストール」ボタンをクリックし、インストールします。
確認
インストール後、「無効にする」「アンインストール」という項目が出ればOKです。
※機能拡張パックとして
- Remote-WSL
- Remote-Containers
- Remote-SSH
がセットでインストールされます。(上級者？は必要なパッケージのみカスタマイズでインストールするのもアリ)
SSHターゲット(接続先)の設定
RemoteDevelopment のインストールを無事に終えたら、下記、赤枠のメニューが追加されていればOKです。
クリックして、選択します。
リモートエクスプローラーの箇所で、「SSH Target」 （2022/12/22現在: VSCodeアプデ（ver. 1.74.2）で「リモート」になりました。）選択してください。
※旧バージョンです。
■ VSCode（ver. 1.74.2）
次に、下の画像の赤枠の歯車マークを選択し「更新するSSH構成ファイルを選択する」でSSHキーのconfigファイル場所を指定します。
※サーバーに接続するためのSSH Keyを事前に作成＆配置しておく必要があります。
配置場所に特にこだわりが無ければ、ユーザー名のホームディレクトリ以下に.sshディレクトリを作成しその中に鍵をしまっておくのがベターです。
■ SSH鍵作成方法はこちら
今回は鍵配置後、「C:\\Users\ユーザー名\.ssh\config」を選択しました。※Macの方もパスは違えどやり方は同じです。
ssh_configを設定します。今回の設定した項目は以下になります。
※画像は初期コンフィグ設定項目です。
Host ホスト名（接続先表示用）
HostName 接続先IPアドレスorホスト名
User ログインユーザ名
Port 22（接続用ポート番号を変更している場合はその番号を設定）
IdentityFile 秘密鍵（SSH接続に鍵認証方式を使用している場合に設定）
各項目を設定し、保存します。これで、SSH接続設定は完了です。
SSH初期接続設定（新ver. 1.74.2）
SSHキーをディレクトリに配置、コンフィグ設定を終えるとホスト名が表示されるはずです。もし、設定してもホスト名リストが出現しなければ、下記の「リモート」のリフレッシュアイコン（赤枠）をクリックして更新してみてください。
ホスト名が表示されれば、後は接続するだけです。赤枠の「→」は現在のウィンドウで接続、「＋」のアイコンは別ウィンドウで接続、になります。
どちらでも好みの方で接続を開始し、SSHログインのパスワードを入力して、接続を開始すればリモート接続は完了です。
別の接続方法として、「SSH」の右端「＋」をクリックすることで、「SSH接続コマンドを入力する」の赤枠の部分に「ユーザー名＠ホスト名」を入力してエンターを押します。
次に「SSH接続情報を更新する設定ファイル（コンフィグファイル）」を選択します。
選択することで、対象ファイルにSSH接続情報を自動で追加してくれます。
構成ファイルをパスを選択すると、ホスト名などをコンフィグファイルに追加されます。画面右下に「ホストが追加されました！」というポップアップが表示されます。
ただし、注意したいのは、このまま接続を押しても、デフォルト状態ではSSHキー名とか、SSH接続用のPort番号が変更されていた場合、「接続」を押してもつながりません。「Configを開く」をクリックして、ファイルを開き、上記で示したコンフィグ設定を環境に合わせて追記しましょう。
接続を開始すると、リモート接続先のOSタイプを選択してください。
以下、接続が成功すると、「リモートに接続しました」と表示され、「フォルダーを開く」で開きたいプロジェクトを開いてください。これで作業開始できますね！
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のリソース食いつぶし問題を解決することができれば、かなり使いやすいエディタだと思います。
ちなみに、その問題を解決する記事はコチラ。
SSHリモートの環境設定も慣れれば楽ですが、アップデートによって仕様が変わったりすると少し苦戦するかもしれませんね。
どうぞ、ご参考に。