Slide 1

Slide 1 text

VS Code Dev Containersで始める リモート開発環境 体験ハンズオン 日本仮想化技術株式会社 VirtualTech.jp 2023/08/26 1

Slide 2

Slide 2 text

スライドは後日公開します 2

Slide 3

Slide 3 text

諸連絡 ネットワーク接続について ● 有線LAN接続推奨→無線LAN接続 ● 注意:関係者およびワークショップ参加者のみに公開されています ○ SSID:openlab-guest-wifi ○ PASS:docomoopenlab 参加風景の録画について ● 後方から録画させていただきます ● 映り込みがNGな方がいましたらお知らせください GitHub IDの収集について ● リポジトリやVM環境へのアクセス権限付与するために必要ですので事前にお知らせください 3

Slide 4

Slide 4 text

4 自己紹介

Slide 5

Slide 5 text

始める前に 5

Slide 6

Slide 6 text

はじめに少し聞かせてください 6 Q1: Visual Studio Codeはよく使用しているエディタですか? (仕事/プライベート/両方) Q2: Visual Studio Codeのリモート開発機能を知って(使って)いますか? ● Remote - SSH / Remote - Tunnel ● Dev Containers ● WSL Q3: チームやプロジェクトで開発環境を統一したいと思ったことはありますか?

Slide 7

Slide 7 text

タイムスケジュール 7

Slide 8

Slide 8 text

タイムスケジュール 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分 クロージング ※環境構築の待ち時間などの兼ね合いで進行が前後することがありま す

Slide 9

Slide 9 text

体験内容 9

Slide 10

Slide 10 text

体験内容と背景 10 3つの時代 ● ローカルマシン上に開発環境を構築する時代 ● ローカルマシン以外で開発環境を構築する時代 ● 仮想化技術が出てきてから仮想環境上に開発環境を構築する時代 ● ローカルマシン以外で開発環境の構築を再び模索する時代か!? 単にSSH接続して実行環境が手に入るくらいであればそこまで興味はなかった... リモートな環境で開発するのは昔流行っていたような記憶もある... SVNからGit。オンプレからクラウド。当時と比べたら色々なところで環境や常識が変わってきた Visual Studio Codeのフル機能が使える開発環境が手に入るのであれば興味がある

Slide 11

Slide 11 text

開発環境の構築から開発サイクルを回し続ける中で面倒なことは ● 新規プロジェクトに参加したときや開発端末を入れ替えた時に1から開発環境を構築すること ○ 手順書があっても実態と異なっていて、大体役に立たない ● メンバーに今日したアプリが動かずに調査したら、原因はバージョンが古かった...とか →Dev Containersを活用したVS CodeとGitがあればすぐに始められる開発環境 ● レビュー時に開発中の環境を切り替えたり、戻したりするの面倒だし、たまに壊れたりする ● レビューの指摘をしてから戻ってくるまで自分のタスクに戻りにくい ● レビューが静的レビューになるか、後回しにされがちになる負のスパイラル →開発用環境と別にレビュー用環境を立ち上げてから並行して作業が行える環境 体験内容と背景 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

● ローカルマシンのDockerコンテナ上で起動 ● ネットワーク環境の影響を受けにくい ● マシンスペックの柔軟性が低い ● 手元の端末が固定 ローカルマシンとリモートマシン ローカルマシン(左図) 13 リモートマシン(右図) ● リモートマシンのDockerコンテナ上で起動 ● ネットワーク環境の影響を受けやすい ● マシンスペックの柔軟性が高い ● 手元の端末を自由に変えられる

Slide 14

Slide 14 text

ここからGitHubのドキュメントへ 14

Slide 15

Slide 15 text

ここからGitHubのドキュメントへ 15

Slide 16

Slide 16 text

開発環境の準備 16

Slide 17

Slide 17 text

ワークショップ① 17

Slide 18

Slide 18 text

ワークショップ② 18

Slide 19

Slide 19 text

クロージング 19

Slide 20

Slide 20 text

● 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

Slide 21

Slide 21 text

使用する開発環境 21

Slide 22

Slide 22 text

● ニフクラ ○ VMwareで仮想化したパブリッククラウドコンピューティングサービス ○ c-medium4(2vCPU・4GB)のサーバータイプを使用 ○ Visual Studio Codeの拡張機能であるRemote - SSH + Dev Containersの2つを使用 開発環境 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

9/6にオンライン勉強会でライブ デモ形式でやります 社内導入を検討したいので他メンバーにも共有したい... 他におすすめしたい人がいる... 28

Slide 29

Slide 29 text

おわり 29

Slide 30

Slide 30 text

質問などはブースにて後ほど 懇親会なども参加予定ですので、今日の感想など聞かせてください 30

Slide 31

Slide 31 text

お問い合わせ先 31 [email protected] 開発環境の悩み、インフラの悩み 話してみませんか? ❏ オンラインでのお打ち合わせOK ❏ 相談ベースからでもOK