2020年8月13日　これからのリモートワークに役に立つ！ツールの使い方TIPSお披露目会　FGDC勉強会vol.4 株式会社ビヨンド　萬代陽一 「Visual Studio Code で極楽サーバーサイド開発環境を整えるための拡張機能紹介」

1. Visual Studio Code で極楽サー
バーサイド開発環境を整える
ための拡張機能紹介
株式会社ビヨンド 萬代陽一

2. 自己紹介
萬代 陽一
株式会社ビヨンド システム開発部所属
ビヨンドに Visual Studio Code 教を広めたザビエル的
存在（だと勝手に思っている）。
暇があれば VSCode のブログ記事を上げている。
カマキリは好きではないが、息子と一緒に写真を取るた
め頑張った。

3. VSCode 使ってますか！！
ウェブシステムを開発するなら非常に使いやすい！
なぜなら！
Remote Development があるから！
早速どうやるのか見てみましょう！

4. Remote Development 以前
ローカル上に
Visual Studio Code と 実行環境が
同居する構成

5. Remote Development 以降
Amazon EC2
GCP
Compute
Engine
Azure VMs
Visual Studio Code 実行環境とコード

6. Remote Development なら
vagrant でも効果あり！
- 気軽に試せる
- ファイル同期を発生させないような作りでストレスが減る
続いては
クラウド上の VM に接続して開発を進める手順を見ていきます

7. Remote – SSH を使ってみる
VSCode の拡張機能を用意する
Remote Development という拡張機能をインストールすると
- Remote – SSH
- Remote – WSL
- Remote – Containers
の3つが一気に揃うので便利

8. Remote – SSH を使ってみる
秘密鍵、公開鍵のキーペアを生成する
ssh-keygen コマンド
Windows 上でも使えるようになってた
Windows 10(1803 以降)
コマンドプロンプト、PowerShell、 Git Bash (MinGW)
で使用可能！

9. Remote – SSH を使ってみる
C:¥Users¥manda>ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:¥Users¥manda/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:¥Users¥manda/.ssh/id_rsa.
Your public key has been saved in C:¥Users¥manda/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:DpU1lMD55u0VaTdWfEC6VdvVcBoM/RUOEKt7AqCndTE manda@DESKTOP-686P0EF
The key's randomart image is:
+---[RSA 2048]----+
| ..++++*==*|
| oo....==X|
パスワードなしでキーを作成する

10. Remote – SSH を使ってみる
VM を起動する
今回は GCP でインスタンスを
立ち上げてみました。

11. Remote – SSH を使ってみる
GCE はインスタンス作成時に
セキュリティタブで
公開鍵が貼り付け可能！
後は作成ボタンを押すだけ！

12. Remote – SSH を使ってみる
VSCode から接続する
ssh コマンドで
接続することもできますが、開発中は毎日接続することになるの
で設定ファイルに書き込んでしまった方が便利！
ということで、設定ファイルを作ります

13. Remote – SSH を使ってみる
設定ファイルを作る
VSCode で使う
SSH の設定ファイルは
ssh_config と同じ
# 雛形
Host fgdc-test
HostName xx.xx.xxx.xxx
User manda
Port 22
UserKnownHostsFile /dev/null
StrictHostKeyChecking no
PasswordAuthentication no
IdentityFile C:/Users/manda/.ssh/id_rsa
IdentitiesOnly yes
LogLevel FATAL
ForwardAgent yes

14. Remote – SSH を使ってみる
HostName
ドメイン、もしくは IP
User
ログインユーザー名
IdentityFile
公開鍵とペアの秘密鍵のフルパス
辺りに気を付ければ OK
# 雛形
Host fgdc-test
HostName xx.xx.xxx.xxx
User manda
Port 22
UserKnownHostsFile /dev/null
StrictHostKeyChecking no
PasswordAuthentication no
IdentityFile C:/Users/manda/.ssh/id_rsa
IdentitiesOnly yes
LogLevel FATAL
ForwardAgent yes

15. Remote – SSH を使ってみる
設定してしまえばリストから選択するだけで
接続できるようになるので便利です。

16. Remote – SSH を使ってみる
動いている様子を見てみましょう！

18. Remote Development とリモートワーク
リモートワーク、オフィスで作業環境は変わらない
ハイスペックな据え置き PC はいらなくなる
会社的には VSCode が程よく動くノート PC を
従業員にあてがえばいいだけ
ただし接続元が自宅 IP アドレスなので
IP 制限はせず 鍵認証 + パスワード の組み合わせが最適解
もしくは VPN （速度的に厳しい時もある）

19. Remote Development とリモートワーク
チームコラボレーションについて
AMI やスナップショット機能を駆使して
環境構築が一瞬でできる
公開鍵を登録すればチームメンバーの開発環境を覗ける
VSCode を通じて同じコードを見ながら開発できる
→ zoom、 meet、 teams、 skype などを併用すれば
ペアプロやり放題

20. まとめ
• VSCode のリモート開発を使うと、拡張機能はサーバーサイドで動くもの
とクライアントで動くに分かれる
• VSCode から SSH で VM に接続してリモート開発を行う環境構築の手順
は意外と簡単
• 作業用 PC はマシンスペック要求が一気に下るのでノート PC で十分
• リモートワーク中でも始められます
• オフィス勤務になっても誰も損しません

21. ご清聴ありがとうございました！