VSCodeの拡張機能「Dev Containers」について

VS Code

Dev Containersとは？
Dev Containersの使い方
Dev Containersの基本操作
Dev Containersのメリット

Dev Containersとは？

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

Dev Containers（開発コンテナ）は、Visual Studio Codeの拡張機能の一つで、開発環境をコンテナ内にセットアップすることで、どこでも同じ開発環境を使うことができるようになります。この方法は、開発チーム内で環境の違いをなくし、一貫性のある作業を提供するために非常に便利です。

Dev Containersの使い方

必要になるもの

・Visual Studio Code
・Docker
・Dev Containers拡張機能（VSCodeを開き、拡張機能の「Dev Containers」を検索してインストールします）

プロジェクト内に「.devcontainer」という設定フォルダと「devcontainer.json」を作成します。以下がように記述します

{
  "name": "My Development Container",
  "dockerFile": "Dockerfile",
  "extensions": [
    "ms-python.python",
    "esbenp.prettier-vscode"
  ],
  "settings": {
    "python.pythonPath": "/usr/bin/python3",
    "editor.formatOnSave": true
  },
  "postCreateCommand": "pip install -r requirements.txt"
}

{

"name": "My Development Container",

"dockerFile": "Dockerfile",

"extensions": [

"ms-python.python",

"esbenp.prettier-vscode"

"settings": {

"python.pythonPath": "/usr/bin/python3",

"editor.formatOnSave": true

"postCreateCommand": "pip install -r requirements.txt"

}

Dockerfileの例

FROM node:16

# コンテナ内に必要なツールやライブラリをインストール
RUN apt-get update && apt-get install -y \
git \
curl \
&& rm -rf /var/lib/apt/lists/*

WORKDIR /workspace

# 必要な依存パッケージをインストール
COPY package*.json ./
RUN npm install

FROM node:16

# コンテナ内に必要なツールやライブラリをインストール

RUN apt-get update && apt-get install -y \

git \

curl \

&& rm -rf /var/lib/apt/lists/*

WORKDIR /workspace

# 必要な依存パッケージをインストール

COPY package*.json ./

RUN npm install

Dev Containersの基本操作

コンテナ内にアクセスするためには、コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開き、「Dev Containers: Reopen in Container」と検索し、実行します。このコマンドを実行すると、VSCodeが自動でコンテナを作成し、その中で作業を開始できます。

Dev Containersのメリット

必要な環境をコードとして記述できるため、新しいプロジェクトを始めるときやチームメンバーが参加する際に、簡単に開発環境をセットアップできます。プロジェクトに必要な依存関係やツールをdevcontainer.jsonに定義しておくことで、誰でも簡単に同じ開発環境を再現できます。加えて、コンテナ内でプロジェクトを実行することで、システム全体に影響を与えることなく、特定のライブラリやツールをインストールできます。

また、VSCodeのエディタ内で直接操作できるため、エディタを切り替えることなくコンテナ環境での開発が可能です。VSCode内でコンテナを立ち上げたり、コード補完やデバッグ機能をそのまま利用したりすることができます。

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞