57
63

More than 5 years have passed since last update.

Visual Studio Code Remote Developmentのメモ

Last updated at Posted at 2019-06-30

概要

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

参考

Remote Development

インストール

マーケットプレースからRemote Development Extension Packを検索してインストールします。これをインストールするとRemote - WSLRemote - ContainersRemote - SSHなどがインストールされます。
rd_01.png

インストールが終わると、サイドバーにRemote-SSHのアイコンと、ステータスバーの左端に図のRemote Developmentのアイコンが追加されます。
status.png

Remote WSL

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

Ubuntu 18.04の準備

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

インストール後のバージョン確認
$ 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環境を日本語化するを参考に日本語化します。

Pythonのインストール

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

$ python3 --version
Python 3.6.8

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

$ sudo apt install python3-pip
$ sudo -H pip3 install --upgrade pip
$ pip --version
pip 19.1.1 from /usr/local/lib/python3.6/dist-packages/pip (python 3.6)

接続する

ステータスバーのRemote Developmentアイコンをクリックするか、Ctrl + Shift + Pから"remote-wsl"と入力し、Remote-WSL: New Windowを選択します。
新しいVS Codeが立ち上がり、接続が開始されるとUbuntuにVS Codeの拡張機能がインストールされます。
connect.png
接続が完了するとステータスバーの表記が><から>< WSLに変わります。
wsl.png

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

"フォルダーを開く"をクリックするとUbuntuのディレクトリが表示されます。デフォルトでユーザーのホームディレクトリが選択候補に表示されていますが、階層を移動して別のディレクトリを開くこともできます。ここではそのままOKボタンを押してユーザーホームディレクトリを開きました。
folder_open1.png
ユーザのホームディレクトリを開いた状態です。ちなみにWSLのコンソールからファイルやディレクトリを変更(作成や削除)すると、それが即座にVS Codeの表示に反映されます。
folder_open2.png

拡張機能

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

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

WSLに接続しているVS CodeでPythonの拡張機能をインストールすると、図のようにインストール先がWSL(インストール on WSL)になります。(必ずしもWSLにインストールされるわけではなく、拡張機能によってインストールできる先が決まっているようです)
python1.png
サイドバーを見るとインストール先がLocalとRemote(WSL, Container, SSH)で分かれており、Pythonの拡張機能はWSLにインストールされたことが分かります。もしLocal(Windows)上でもPythonのプログラムを書くときは、別途Localへもインストールする必要があります。
python2.png

pylintのインストール

拡張子がpyというファイルを作成しエディタ画面で開くと、Linterが1つもインストールされていない場合、ダイアログウィンドウが表示されLinterをインストールするか選択する画面が表示されます。
pylint1.png
Installボタンを押してインストールするとpipコマンドでpylintのインストールが始まり、その経過がVS Codeのターミナルで確認できます。
pylint2.png

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

$ 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
サンプルコードを実行するには、マウスを右クリックしてメニューからRun Python File in TerminalCtrl + Shift + Pから"Python: Run Python File in Terminal"を選択します。

#!/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

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

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

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

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

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

vimのインストール

root@e12e8ae607ee:/# apt install -y vim

LANGの設定

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

.bashrcの編集

LANG=ja_JP.utf8
export LANG

タイムゾーンの設定

root@e12e8ae607ee:/# apt install -y tzdata

Pythonのインストール

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

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のインストール

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アイコンをクリックするか、Ctrl + Shift + Pから"remote-wsl"と入力し、Remote-Containers: Attach to Running Container...を選択します。
アタッチできるコンテナが自動的に表示されるので接続したいコンテナを選択します。
attach-container.png

新しいVS Codeが立ち上がり、接続が開始されるとコンテナにVS Codeの拡張機能がインストールされます。
connect-container.png
接続が完了するとステータスバーの表記が><から>< Attached Container ubuntu:18.10 (/my-ubuntu)に変わります。
status2.png

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

folder_open3.png

folder_open4.png

拡張機能

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

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

python3.png
python4.png

サンプルコード

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

#!/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

Remote SSH

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

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

SSHはWindows OpenSSH Clientを利用します。インストールの仕方はWindows Server 2019 および Windows 10 の OpenSSH のインストールを参考にしました。
PowerShellを管理者権限で起動し下記のコマンドを実行します。インストールが出来ていると次のように表示されます。

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をインストールしました。

$ sudo yum install -y python3
$ sudo -H pip3 install --upgrade pip
$ python3 --version
Python 3.7.3
$ 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クライアントで接続できるか確認します。

> 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
新しいVS Codeが立ち上がり、接続が開始されるとEC2インスタンスにVS Codeの拡張機能がインストールされます。
aws_setting.png
接続が完了するとステータスバーの表記が><から>< SSH:aws-ec2に変わります。
status3.png

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

folder_open5.png
folder_open6.png

拡張機能

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

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

python5.png

python6.png

サンプルコード

Remote-WSLRemote-Containerと同じコードを書いて実行してみました。
run_python3.png

57
63
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
57
63