Visual Studio Code Remote Developmentのメモ

# 概要

Visual Studio Code 1.35より正式に利用できるようになったRemote Developmentのセットアップとリモート(WSL、Dockerコンテナ、AWSのEC2)へ接続する方法を確認した時のメモです。
また、リモート開発の感触を確かめるため、リモート側にPythonをインストールしVS Codeでサンプルコードを書いて実行するというところまでやってみました。

**環境**

* Windows 10 Professional 1903
* Visual Studio Code 1.35.1 (system setup)
* Remote Development Extension Pack 0.15.0

**参考**

* [VS Code Remote Development] (https://code.visualstudio.com/docs/remote/remote-overview)
* [Remote Development Tips and Tricks] (https://code.visualstudio.com/docs/remote/troubleshooting#_installing-a-supported-ssh-client)

# Remote Development

## インストール

マーケットプレースから`Remote Development Extension Pack`を検索してインストールします。これをインストールすると`Remote - WSL`、`Remote - Containers`、`Remote - SSH`などがインストールされます。
![rd_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/efd9b455-23af-923a-2f99-7e5e19f8c125.png)

インストールが終わると、サイドバーに`Remote-SSH`のアイコンと、ステータスバーの左端に図の`Remote Development`のアイコンが追加されます。
![status.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/84f90308-087f-d489-15f8-2ad31f407cf6.png)

# Remote WSL

`Remote WSL`を利用してWSL(Windows Subsystem for Linux)にインストールしたUbuntu 18.04に接続します。

## Ubuntu 18.04の準備

Microsoft storeからUbuntu 18.04をインストールします。

```text:インストール後のバージョン確認
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.2 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.2 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
```

Ubuntu 18.04をインストールした後に、[WSLのUbuntu環境を日本語化する](https://www.atmarkit.co.jp/ait/articles/1806/28/news043.html)を参考に日本語化します。

### Pythonのインストール

Python3はすでにインストールされている状態でした。

```bash
$ python3 --version
Python 3.6.8
```

pipはインストールされていなかったので下記のコマンドでインストールしました。

```bash
$ sudo apt install python3-pip
$ sudo -H pip3 install --upgrade pip
```

```bash
$ pip --version
pip 19.1.1 from /usr/local/lib/python3.6/dist-packages/pip (python 3.6)
```

## 接続する

ステータスバーの`Remote Development`アイコンをクリックするか、<kbd>Ctrl + Shift + P</kbd>から"remote-wsl"と入力し、`Remote-WSL: New Window`を選択します。
新しいVS Codeが立ち上がり、接続が開始されるとUbuntuにVS Codeの拡張機能がインストールされます。
![connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fd171683-3849-e9d3-aff7-d8fd6b802ea7.png)
接続が完了するとステータスバーの表記が`><`から`>< WSL`に変わります。
![wsl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7e654183-f244-6704-719a-9c9a65726723.png)

### エクスプローラで"フォルダーを開く"

"フォルダーを開く"をクリックするとUbuntuのディレクトリが表示されます。デフォルトでユーザーのホームディレクトリが選択候補に表示されていますが、階層を移動して別のディレクトリを開くこともできます。ここではそのままOKボタンを押してユーザーホームディレクトリを開きました。
![folder_open1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/6eaf1708-96ec-40b2-00d5-35b6376c1f26.png)
ユーザのホームディレクトリを開いた状態です。ちなみにWSLのコンソールからファイルやディレクトリを変更（作成や削除）すると、それが即座にVS Codeの表示に反映されます。
![folder_open2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/54c5eaa8-4d2c-d45f-43b8-6cd0e74df71a.png)

## 拡張機能

Ubuntu上でPythonのコードを書くためにPythonの拡張機能のインストールしてみます。

### Pythonの拡張機能をインストール

WSLに接続しているVS CodeでPythonの拡張機能をインストールすると、図のようにインストール先がWSL（インストール on WSL）になります。（必ずしもWSLにインストールされるわけではなく、拡張機能によってインストールできる先が決まっているようです）
![python1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/100385e2-bf2a-29e5-2eaa-2843ca7dab40.png)
サイドバーを見るとインストール先がLocalとRemote(WSL, Container, SSH)で分かれており、Pythonの拡張機能はWSLにインストールされたことが分かります。もしLocal(Windows)上でもPythonのプログラムを書くときは、別途Localへもインストールする必要があります。
![python2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/928208ad-a8da-e40b-421b-aba098b92680.png)

### pylintのインストール

拡張子がpyというファイルを作成しエディタ画面で開くと、Linterが1つもインストールされていない場合、ダイアログウィンドウが表示されLinterをインストールするか選択する画面が表示されます。
![pylint1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/55aeb4a6-9138-8db7-be48-c07f94d9e2c8.png)
Installボタンを押してインストールするとpipコマンドでpylintのインストールが始まり、その経過がVS Codeのターミナルで確認できます。
![pylint2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/48008a04-eb52-fc71-a3e0-bc04b34fe490.png)

WSLのコンソールでパッケージを確認すると、このようにpylintがインストールされたことが分かります。

```bash
$ pip show pylint
Name: pylint
Version: 2.3.1
Summary: python code static checker
Home-page: https://github.com/PyCQA/pylint
Author: Python Code Quality Authority
Author-email: code-quality@python.org
License: GPL
Location: /home/rubytomato/.local/lib/python3.6/site-packages
Requires: isort, mccabe, astroid
Required-by:
```

## サンプルコード

`helloworld.py`というファイルを作成し、"Hello World!"を表示するコードを書いて実行してみます。
コードを書くときは図のようにコードアシストが機能します。
![helloworld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f28364d5-53fc-a68e-3f1e-0bd60f994212.png)
サンプルコードを実行するには、マウスを右クリックしてメニューから`Run Python File in Terminal`か<kbd>Ctrl + Shift + P</kbd>から"Python: Run Python File in Terminal"を選択します。

```python
#!/usr/bin/env python3

from datetime import datetime

print("Hello World!")
print(datetime.now().strftime("%Y-%m-%d (%a) %H:%M:%S"))
```

実行結果はターミナルに表示されます。
![run_python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/804deb19-536b-a6e2-bf68-9bdc2426985f.png)

# Remote Containers

`Remote Containers`を利用してDocker Desktop for WindowsとUbuntuオフィシャルイメージで作成したUbuntuコンテナに接続します。
起動済みのコンテナに接続するという方法の他に、Dockerfileやdocker-compose.ymlからコンテナを作成して接続するという方法もあるようですが、今回は試していません。

## Ubuntuコンテナの準備

オフィシャルイメージのバージョン18.10を利用しました。

```
PS> docker image pull ubuntu:18.10
PS> docker image ls
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE
ubuntu                     18.10               6f73120de66c        10 days ago         67.3MB
docker4w/nsenter-dockerd   latest              2f1c802f322f        8 months ago        187kB
```

コンテナを起動します。

```
PS> docker run --name my-ubuntu -it ubuntu:18.10 bash
root@e12e8ae607ee:/# cat /etc/os-release
NAME="Ubuntu"
VERSION="18.10 (Cosmic Cuttlefish)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.10"
VERSION_ID="18.10"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=cosmic
UBUNTU_CODENAME=cosmic
```

初期設定として、パッケージの更新と以下のコマンドを続けて実行しました。

```bash
root@e12e8ae607ee:/# apt update
root@e12e8ae607ee:/# apt upgrade -y
```

日本語化パックのインストール

```bash
root@e12e8ae607ee:/# apt install -y language-pack-ja
```

vimのインストール

```bash
root@e12e8ae607ee:/# apt install -y vim
```

LANGの設定

```bash
root@e12e8ae607ee:/# export LANG=ja_JP.UTF-8
```

.bashrcの編集

```
LANG=ja_JP.utf8
export LANG
```

タイムゾーンの設定

```bash
root@e12e8ae607ee:/# apt install -y tzdata
```

### Pythonのインストール

下記のコマンドでPythonとpipをインストールしました。

```bash
root@e12e8ae607ee:/# apt install -y python3
root@e12e8ae607ee:/# apt install -y python3-pip
root@e12e8ae607ee:/# pip3 install --upgrade pip
root@e12e8ae607ee:/# pip --version
pip 19.1.1 from /usr/local/lib/python3.6/dist-packages/pip (python 3.6)
```

pylintのインストール

```bash
root@e12e8ae607ee:/# pip install pylint
root@e12e8ae607ee:/# pylint --version
pylint 2.3.1
astroid 2.2.5
Python 3.6.8 (default, Apr  9 2019, 04:59:38)
[GCC 8.3.0]
```

## 接続する

ステータスバーの`Remote Development`アイコンをクリックするか、<kbd>Ctrl + Shift + P</kbd>から"remote-wsl"と入力し、`Remote-Containers: Attach to Running Container...`を選択します。
アタッチできるコンテナが自動的に表示されるので接続したいコンテナを選択します。
![attach-container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/14b64600-2a25-8e99-f6cd-1110e4a894c5.png)

新しいVS Codeが立ち上がり、接続が開始されるとコンテナにVS Codeの拡張機能がインストールされます。
![connect-container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a7116759-6e25-c81b-f5c0-320e9857bbdf.png)
接続が完了するとステータスバーの表記が`><`から`>< Attached Container ubuntu:18.10 (/my-ubuntu)`に変わります。
![status2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/354f2fec-7ab9-cb82-0dcb-aa1891867cdc.png)

## エクスプローラで"フォルダーを開く"

![folder_open3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e3033589-a554-3e78-dfa8-8814677112bb.png)

![folder_open4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/102ceb24-fe2a-0b82-bc5e-0fcabb8f90d2.png)

## 拡張機能

コンテナ上でPythonのコードを書くためにPythonの拡張機能のインストールしてみます。以下`Remote WSL`と同じ操作になりますので説明は省略します。

### Pythonの拡張機能をインストール

![python3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/24a8a01a-5732-ef98-b030-22dd9b7a2674.png)
![python4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/c2366ef7-2856-cc36-19cc-6a6880c00a6b.png)

## サンプルコード

`helloworld.py`というファイルを作成し、"Hello World!"を表示するコードを書いて実行してみます。事前にpylintをインストールしているのでVS Code上でインストールするか確認されることはありません。

```python
#!/usr/bin/env python3

from datetime import datetime

print("Hello World!")
print(datetime.now().strftime("%Y-%m-%d (%a) %H:%M:%S"))
```

WSLのときと同じように実行してみます。Dockerコンテナでも実行結果がVS Codeのターミナルに表示されました。
![run_python2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/83fa0963-08b5-c726-be6b-fd74817b2d1e.png)

# Remote SSH

`Remote SSH`を利用してAWSのEC2に接続します。

## SSHクライアントのインストール

SSHはWindows OpenSSH Clientを利用します。インストールの仕方は[Windows Server 2019 および Windows 10 の OpenSSH のインストール] (https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse)を参考にしました。
PowerShellを管理者権限で起動し下記のコマンドを実行します。インストールが出来ていると次のように表示されます。

```PS
PS> Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'

Name  : OpenSSH.Client~~~~0.0.1.0
State : Installed

Name  : OpenSSH.Server~~~~0.0.1.0
State : NotPresent
```

## EC2の準備

SSH接続に必要なキーペアとSSH接続可能なEC2インスタンを作成します。作成の手順などは割愛します。

### Pythonのインストール

EC2の準備ができたらTeraTermなどのターミナルソフトで接続し、下記のコマンドでPythonをインストールしました。

```bash
$ sudo yum install -y python3
$ sudo -H pip3 install --upgrade pip
$ python3 --version
Python 3.7.3
```

```bash
$ pip --version
pip 19.1.1 from /usr/local/lib/python3.7/site-packages/pip (python 3.7)
```

### .ssh/configの編集

AWSコンソールでキーペアを作成したときにダウンロードした秘密鍵(.pem)をユーザホームディレクトリの.sshに配置し、configファイルを編集して接続先を設定します。接続先ホスト名は`aws-ec2`としました。

```
Host aws-ec2
  HostName ec2-xxx-xxx-xxx-xxx.ap-northeast-1.compute.amazonaws.com
  User ec2-user
  Port 22
  IdentityFile "/path/to/***.pem"
```

OpenSSHクライアントで接続できるか確認します。

```bat
> where ssh
C:\Windows\System32\OpenSSH\ssh.exe

> ssh aws-ec2


       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
[ec2-user@ip-172-30-0-205 ~]$
```

## 接続する

サイドバーの`Remote-SSH`のアイコンをクリックするとconfigに記述した接続先ホスト名が表示されます。
追加した`aws-ec2`の右側に表示されているアイコン(Connect to Host in New Window)をクリックします。
![connect-aws.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7f57985d-a22b-a49f-4dcb-bfa10ac3ecc5.png)
新しいVS Codeが立ち上がり、接続が開始されるとEC2インスタンスにVS Codeの拡張機能がインストールされます。
![aws_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/81d482e7-f9f5-13be-fa94-afc75d5cad06.png)
接続が完了するとステータスバーの表記が`><`から`>< SSH:aws-ec2`に変わります。
![status3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0e52d606-52de-375d-b836-72c1c9b3cc1f.png)

## エクスプローラで"フォルダーを開く"

![folder_open5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/840bb5ab-43ad-71e5-82ad-a406b745dc76.png)
![folder_open6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8491c7ad-a9c9-d121-114c-ef199d971751.png)

## 拡張機能

EC2インスタンス上でPythonのコードを書くためにPythonの拡張機能のインストールしてみます。以下`Remote WSL`と同じ操作になりますので説明は省略します。

### Pythonの拡張機能をインストール

![python5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b927e3d0-5828-0c5c-f70c-60ebb3046212.png)

![python6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2eedf348-4eb4-8d8a-24b7-18809e5ccd83.png)

## サンプルコード

`Remote-WSL`と`Remote-Container`と同じコードを書いて実行してみました。
![run_python3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5038d2e1-f9df-32c1-9e31-db641c5ec698.png)