{"id":20676525,"url":"https://github.com/ryosukedtomita/devcontainer-test","last_synced_at":"2026-05-02T23:32:19.457Z","repository":{"id":247631740,"uuid":"825068019","full_name":"RyosukeDTomita/devcontainer-test","owner":"RyosukeDTomita","description":"Trying out the DevContainer feature.","archived":false,"fork":false,"pushed_at":"2025-04-05T13:29:32.000Z","size":1148,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T14:26:42.036Z","etag":null,"topics":["devcontainers","developer-environment","developer-tools","dotfiles","vscode"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyosukeDTomita.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-06T17:15:33.000Z","updated_at":"2025-04-05T13:29:35.000Z","dependencies_parsed_at":"2024-07-09T21:16:14.329Z","dependency_job_id":"3608b401-ddde-4492-aef2-9087366b1dc8","html_url":"https://github.com/RyosukeDTomita/devcontainer-test","commit_stats":null,"previous_names":["ryosukedtomita/devcontainer-test"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RyosukeDTomita/devcontainer-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyosukeDTomita%2Fdevcontainer-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyosukeDTomita%2Fdevcontainer-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyosukeDTomita%2Fdevcontainer-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyosukeDTomita%2Fdevcontainer-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyosukeDTomita","download_url":"https://codeload.github.com/RyosukeDTomita/devcontainer-test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyosukeDTomita%2Fdevcontainer-test/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259567174,"owners_count":22877654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devcontainers","developer-environment","developer-tools","dotfiles","vscode"],"created_at":"2024-11-16T21:12:56.532Z","updated_at":"2025-10-26T00:43:43.408Z","avatar_url":"https://github.com/RyosukeDTomita.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevContainer test repository\n\n![un license](https://img.shields.io/github/license/RyosukeDTomita/devcontainer-test)\n\n## INDEX\n\n- [ABOUT](#about)\n- [ENVIRONMENT](#environment)\n- [PREPARING](#preparing)\n- [HOW TO USE](#how-to-use)\n- [Dev Containers Tips](#dev-containers-tips)\n\n---\n\n## ABOUT\n\nTrying out the [Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) feature.\n\n### What is the benefit of DevContainer\n\n- Dev Containersを使うと，Docker Container内でVS Codeを開くことができ，コンテナ内のソースコードを直接編集できる\n- Dev Containers起動時に設定ファイルに記載のあるVS CodeのExtensions等も一括でインストールできる --\u003e チームで開発環境を統一しやすい\n- Dockerfileやcompose.yamlを汚さずにツールのインストールや設定変更ができる\n- [GitHub Codespaces](https://github.com/features/codespaces)を使用する際にDev Containeersを選択することで，環境構築を自動化できる。\n\n---\n\n## ENVIRONMENT\n\n- React with Vite\n- nginx\n\n---\n\n## PREPARING\n\n1. install Docker, [VS Code](https://code.visualstudio.com/)\n2. clone this repository\n3. install [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) VS Code Extensions\n\n---\n\n## HOW TO USE\n\n### Dev Container\n\n```shell\ncode ~/devcontainer-test\n```\n\nIn VS Code, from the command palette, select `Reopen in Container`\n\n![reopen in container](./assets/reopen_in_container.png)\n\n\u003e [!NOTE]\n\u003e To rebuild Dev Container，use `Rebuild and Reopen in Container` or `Rebuild without cache and Reopen in Container`.\n\n![rebuild container](./assets/rebuild_container.png)\n\n\u003e [!WARNING]\n\u003e When an error occurs during Dev Containers build, clearing the cache and rebuilding may solve the problem.\n\u003e\n\u003e ```shell\n\u003e docker rm $(docker ps -a -q)\n\u003e docker rmi $(docker images -q)\n\u003e docker builder prune\n\u003e ```\n\n### deploy\n\ndeploy react app with nginx.\n\n```shell\ndocker compose up\n```\n\ngo to [http://localhost:80](http://localhost:80)\n\n---\n\n## Dev Containers Tips\n\nDev Containerを使うにあたってのtips等をまとめる。\n\n### Multi Stage build使ってDev Containers用の環境を作る\n\n基本的にコンテナにデプロイ時に不必要なものは含めたくないので，Multi Stage buildを使ってDev Containers用の環境を作ることが推奨される。\n\n#### Dockerfileでtargetを指定\n\n- **compose.yamlを使わず**，Dockerfile使う場合にはdevcontainer.jsonでtargetの指定ができる。\n\n  ```Dockerfile\n  FROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm AS devcontainer # target名を指定する\n  ```\n\n- .devcontainer/devcontainer.jsonでtargetを指定する\n\n  \u003e A string that specifies a Docker image build target that should be passed when building a Dockerfile. Defaults to not set. For example: \"build\": { \"target\": \"development\" } [^1]\n\n  ```json\n  {\n    \"name\": \"dev-container-test\",\n    \"build\": {\n      \"dockerfile\": \"Dockerfile\",\n      \"target\": \"devcontainer\"\n    },\n  }\n  ```\n\n#### compose.yamlを使ってtargetを指定\n\ncompose.yamlを使う場合には`target`をcompose.yaml側で指定するためにDev Containers用に`.devcontainer/compose.yaml`を作成する必要がある。[^2]，[^3]\n\n```yaml\n# compose.yaml\nservices:\n  react-app:\n    build:\n      target: devcontainer // targetを指定\n      context: ./\n      dockerfile: Dockerfile\n    image: react-img-devcontainer:latest\n    container_name: react-container-devcontainer\n```\n\n```Dockerfile\nFROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm AS devcontainer # target名を指定する\n```\n\n\u003e [!NOTE]\n\u003e compose.yamlの`services`名をdevcontainer.jsonの`service`に指定する。\n\n```json\n{\n  \"name\": \"dev-container-test\", // 任意の名前\n  \"dockerComposeFile\": [\n    \"../compose.yaml\",\n    \"compose.yaml\"\n  ],\n  \"service\": \"react-app\", // compose.yamlのサービス名\n}\n```\n\n---\n\n### Dev Containers用の公式イメージを使う\n\n[Dev Containers公式イメージ](https://github.com/devcontainers/images/tree/main/src)がいくつかの言語ではサポートされている。\n\n\u003e [!NOTE]\n\u003e\n\u003e 例えば，[base-debian](https://github.com/devcontainers/images/blob/main/src/base-debian/.devcontainer/Dockerfile)は[builderpack-deps](https://hub.docker.com/_/buildpack-deps)をベースにして作成されている。\n\u003e builderpack-depsとは，ビルド時に必要なパッケージをまとめたイメージ。\n\u003e \u003e A collection of common build dependencies used for installing various modules, e.g., gems.[^4]\n\n---\n\n### dotfilesをDev Containersに持ち込む\n\n\u003e [!NOTE]\n\u003e dotfilesは設定ファイルやスクリプト等をまとめたリポジトリのこと。\n\u003e e.g. .bashrc, .gitconfig, .vimrc, etc.\n\n**VSCodeの個人用のsettings.json**に以下を参考に記載することでdotfilesをDev Containersに持ち込むことができる。[^5]\n\n\u003e [!NOTE]: .gitconfigは何もしなくてもDev ContainersのHOMEディレクトリにコピーされる。\n\n```json\n  // Dev Containersでdotfilesを使う。\n  \"dotfiles.repository\": \"https://github.com/RyosukeDTomita/dotfiles.git\",  // fixme\n  \"dotfiles.targetPath\": \"~/dotfiles\", // fixme\n  \"dotfiles.installCommand\": \"install.sh\", // fixme ~/dotfilesのrepository topからみたスクリプトのパスを指定する。\n```\n\n\u003e [!NOTE]\n\u003e `dotfiles.installCommand`には~/dotfilesのrepository topから見たスクリプトのパスを指定する。\n\u003e そのため，dotfilesのGitHub Repositoryにinstall.shは配置が必要。[自分のdotfilesのinstall.sh](https://github.com/RyosukeDTomita/dotfiles/blob/main/install.sh)\n\n\u003e [!NOTE]\n\u003e `dotfiles.installCommand`を指定しない場合にはデフォルトのファイル名として以下が存在すればdotfilesのinstallが実行されるとVS Codeの設定画面に記載がある。\n\u003e\n\u003e ![default install script name](./assets/default_install_script.png)\n\n#### dotfiles TIPS\n\nDev Containerの環境では，`REMOTE_CONTAINERS=true`が環境変数に定義されており，これを使ってDev Containerかどうかを判別できるためローカル用とDev Containers用で処理を分けることができる。[dotfilesのinstall scriptでREMOTE_CONTAINERS=trueで分岐する例](https://qiita.com/sigma_devsecops/items/c40031fc05eeb0811410)\n\n---\n\n### VS Code ExtensionsをDev Containersに持ち込む\n\n#### Extensionsの設定をどこに記載するか\n\n- devcontainer.jsonと.vscode/settings.json両方に記載ができる。\n- 基本は.vscode/settings.json配下に設定を記載するで良いと思っている。\n\n#### Extensionsを追加する方法\n\nExtension IDを.devcontainer/devcontainer.jsonに記載することで追加できる。\n![extension id](./assets/extensionid.png)\n\n```json\n  \"extensions\": [\n    \"formulahendry.auto-rename-tag\",\n  ],\n```\n\n:::note info\nAdd to devcontainer.jsonを選択できるのでこれを使うと楽\n:::\n\n\n#### DevContainerに自分だけが使用するExtensionsを持ち込む\n\n- **個人用のsettings.json**に記載することで，リポジトリの設定を変更せずにExtensionsを追加できる。\n\n```json\n  // Dev containersに個人的に使うExtensionsを入れる。\n  \"dev.containers.defaultExtensions\": [\n    \"vscodevim.vim\"\n  ],\n```\n\n---\n\n### portを開放する設定のベストプラクティス\n\ndevcontainer.jsonでportを開放する方法は3つある。\n\n- `addPort`は非推奨。`forwardPorts`を使う方が良い。\n  \u003e In most cases, we recommend using the new forwardPorts property. [^6]\n- `forwardPorts`を使うことで，コンテナのポートをローカルにフォワードすることができる。\n- `portAttributes`を使うことで，portに関連する追加属性を設定することができる。\n\n\u003e [!NOTE]\n\u003e 2025年3月に動作検証したところ，ローカルのVS CodeではportAttributeのみでportフォワーディングが可能だった。\n\u003e しかし，[GitHub Codespaces](https://github.com/features/codespaces)を使う場合には`portAttributes`のみではportフォワーディングがされなかった。\n\u003e\n\u003e `portAttributes`のみ\n\u003e ![portAttributesのみ](./assets/portForward_only.png)\n\u003e `forwardPorts`も追加すると自動的にportフォワーディングされる\n\u003e ![portAttributesとforwardPorts](./assets/forwardPorts.png)\n\u003e 実際に公式ドキュメントには`forwardPorts`のみしか記載がなく[^7]，`forwardPorts`と`portAttributes`を併用することが推奨される。\n\n```json\n{\n  \"name\": \"dev-container-test\", // 任意の値\n  \"dockerComposeFile\": [\n    \"../compose.yaml\",\n    \"compose.yaml\"\n  ],\n  \"service\": \"react-app\", // compose.yamlのサービス名\n  \"workspaceFolder\": \"/app\",\n  \"forwardPorts\" : [5173, 5173],\n  \"portsAttributes\": {\n    \"5173:5173\": {\n      \"label\": \"Vite application\",\n      \"protocol\": \"http\",\n      \"onAutoForward\": \"notify\"\n    }\n  },\n  \"postStartCommand\": \"cd react-app/ \u0026\u0026 yarn dev --host 0.0.0.0\",\n}\n```\n\n---\n\n### サービスをコンテナビルドなしで再起動可能にする\n\nDev Containersを起動しつづけるために永続コマンドが必要であるが，このサービスの再起動が必要になった場合には，コンテナの再ビルドが必要である。\n\n```Dockerfile\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\nしかし，これは非効率的なので，Dev Containersにはコンテナのイベントをトリガーしてコマンドを実行する機能[^8]を使い，サービスの再起動を可能にすることができる。\n\n- `OverrideCommand`を`true`に設定することで，コンテナを永続化することができる[^1]。\n- `postStartCommand`でサービスを起動することで，コンテナの永続化にサービスが使われなくなり，再起動が可能になる。\n\n```json\n{\n  \"name\": \"dev-container-test\",\n  \"dockerComposeFile\": [\n    \"../compose.yaml\",\n    \"compose.yaml\"\n  ],\n  \"service\": \"react-app\",\n  \"workspaceFolder\": \"/app\",\n  \"overrideCommand\": true, \n  \"forwardPorts\" : [80, 80],\n  \"postStartCommand\": \"nginx\"\n}\n```\n\n---\n\n### ディレクトリのマウント\n\n- ファイル単体でのマウントは現状できない。\n- 設定ファイルは前述のdotfilesを使って共有するのが良い。\n- クレデンシャルを含む情報などはGitHubにアップロードできないため，dotfiles経由ではなく，マウント機能を使ってDev Containersに持ち込むのが良い。\n\n```json\n{\n  \"name\": \"dev-container-test\",\n  \"dockerComposeFile\": [\n    \"../compose.yaml\",\n    \"compose.yaml\"\n  ],\n  \"service\": \"react-app\",\n  \"workspaceFolder\": \"/app\",\n  \"overrideCommand\": true,\n  \"mounts\": [\n    \"source=~/.aws,target=/home/root/.aws,type=bind\" // ~/.awsをマウントできる\n  ],\n```\n\n---\n\n### Dockerfileを汚さずにDev Containersにツールをインストールする\n\n#### featursを使ってツールをインストールする\n\n[features一覧](https://containers.dev/features)から使用可能なツールを探すことができる。\n\ndevcontainer.jsonにfeaturesを記載することで，ツールをインストールすることができる。\n\n```json\n\n  \"features\": {\n    \"ghcr.io/devcontainers/features/aws-cli:1\": {},\n    \"ghcr.io/guiyomh/features/vim:0\": {},\n    \"ghcr.io/dhoeric/features/hadolint:1\": {}\n  },\n```\n\n#### featuresでサポートされていないツールをインストールする方法\n\n必要そうなパッケージをまとめたshell scriptを作成し，これを`postCreateCommand`で実行することでツールをインストールすることができる。\n\n```json\n  \"postCreateCommand\": \"install-pkg.sh\",\n```\n\n---\n\n### References\n\n[^1]: \u003chttps://containers.dev/implementors/json_reference/#general-properties\u003e\n\n[^2]: \u003chttps://github.com/microsoft/vscode-remote-release/issues/7810\u003e\n\n[^3]: \u003chttps://stackoverflow.com/questions/78421879/devcontainer-docker-compose-best-practice\u003e\n\n[^4]: \u003chttps://hub.docker.com/_/buildpack-deps\u003e\n\n[^5]: \u003chttps://code.visualstudio.com/docs/devcontainers/containers#_personalizing-with-dotfile-repositories\u003e\n\n[^6]: \u003chttps://containers.dev/implementors/json_reference/#image-specific\u003e\n\n[^7]: \u003chttps://docs.github.com/en/codespaces/developing-in-a-codespace/forwarding-ports-in-your-codespace#automatically-forwarding-a-port\u003e\n\n[^8]: \u003chttps://containers.dev/implementors/json_reference/#lifecycle-scripts\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryosukedtomita%2Fdevcontainer-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryosukedtomita%2Fdevcontainer-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryosukedtomita%2Fdevcontainer-test/lists"}