Visual Studio Codeについて簡単に紹介しつつRemote DevelopmentのSSHとContainersについて詳しく解説します。
Visual Studio Codeとは？
Visual Studio Codeはvscodeと略されます。
Microsoft社が開発をおこなっている統合開発環境と呼ばれるものです。
Electronと呼ばれるものを使用しており、webページをアプリに変換したものが配布されています。
Remote Developmentとは？
vscodeには、拡張機能として多数のパッケージが公開されています。
Remote Developmentはvscodeの開発元である、Microsoftが提供している開発者向け便利ツールのことです。
vscodeの便利なところ５つ
まずは、vscodeの利点を５つ紹介します。
1. 軽い！
同社のVisual Studioに比べ起動時間が圧倒的に短く、ウインドウを複数表示しても動作が重くなりにくいです。
そのため、vscodeはIDE（統合開発環境）ながらテキストエディタとしても十分に使用することができます。
例えば、markdownと呼ばれる形式のテキストファイルの編集には、プレビュー機能とgitによる管理のことを含めるとvscodeを使用するのがbestです。
他にも、強力な文字列検索機能や置換機能、エクスプローラーなどテキストエディタとしても使える便利機能がしっかりとそなわっています。
2. ターミナルからcodeでファイルを開く！
ソフトウェアの開発などをしていると、ターミナル上での操作が増えます。
vscodeではcodeというコマンドが使用できるので、ターミナル上の操作からシームレスでファイルの操作を行うことができます。
3. GUIのGit機能でバージョン管理が楽！
ファイル編集の際に、「どこを変更したのかわからなくなってしまった！」「コメントアウトが後で使用するかもしれないの消したくても消せない」といった悩みを解決するのが、バージョン管理システムのGitです。
Gitの操作は本来ターミナル上からコマンドで行います。これでは初心者が分かりにくいため、いくつかのGUIツールが提供されています。
その一つがvscodeです。
vscodeでは、基本的なコマンドはすべてこなせる上に、ファイルの変更箇所を色付きで表示してくれます。また、mergeでコンフリクトした際もわかりやすいGUI表示がされるため、Gitが怖くなくなります。
4. 豊富で強力な拡張機能！
vscodeは、インストール直後は機能が豊富とはいえません。そのぶんだけ軽量なのですが、機能不足では意味がありません。
これを補って余りあるのが強力な拡張機能たちです。
世界中の人々によって開発される各緒機能ですが、なかでもMicrosoft公式のとびっきり便利なものをこの記事では丁寧に紹介します。
5. ブラウザ上でも使える！
vscodeがブラウザ上でも使用できるのは知っていましたか？
githubのリポジトリで「.」キーを押してみてください。vscodeが開きます。
下記はMicrosoftのリポジトリです。試しに開いてみてください。
https://github.dev/microsoft/vscode-remote-release
この機能を使用するとgithubでのファイルの編集がシームレスで可能ですね！
VScodeインストール方法
まずはvscodeをパソコンにインストールしましょう。
インストール後は、ターミナル上でcodeが使用できるかを確認しましょう。
このコマンドはターミナル操作を行う上で大きな助けになります。
Windows, Linuxの場合
Visual Studio Code
上記URLからダウンロードできます。
Macの場合
Macの場合は、brewのcaskを使用すると簡単です。
homebrewがない場合はホームページのスクリプトからインストールできます。
homebrew
vscodeのインストールコマンドです。
brew install --cask visual-studio-code
Remote Developmentについて
この記事の本題である、Remote Development (+α)について紹介します。
Remote DevelopmentとはMicrosoftから提供されている、開発者向けの拡張機能です。
主に３種類のパッケージが内蔵されています。
Remote Development
├─ Remote - SSH
├─ Remote - Containers
└─ Remote - WSL
.
└─ Remote - SSH: Editing Configuration FilesRemote Development
SSH, Containers, WSLをまとめたパックです。
パッケージ３つがまとめてインストールされます。
Remote - SSH
vscodeからSSHを使用してサーバー上フォルダやファイルを編集できるようなる拡張機能です。
Remote - Containers
vscodeからDockerを使用してコンテナ内のフォルダやファイルを編集できるようになる拡張機能です。
Remote - WSL
vscodeからWSL内のフォルダやファイルを編集できるようなる拡張機能です。
WSLとはWindows Subsystem for Linuxの略でWindows上で使用します。
Remote - SSH: Editing Configuration Files
SSH設定ファイルを編集する際に役立つ拡張機能です。
構文に色をつける機能、キーワードインテリセンス、スニペットを追加します。
今回はこの中から、特にSSHとContainersについて紹介します。
Remote SSH
Remote SSHはsshをvscode上から使用できる機能です。
ホームページやブログのためにサーバーで作業を行うといった時に活躍します。
(アメリカ語はわからん！という方は雰囲気でお楽しみください)
ファイルやフォルダーが編集できるので、FTPアプリのような操作も可能です。
FTPターミナルとFTPアプリを交互に操作しながら行なっていたサーバー作業が、vscodeひとつになるため作業効率が改善します。
使い方
下記のリンクからインストールが行えます。
Remote - SSH: Editing Configuration Files
Remote Continer
vscode上からコンテナに接続する拡張機能です。
コンテナとはDockerという仮想環境アプリケーションで作ることができる仮想環境のことです。
仮想環境をつくることで、（ホストマシンの）ローカルとはアプリの有無やバージョンを分けることができます。
複数のプロジェクトごとに環境を管理できるので、開発者にとってはとてもありがたい存在です。
なお、他社のIDEではコンテナに接続する機能は有料となっているところもあるので、無料で使用することのできるvscodeは強いですね。
使い方
ここでは試しにpythonの仮想環境を作成します。
まずは、必要なアプリケーションがあることを確認します。
- Docker
Mac版では下記のコマンドでインストールできます。
brew install --cask docker
dockerについて
・docker desktop
├─ docker engine
└─ docker composeDocker Desktopは2022/4/10現在、Mac/Windows版があります。
その他のOSを使用している、大規模な商用利用のためDocker Desktopを利用できないなどの理由がある場合はDcoekr engineとDcoekr Composeをそれぞれインストールしてください。
インストールを行ったら、dockerを起動してください。
サンプルプロジェクトの作成
下記のようにDockerfileを作成すれば、すぐにvscodeでコンテナを作成できます。
別バージョンのPythonで、プログラムを試したい時に便利です。
Dockerfile
FROM python- vscode左下のリモートウインドウ、を開く
2. 「Reopen in Container」を選択する
ビルドが開始されます。
しばらくするとコンテナのターミナルが開きます。
ここでは、ローカルPCの環境と別れているので開発・検証が行いやすく、内部で破壊的な操作をおこなったとしてもホストマシンに影響はでませんし、リビルドを行えばコンテナも元通りになります。
下記画像では、簡単なpythonスクリプトを実行しています。
FastAPIを使ったサンプルプロジェクト
FastAPIのプロジェクトを自動で生成できるサンプルプロジェクトを用意しました。
ぜひ、確認してみてください。
公式のサンプルプロジェクト
上記の二つは手動で作成しましたが、公式で各言語のサンプルが用意されています。
詳しくは解説しませんが、参照方法をご紹介します。
/.devcontainerについて
.devcontainer/devcontainer.jsonには、開発用コンテナで使用する環境設定を記載できます。
設定が記載されたDockerfileやdocer-compose.ymlを指定しても良いです。
設定のコツ
Dockerfileに記載された内容が、buildされるとDocker imageとなります。
devcontainer.jsonの"onCreateCommand"には、コンテナ起動後の処理が記述できます。
Dockerfile
build時に実行される。
vscode上のフォルダはコンテナにbindはされていないので、フォルダ内の依存関係を元にパッケージインストールなどはできません。
"onCreateCommand"
コンテナ起動時に実行するコマンドを記載できます。
フォルダーがbindされた後に実行されるので、bashスクリプトを指定することでパッケージインストールやその他の任意コマンドが実行できます。
vscodeで開いているフォルダーの内容はコンテナの中のフォルダーと同期されます。
これはDockerの機能で、bindと呼ばれるものになります。
bindはコンテナ作成後にコンテナと同期されるため、Dockerfileのbuild時点ではフォルダーの内容がないことになります。
docker-compose.ymlで設定する
docerk-composeを設定することで、二つ以上のコンテナを使用することもできます。
vscodeを２つのウインドウをで開き、それぞれのディレクトリでReopen in containerを実行します。
exa-app
├─ frontend-app <-- Reopen in container
└─ backend-app <-- Reopen in containerまた、docker-composeを設定しておくことで開発環境から本番環境への切り替えが作業が少なくすみます。
設定方法
devcontainer.jsonの"dockerComposeFile"にdocker-composeのpathを設定します。
まとめ
今回は、vscodeについての記事でした。
サンプルプロジェクトの作成には時間がかかりましたが、よくできたと思います。
ぜひ確認してみて下さい。
サンプルプロジェクトについて気がついた点などあれば、issueやコメントなどで教えていただけると助かります。
ここまでお読みいただき、ありがとうございました。
コメント