サーバー ツール プログラミング 環境構築

VSCodeを使ってサーバー環境にSSHリモート接続手順

 

VSCode(統合エディタ)を使用して、WEB開発をする人は今では多いでしょう。

僕もメインで使用しているエディタはVSCodeです。便利な機能拡張がたくさんあって、これからWEB開発を始める人はかなりオススメできるエディタです。

 

今日は、画像を中心に、VSCodeを介し、サーバー環境にSSH接続(リモート接続)をして、ファイルを編集できるようにする方法です。

RemoteDevelopmentをインストール

下記画像から順に説明します。

  1. VSCodeを開いた状態で、左メニューから画像①の部分をクリックします。
  2. 機能拡張検索エリアにフォーカスし、「Remote Development」と入力します。
  3. 検索後、下あたりに「Remote Development」と表示されるので、それを選択。
  4. 「インストール」ボタンをクリックし、インストールします。

確認

インストール後、「無効にする」「アンインストール」という項目が出れば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のリソース食いつぶし問題を解決することができれば、かなり使いやすいエディタだと思います。

 

ちなみに、その問題を解決する記事はコチラ。

エディタは人それぞれ好みがありますが、決してツールに振り回されないよう、成果物にこだわっていきましょ。

要は、使い慣れている(気に入っている)ツールが結局一番いいんですよ。

 

じゃ、そーいうことで!

 

-サーバー, ツール, プログラミング, 環境構築
-

© 2021 FuwaFuwaShoChan BLOG