Visual Studio Codeで始める リモート開発入門 日本仮想化技術株式会社 VirtualTech.jp 2023/05/20 1

2 自己紹介

● リモート開発って何？ ● Visual Studio Codeといえば、ローカルマシンで動くデスクトップ版のエディタじゃないの？ ● 実際に使ってみようとしたらどうすればいいの？ 今回の話 3

リモート開発とは？ 4

リモート開発とは？ ● コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機 能 ● ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築する メリット ● ローカルマシンの構成に影響を与えないように、開発環境を分離できる ○ ローカルにソースコードを置く必要がない ● 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる ● ローカルマシン以外で実行されているアプリケーションをデバッグできる 5 https://code.visualstudio.com/docs/remote/remote-overview

Visual Studio Codeとは？ 6

● Visual Studio Code=VS Code、code ● 主な機能 ○ シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト ● 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発 ○ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など ● ブラウザー版で一定の成功を納めたのち、より高みを目指してデスクトップ版の開発にも着手 ○ Electron上で構築 ● 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表 ○ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている ○ 統合開発環境(IDE)とテキストエディターの中間的な位置付け ● 2015年11月にオープンソースとして公開 ○ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル) ○ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた ● 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能 ● リリースサイクルは、毎月第1金曜あたり。 ○ Youtubeでリリースパーティがライブ配信される Visual Studio Codeとは？ 7

リモート開発の始め方 8

必要な拡張機能の種類 VS Codeは、拡張機能をインストールして使い勝手をよくしていくもの リモート開発向けに拡張機能パックをインストール ● Remote - SSH ○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用 ● Remote - Tunnels ○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用 ● Dev Containers ○ ローカルマシンからDocker上のコンテナを開発環境として使用する ● WSL ○ WindowsのWSLを開発環境として使用する GitHub Codespaces ● GitHubが提供しているCodespacesの環境を開発環境として使用する 9

開発環境の選択肢 10

※1 仮想化技術の1つであるDockerやVirtualboxを前提 ※2 AWSのCloud9などがある ※3 GitHubが提供するホスティングサービスを前提 開発環境の選択肢 11 拡張機能 Remote - SSH Remote - Tunnel Dev Containers GitHub Codespaces ローカルマシン上 - - - - ローカルマシンの仮想環境上※1 ⚫ - ⚫ - クラウド上※2 ⚫ ⚫ ⚫ - ホスティングサービス上※3 - - - ⚫

GitHub Codespaces/Dev container 12

GitHub Codespacesとは 13 ● クラウドでホストされる開発環境 ○ GitHubのDockerコンテナ内でホストされる ○ Ubuntuイメージから作成 ■ 人気の高いプログラミング言語の実行環境がプリインストール済み ● 従量課金制 ○ 毎月無料枠の付与あり ■ 無料枠を超えて使用する場合には、設定変更が必要 ● スペック ○ 最小：2コア、8GB RAM、32GBストレージ ○ 最大：32コア、64GB RAM、128GBストレージ ● Configuration-as-Code：CaC ○ 構成ファイルでプロジェクトをカスタマイズできる ● 自動停止 ○ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)

14 https://docs.github.com/ja/codespaces/overview

A：できる ● 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる ● 手動で転送設定も可能 ● ポート公開設定は、プライベートが初期設定 ○ ① 自分のみ ○ ② 組織内メンバーの限定アクセス ○ ③ URLを知っている人の限定アクセス Webアプリを実行したらブラウザからアクセスできる？ 15

A：できる ● 次の場合は、追加設定不要で接続できる ○ ローカルホストポートを使用している場合 ○ リモートドメインのパブリックポートにアクセスする場合 ● リモートのプライベートポートに接続する場合は、認証情報をリクエストに付与する必要あり APIクライアントから接続することはできる？ 16

Codespaceを作成しよう 17

①-1 GitHub上からデフォルト設定で作成 ● 「Codeボタン」＞「Codespacesタブ」をクリック ● 「Create codespace on main」をクリック ①-2 GitHub上からスペックやブランチを指定して作成 ● 「・・・」から「New with options…」クリック ② Visual Studio Codeから作成 ● 拡張機能から作成できる(省略) Codespaceの作成 18

19

デスクトップ版のVS Codeから起動するようにするには？ A：設定変更でデスクトップ版VS Codeから起動できる GitHubのデフォルト設定ではWeb版のVS Codeで起動するが、 個人設定画面から設定変更できる 20

構成ファイルを作成しよう 21

拡張機能をインストール https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces 22

拡張機能を使用する際の注意点 ● なにかとお世話になることが多いからこそできるだけ安全に使いたい ● マーケットプレイスからインストールしても100%安全ではない ○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ○ マーケットプレイス側で配信時などにチェックされているが 「羊の姿をしたオオカミ」が潜んでいる可能性もある ○ 拡張機能にコード署名の付与開始して、移行期間中 ■ v1.75でアナウンスされた ■ 2022/11以降のアップロード分は必須。他は順次 ポイント ● マーケットプレイスからダウンロード ● 認証バッチが付いている ○ 2021年に追加された機能 ○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み ● ダウンロード数 ○ 同じ名前でも大きく違う場合があり、気づくきっかけになる 23 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

コマンドパレットから起動 ● コマンドパレットから設定ファイルの作成を開始 ● いくつかの質問に答える 24

構成ファイルの作成方法を選択 ● 上段 ○ 既に作成済みの構成ファイルを編集する場合に選択する ● 下段 ○ 新しい構成ファイルを作成する場合に選択する 25

ベースとするイメージを選択 ● チェックマークのバッチがついているものはDev Container拡張機能が公式で提供しているもの ● 右端のインフォメーションアイコンをクリックして作成者が信頼できるか確認を 26

Nodeのバージョンを選択 ● Node.jsは最新版と推奨版の2バージョンを配信している ● 今回は推奨版を使用(資料作成時点では18.xが最新) 27

追加機能を選択 選択しなくてもOK ● コンテナのベースイメージに追加するツールを選択することで、手軽にセットアップできる ○ AWS CLIやDockerコマンドなど 28

構成ファイルを作成したら再構築 ● 構成ファイルを変更したら、再構築するまでは環境に反映されない 29

構成ファイルの書き方を理解しよう 30

実際の設定ファイルのイメージ 31

主な設定項目 32 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build (別スライドにて) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧：https://containers.dev/features forwardPorts (省略) postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)

customizationsで設定できること ● インストールすべき拡張機能の指定やVS Codeの設定が定義できる ● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations": { "vscode": { "extensions": [], "settings": {}, } } } 33 設定項目 説明 extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できる settings settings.jsonファイルで定義できる内容が指定できる

独自で定義したイメージを作成することはできる？ A：できる Dockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加す ることで、使用することができます。 参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。 Dockerfileの場合 { “build”: { “dockerfile”: “Dockerfile”, “context”: “.” } } 34 docker-compose.ymlの場合 { “dockerComposeFile”: “docker-compose.yml”, “service”: “devcontainer”, “workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}” }

Remote - SSH 35

Remote - SSH ● リモートマシンにSSHを使って接続するための拡張機能 ● 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる ● CLIコマンドに不慣れな人やファイル編集やログファイルの調査などの時にUI機能を活用できる ● 開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け 36

リモートな環境を用意(AWS編) ● AWSでEC2を作成して、SSHの接続情報を取得 37

SSHの設定ファイルを追加 SSHの設定ファイル(~/.ssh/config)に追加 Host remotessh HostName ec2-xxxx.ap-northeast-1.compute.amazonaws.com User ec2-user IdentityFile ~/.ssh/xxxxx.pem 38

SSHでEC2に接続 ● アクティビティバー＞リモートエクスプローラーを選択 ● リモートを選択して接続 39

接続完了 ● Remote: SSHで接続した場合は、このように見える 40

最後に 41

● ローカル開発環境以外の選択肢に目を向けて、リモート開発に入門 ● 拡張機能などがプレビュー版なので、実践投入はもう少し様子見したい気持ち ● ローカルを汚さない環境は魅力があるので、今後も前向きに調査継続 ● 今回で”リモート開発を完全に理解した”ので、実践投入してその後の経過をまとめたい 最後に 42

お知らせ 5/28開催のOpen Source Conference 2023 Nagoya オフライン展示に参加します かんたんDevOpsや開発環境、エディタに関するお悩み相談所としてお気軽にお立ち寄りください (「先週のセミナー見ました〜」と言って、立ち寄ってもらえると嬉しいです) 色々と情報交換しましょう ↓イベント情報はこちら↓ https://event.ospn.jp/osc2023-nagoya/ 43

5/28 OSC名古屋で会いましょう ＠名古屋市中小企業振興会館 3F 第2ファッション展示場 44

おわり 45