「Visual Studio Code で極楽サーバーサイド開発環境を整えるための拡張機能紹介」

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

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

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

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

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

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

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

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

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|

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

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

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

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

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

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

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

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

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

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

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