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ディレクトリを作成しその中に鍵をしまっておきます。
今回は鍵配置後、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のリソース食いつぶし問題を解決することができれば、かなり使いやすいエディタだと思います。
ちなみに、その問題を解決する記事はコチラ。
エディタは人それぞれ好みがありますが、決してツールに振り回されないよう、成果物にこだわっていきましょ。
要は、使い慣れている(気に入っている)ツールが結局一番いいんですよ。
じゃ、そーいうことで！