VS Code Dev Containersで始めるリモート開発環境体験ハンズオン

様々なツールやサービスを活用した開発は当たり前になっており、開発環境の準備はどんどん煩雑になっています。そのため、開発チームのメンバーに詳細な手順書通りに環境を構築させるのは困難です。

今回は、そのような課題を解決するリモート開発環境を体験できるハンズオンを実施します。Visual Studio Codeのリモート開発機能と、コンテナ上に各種開発環境を構築して利用できる「Dev Containers」を組み合わせたリモート開発環境を体験していただきます。コンテナ技術のメリットである構成の自動化を活用する事で、開発環境を素早く提供できます。

当日は「手軽にすぐ始められる開発環境」と「開発中に急なレビュータスクの差し込みでもスムーズに」の2テーマについて解説します。

Transcript

1. VS Code Dev Containersで始める リモート開発環境 体験ハンズオン 日本仮想化技術株式会社 VirtualTech.jp 2023/08/26 1
2. スライドは後日公開します 2
3. 諸連絡 ネットワーク接続について • 有線LAN接続推奨→無線LAN接続 • 注意：関係者およびワークショップ参加者のみに公開されています ◦ SSID：openlab-guest-wifi ◦ PASS：docomoopenlab 参加風景の録画について • 後方から録画させていただきます • 映り込みがNGな方がいましたらお知らせください GitHub IDの収集について • リポジトリやVM環境へのアクセス権限付与するために必要ですので事前にお知らせください 3
4. 4 自己紹介
5. 始める前に 5
6. はじめに少し聞かせてください 6 Q1: Visual Studio Codeはよく使用しているエディタですか？ (仕事/プライベート/両方) Q2: Visual Studio Codeのリモート開発機能を知って(使って)いますか？ • Remote - SSH / Remote - Tunnel • Dev Containers • WSL Q3: チームやプロジェクトで開発環境を統一したいと思ったことはありますか？
7. タイムスケジュール 7
8. タイムスケジュール 14:00〜開催回 8 16:00〜開催回 14:00〜14:05 5分 イントロダクション 14:05〜14:20 15分 開発環境の準備 14:20〜14:30 10分 ワークショップ① 14:30〜14:40 10分 ワークショップ② 14:40〜14:45 5分 クロージング 14:00〜14:05 5分 イントロダクション 14:05〜14:20 15分 開発環境の準備 14:20〜14:30 10分 ワークショップ① 14:30〜14:40 10分 ワークショップ② 14:40〜14:45 5分 クロージング 16:00〜16:05 5分 イントロダクション 16:05〜16:20 15分 開発環境の準備 16:20〜16:30 10分 ワークショップ① 16:30〜16:40 10分 ワークショップ② 16:40〜16:45 5分 クロージング ※環境構築の待ち時間などの兼ね合いで進行が前後することがありま す
9. 体験内容 9
10. 体験内容と背景 10 3つの時代 • ローカルマシン上に開発環境を構築する時代 • ローカルマシン以外で開発環境を構築する時代 • 仮想化技術が出てきてから仮想環境上に開発環境を構築する時代 • ローカルマシン以外で開発環境の構築を再び模索する時代か！？ 単にSSH接続して実行環境が手に入るくらいであればそこまで興味はなかった... リモートな環境で開発するのは昔流行っていたような記憶もある... SVNからGit。オンプレからクラウド。当時と比べたら色々なところで環境や常識が変わってきた Visual Studio Codeのフル機能が使える開発環境が手に入るのであれば興味がある
11. 開発環境の構築から開発サイクルを回し続ける中で面倒なことは • 新規プロジェクトに参加したときや開発端末を入れ替えた時に1から開発環境を構築すること ◦ 手順書があっても実態と異なっていて、大体役に立たない • メンバーに今日したアプリが動かずに調査したら、原因はバージョンが古かった...とか →Dev Containersを活用したVS CodeとGitがあればすぐに始められる開発環境 • レビュー時に開発中の環境を切り替えたり、戻したりするの面倒だし、たまに壊れたりする • レビューの指摘をしてから戻ってくるまで自分のタスクに戻りにくい • レビューが静的レビューになるか、後回しにされがちになる負のスパイラル →開発用環境と別にレビュー用環境を立ち上げてから並行して作業が行える環境 体験内容と背景 11
12. Dev Containersとは • VS Codeが提唱している開発環境の1つ ◦ ローカルマシン以外でVS Codeのフル機能を活用した開発環境を構築できる仕組み ◦ リモートマシン接続時にVS Code Serverが自動インストールされてホスト側のVS Codeと通信 ◦ Windows(WSL)やクラウドサービス(AWSのEC2など)、社内サーバー、サブ端末などで構築可能 • Dev Containers ◦ Dockerコンテナ上で動作する開発環境 ◦ コンテナ技術のメリットを最大限活かした開発が行える 12 https://code.visualstudio.com/docs/remote/remote-overview
13. • ローカルマシンのDockerコンテナ上で起動 • ネットワーク環境の影響を受けにくい • マシンスペックの柔軟性が低い • 手元の端末が固定 ローカルマシンとリモートマシン ローカルマシン(左図) 13 リモートマシン(右図) • リモートマシンのDockerコンテナ上で起動 • ネットワーク環境の影響を受けやすい • マシンスペックの柔軟性が高い • 手元の端末を自由に変えられる
14. ここからGitHubのドキュメントへ 14
15. ここからGitHubのドキュメントへ 15
16. 開発環境の準備 16
17. ワークショップ① 17
18. ワークショップ② 18
19. クロージング 19
20. • 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とは？ 20
21. 使用する開発環境 21
22. • ニフクラ ◦ VMwareで仮想化したパブリッククラウドコンピューティングサービス ◦ c-medium4(2vCPU・4GB)のサーバータイプを使用 ◦ Visual Studio Codeの拡張機能であるRemote - SSH + Dev Containersの2つを使用 開発環境 22
23. 構成ファイルの書き方を理解しよう 23
24. 実際の設定ファイルのイメージ 24
25. 主な設定項目 25 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build (別スライドにて) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧：https://containers.dev/features forwardPorts (省略) postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)
26. customizationsで設定できること • インストールすべき拡張機能の指定やVS Codeの設定が定義できる • settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ◦ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations": { "vscode": { "extensions": [], "settings": {}, } } } 26 設定項目 説明 extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できる settings settings.jsonファイルで定義できる内容が指定できる
27. 独自で定義したイメージを作成することはできる？ A：できる Dockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加す ることで、使用することができます。 参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。 Dockerfileの場合 { “build”: { “dockerfile”: “Dockerfile”, “context”: “.” } } 27 docker-compose.ymlの場合 { “dockerComposeFile”: “docker-compose.yml”, “service”: “devcontainer”, “workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}” }
28. 9/6にオンライン勉強会でライブ デモ形式でやります 社内導入を検討したいので他メンバーにも共有したい... 他におすすめしたい人がいる... 28
29. おわり 29
30. 質問などはブースにて後ほど 懇親会なども参加予定ですので、今日の感想など聞かせてください 30
31. お問い合わせ先 31 sales@VirtualTech.jp 開発環境の悩み、インフラの悩み 話してみませんか？ ❏ オンラインでのお打ち合わせOK ❏ 相談ベースからでもOK