0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCodeとDockerでリモート開発する

Posted at

前提

Dockerの環境構築が済んでいる

手順

1. VSCodeの拡張機能「Remote Development」をインストール

3つ拡張機能がインストールされますが、今回使うものは「Remote - Containers」です。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

2. VSCodeの拡張機能をインストール

1. 左下のアイコンをクリック

4c323700-8273-4400-6f63-cb985420fd0f.jpg

2. Add Development Container Configuration Filesを選択

e833e988-5523-eaa0-f6e4-46738485b4c7.jpg

3. From 'docker-compose.yml'を選択

3f150ca4-7e49-91d0-8dce-0747913374a3.jpg

4. コンテナを選択

f21c45e3-0902-9e97-ec1d-d4e7c65cd21d.jpg

※接続したいコンテナを指定する。

5. devcontainer.jsonの修正

以下は一例です。

.devcontainer\devcontainer.json

"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],

	"workspaceFolder": "/workspace",

.devcontainer\devcontainer.json
"dockerComposeFile": [
		"../docker-compose.yml"
	],

	"workspaceFolder": "/var",

に変更

※dockerComposeFileはプロジェクトで使用しているdocker-compose.ymlのパスです。
※workspaceFolderはコンテナのディレクトリ構成を見て、ワークスペースのルートにしたいパスを設定します。

6. コンテナに接続

左下のアイコンをクリックしてから
Reopen in Containerでコンテナを開くことができ、直接編集できるようになります。
0bb7f04e-3f26-12ed-571a-668f39d54a5d.jpg

参考

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?