~簡易版~ Mac Visual Studio Code に Remote Development を 導入 しよう

目的

• Remote Development の導入方法の簡易版を作成しより楽にリモートマシンに接続する方法を書く。
• リモート環境にあるUbuntu18.04に接続する方法を記載する。
• MacからUbuntu18.04に接続する方法を記載する。

実施環境

1. OS: macOS High Sierra 10.13.6
2. 機種: MacBook Pro (15-inch, Early 2011)
3. CPU: Intel(R) Core(TM) i7-2675QM CPU @ 2.20GHz

実施概要

1. Visual Studio Code導入
2. Remote Developmentを導入
3. sshの設定
4. 接続テスト

実施詳細

1. Visual Studio Code導入
   1. 下記記事を参考にVisual Studio Codeを導入する。Macの方はインストールする際にMac用のファイルをインストールする。
      Mac Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで～画像付き導入解説～←リンク先準備中です。
2. Remote Developmentを導入
   1. 下記リンク先に飛びInstallをクリックする。
      Remote Development
   2. Visual Studio Codeが起動しプラグインがインストールされる。

3. sshの設定

   1. ターミナルを開き下記コマンドを実行して~/.sshにconfigファイルを作成する。

      # viでconfigファイルを開きたい方
      $ vi ~/.ssh/config
      
      # nanoでconfigファイルを開きたい方
      $ nano ~/.ssh/config
      

   2. 前述のコマンド実行後にターミナル上でエディタが起動したら下記記載を最終行に追記する。
      
      ※記載内容は接続先のPC(Ubuntuマシン)情報に合わせて修正してください。

      Host 任意のわかりやすい接続先名
        HostName IPアドレス
        User 接続先ユーザ名
      
      # 筆者の環境の例
      Host extUbuntu
        HostName XXX.XXX.XXX.XXX
        User miriwo
      

   3. 保存してエディタを閉じる。

4. 接続テスト

   1. Visual Studio Codeを起動する。
   2. 正しくsshファイルに設定がなされていると、サイドバーにあるプラグインインストールアイコンのしたのRemote Developmentのアイコンをクリックした時に「SSH TERGET」直下にSSHのHostに記載した接続先名が記載される。(画像のextUbuntuと表示されている部分)
      
   3. サイドバーの「SSH TERGET」直下にSSHのHostに記載した接続先名を右クリック。(画像のextUbuntuと表示されている部分)する。
   4. 「Conect to Host in New Window」をクリックする。
   5. 新しくVisual Studio Codeが起動して下記の画面になるのでパスワードを入力してEnterを押す。(画面上部にパスワード入力窓が出ている)
   6. 少し待ってサイドバーを開いた時に下記画像のように「SSH:SSHで設定した接続名に接続済み」と出れば接続完了である。