Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VS CodeとRemote Containerで開発環境もコード管理しよう

Avatar for Kazuhiro Seo Kazuhiro Seo
June 26, 2021
Technology
1
660

VS CodeとRemote Containerで開発環境もコード管理しよう

Avatar for Kazuhiro Seo

Kazuhiro Seo

June 26, 2021
Tweet

More Decks by Kazuhiro Seo

See All by Kazuhiro Seo
GitHub ActionsとAWSをOIDC認証で連携する
Avatar for Kazuhiro Seo kazuhiro1982
1
120
Gradleとちょっと仲良くなろう
Avatar for Kazuhiro Seo kazuhiro1982
0
79
JavaとWebAssembly
Avatar for Kazuhiro Seo kazuhiro1982
0
99
SpringBoot 3.0 のNative Imageを試してみた
Avatar for Kazuhiro Seo kazuhiro1982
0
410
セッションデータの管理にSpring Sessionを利用する
Avatar for Kazuhiro Seo kazuhiro1982
0
2.8k
AWSのLake Formation Governed Tablesを触ってみた
Avatar for Kazuhiro Seo kazuhiro1982
0
390
SpringBootをコンテナで動かしてみる
Avatar for Kazuhiro Seo kazuhiro1982
0
400
Serverless FrameworkでWebサイトの更新を検知して通知する
Avatar for Kazuhiro Seo kazuhiro1982
0
500

Other Decks in Technology

See All in Technology
Foundation Model × VisionKit で実現するローカル OCR
Avatar for SansanTech sansantech
PRO
1
380
「AIと一緒にやる」が当たり前になるまでの奮闘記
Avatar for KAKEHASHI kakehashi
PRO
3
150
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
Avatar for LayerX layerx
PRO
1
1.2k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか？
Avatar for an cap120
1
640
はじめての転職講座/The Guide of First Career Change
Avatar for Hiromu Shioya kwappa
5
4k
LTに影響を受けてテンプレリポジトリを作った話
Avatar for Horikawa hol1kgmg
0
370
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
Avatar for Sansan R&D sansan_randd
0
150
【新卒研修資料】数理最適化 / Mathematical Optimization
Avatar for BrainPad brainpadpr
27
13k
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
Avatar for LayerX layerx
PRO
1
990
AI時代の大規模データ活用とセキュリティ戦略
Avatar for Kengo Suzuki ken5scal
0
140
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
Avatar for vaaaaanquish vaaaaanquish
32
14k
ZOZOTOWNの大規模マーケティングメール配信を支えるアーキテクチャ
Avatar for ZOZO Developers zozotech
PRO
0
360

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.4k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
770
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

Transcript

  1. VS CodeとRemote Containerで VS CodeとRemote Containerで 開発環境もコード管理しよう 開発環境もコード管理しよう VS CodeとRemote

    Containerで - 開発環境もコード管理しよう

  2. 自己紹介 自己紹介 妹尾 一弘 札幌でシステム開発会社勤務 JavaDoスタッフ VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  3. Visual Studio Code Visual Studio Code Microsoft製オープンソースIDE サポートされるプログラミング言語が多い VS CodeとRemote

    Containerで - 開発環境もコード管理しよう

  4. Remote Development Remote Development リモート開発環境にアタッチする拡張機能パック コンテナやSSH、WSLに接続して開発出来る 今回はコンテナの話 VS CodeとRemote Containerで

    - 開発環境もコード管理しよう

  5. Remote Containerの仕組み Remote Containerの仕組み 引用元: 引用元: https://code.visualstudio.com/docs/remote/containers https://code.visualstudio.com/docs/remote/containers VS CodeとRemote

    Containerで - 開発環境もコード管理しよう

  6. コンテナをビルド/実行 コンテナをビルド/実行 ※ 起動済みコンテナの利用も可能 ※ 起動済みコンテナの利用も可能 VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  7. ソースコードをマウント ソースコードをマウント VS CodeとRemote Containerで - 開発環境もコード管理しよう

  8. VS Code Serverをインストール VS Code Serverをインストール VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  9. Extensionをインストール Extensionをインストール ※ 明示的に指定したExtensionのみ ※ 明示的に指定したExtensionのみ VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  10. 環境設定は 環境設定は .devcontainer フォルダ以下の .devcontainer フォルダ以下の devcontainer.json に記載する devcontainer.json に記載する

    VS CodeとRemote Containerで - 開発環境もコード管理しよう

  11. devcontainer.json devcontainer.json VS CodeとRemote Containerで - 開発環境もコード管理しよう

  12. buildセクション buildセクション VS CodeとRemote Containerで - 開発環境もコード管理しよう

  13. docker-composeも使用可能 docker-composeも使用可能 VS CodeとRemote Containerで - 開発環境もコード管理しよう

  14. 他のコンテナも参照出来る 他のコンテナも参照出来る VS CodeとRemote Containerで - 開発環境もコード管理しよう

  15. extensionセクション extensionセクション VS CodeとRemote Containerで - 開発環境もコード管理しよう

  16. settingsセクション settingsセクション VS CodeとRemote Containerで - 開発環境もコード管理しよう

  17. devcontainer.jsonをコミットしておくことで どんなコンテナを利用するか どんなExtensionを利用するか どんな設定でVS Codeを利用するか がチームで共有できる VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  18. Remote Containerのメリット Remote Containerのメリット VS CodeとRemote Containerで - 開発環境もコード管理しよう

  19. 開発環境がコンテナ化される 開発環境がコンテナ化される Immutable 環境が壊れてもRebuildすれば戻せる 新規メンバーがすぐに開発を始められる VS CodeとRemote Containerで - 開発環境もコード管理しよう

  20. 環境セットアップに必要な設定を 環境セットアップに必要な設定を すべてコードで管理できる すべてコードで管理できる OSやライブラリはDockerfileで ExtensionやFormetter設定はdevcontainer.jsonで VS CodeとRemote Containerで -

    開発環境もコード管理しよう

  21. 開発環境のメンテナンスが 開発環境のメンテナンスが 通常の開発サイクルに乗る 通常の開発サイクルに乗る VS CodeとRemote Containerで - 開発環境もコード管理しよう

  22. 辛いポイント 辛いポイント VS CodeとRemote Containerで - 開発環境もコード管理しよう

  23. Docker for Mac/Windowsに依存する Docker for Mac/Windowsに依存する ファイル権限周り等がハマりやすい VS CodeとRemote Containerで

    - 開発環境もコード管理しよう

  24. メモリが必要になりがち メモリが必要になりがち VS CodeとRemote Containerで - 開発環境もコード管理しよう

  25. まとめ まとめ Remote Containerを使うことで Remote Containerを使うことで 開発環境を簡単に立ち上げ・再構築できる チームが同じ環境で開発が出来る 開発メンバー固有のトラブルが減る 開発環境メンテナンスの属人化を減らせる

    VS CodeとRemote Containerで - 開発環境もコード管理しよう

  26. ありがとうございました ありがとうございました VS CodeとRemote Containerで - 開発環境もコード管理しよう