[Mac] Visual Studio Code で ssh 接続をするには?

Mac Mac
スポンサーリンク

はじめに

前回の記事では、Mac のターミナルから CentOS に接続する手順を確認しました。

今回は、Mac の Visual Studio Code から CentOS に ssh 接続する方法を見ていきます。

環境

Mac OS: macOS Mojave 10.14.16

Visual Studio Code: バージョン: 1.37.0

CentOS: CentOS Linux release 7.6.1810 (Core)

Visual Studio Code に Remote Development を追加する

まずは、Visual Studio Code に Remote Development 機能を追加しましょう。

Visual Studio Code を起動したら、左側の Extensions をクリック(または [shift][cmd][x])して、検索窓で「Remote Development」を検索します。

Remote Development の追加
Remote Development の追加

以下のような画面が表示されますので [Install] をクリックします。

Remote Development のインストール
Remote Development のインストール

ssh 接続用の秘密鍵を作成する

後述する ssh 接続の設定ファイルには、接続するホスト(Macです)に秘密鍵が必要です。

まずは、以下のコマンドで ssh ディレクトリに移動します。

cd ~/.ssh


もしも ssh ディレクトリが存在しない場合は、以下のコマンドを入力してディレクトリを作成してから移動します。

mkdir ~/.ssh
cd ~/.ssh
続いて、以下のコマンドで秘密鍵を作成します。
ssh-keygen -t rsa


以下のように、鍵を作成する場所、パスワード、確認用パスワードを聞かれます。全て[Enter]でも構いません。

秘密鍵の作成
秘密鍵の作成


が完了すると、以下の2つのファイルが作成されます。

  • id_rsa
  • id_rsa.pub

次に、以下のコマンドで Mac のキーチェーンに鍵を登録しておきます。

ssh-add -K /Users/hoge/.ssh/id_rsa

ssh 接続の設定を作成する

インストールが完了したら [shift] + [cmd] + [P] キーを押して、コマンドパレットを開き「Remote-ssh」と入力します。

一覧から「Remote-SSH Connetct to Host…」を選択し、「Configure SSH Hosts…」を選択します。編集する設定ファイルを聞かれるので任意のものを選択します。筆者は「/Users/hiroki/.ssh_config」を選択しました。

Remote-SSH Connect to Host の選択
Remote-SSH Connect to Host の選択
Configure SSH Hosts の選択
Configure SSH Hosts の選択
設定ファイルの選択
設定ファイルの選択


設定ファイルは以下のように作成します。

Host 任意の名前
    HostName 接続先IP または ホスト名
    User ユーザー名
    Port 接続先のポート番号
    IdentityFile 接続元の秘密鍵が配置してあるパス


筆者の編集した設定ファイルを以下に示します。IP アドレスはセキュリティの都合上 x.x.x.x としています。

Host CentOS
    HostName x.x.x.x
    User hiroki
    Port 22
    IdentityFile /Users/hiroki/.ssh/id_rsa


設定が完了したら、VSCode の左下にある[Remote-SSH] のアイコンをクリックし、[Connect to Host in New Windows] をクリックします。

CentOS への接続
CentOS への接続


次にパスワードの入力を求められます。パスワードを入力して [Enter] を押すと、CentOS へ ssh 接続することができます。

パスワードの入力
パスワードの入力


接続に成功すると、以下のように、接続先のディレクトリ一覧やターミナルが表示されます。

マウスでディレクトリを選択することもできますし、右クリックしてファイルを作成することもできます。またターミナルから操作することも可能です。

これで、VSCode を使用して開発が可能になります。

接続後の画面
接続後の画面
Please follow and like us:

コメント

タイトルとURLをコピーしました