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
750
1

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

Avatar for Kazuhiro Seo

Kazuhiro Seo

June 26, 2021

More Decks by Kazuhiro Seo

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

Other Decks in Technology

See All in Technology
Claude Codeをどのように キャッチアップしているか
Avatar for Oikon oikon48
13
8.2k
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
140
MCP Appsを作ってみよう
Avatar for iwamot iwamot
PRO
4
660
AAIFに入ってみた ～内から見えるコミュニティ動向～
Avatar for Satoshi Ito sato4
0
240
20260619 私の日常業務での生成 AI 活用
Avatar for Masaru Ogura masaruogura
1
220
アジャイルな経理と Claude Code と 経営の未来
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
120
気軽に使える"情報のハブ"としてのNotion活用　〜フロー情報の集積点 と、 Claude Code × Notion AI〜
Avatar for Ryo Okubo syucream
1
140
白金鉱業Meetup_Vol.24_「AIエージェントは分けるほど良い」は本当か？ / Is it true that “the more you divide AI agents, the better”?
Avatar for BrainPad brainpadpr
1
390
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
AmazonRoute 53ではじめてのドメイン取得！HTTPS化までの道のりを整理してみた
Avatar for usanchuu usanchuu
3
140
気づかぬうちにセキュリティ負債を生むAPIキー運用
Avatar for Michitaka Sugawara sgwrmctk
0
140
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
140
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
200
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
210
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k

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で - 開発環境もコード管理しよう