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

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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 4
   自己紹介
   

   View Slide

5. 始める前に
   5
   

   View Slide

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

   View Slide

7. タイムスケジュール
   7
   

   View Slide

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

   View Slide

9. 体験内容
   9
   

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 開発環境の準備
    16
    

    View Slide

17. ワークショップ①
    17
    

    View Slide

18. ワークショップ②
    18
    

    View Slide

19. クロージング
    19
    

    View Slide

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
    

    View Slide

21. 使用する開発環境
    21
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. おわり
    29
    

    View Slide

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

    View Slide

31. お問い合わせ先
    31
    sales@VirtualTech.jp
    開発環境の悩み、インフラの悩み
    話してみませんか？
    ❏ オンラインでのお打ち合わせOK
    ❏ 相談ベースからでもOK
    

    View Slide