DockerコンテナをVSCodeで開発 gitでバージョン管理する（忘備録）

Posted at 2022-12-11

はじめに 🐋

Docker初学者です。Dockerをどのように開発の現場に取り入れられるかを考えました。
不備や誤りなどお気づきのことがあれば、ご指摘いただけると幸いです。

概要

コンテナ内部にgitをインストールしVSCodeでリモート接続します。開発、バージョン管理を容易に行えるため実際の開発にDockerコンテナを取り入れやすくなったと思います。

この記事の読者

プログラミングの基礎的な知識があることが前提です。
Dockerに興味がある方、Dockerは触ったけれど使いどころがピンとこない方などを対象に書いています。
※この記事ではDockerの概要やインストールの方法については詳しく説明しません。

デモ

コードテンプレート

こちらにテンプレートを用意していますので自由にお使いください。本記事の説明はこのテンプレートをもとに行います。

使用するツール

私の環境ではUbuntuにDockerをインストールしています。
VSCodeでGithubにSSH接続できることが前提です。

※検証に協力いただいた方からDockerをVSCodeで使用するにあたりRootlessモードが必要だったと報告を頂きました。 これについて追加情報があればアップデートします

ツール	バージョン	備考
Docker	20.10.21
docker-compose	1.29.2
Dev Containers	0.266.1	VSCode 拡張機能

フォルダ構成

root/
  ├ .devcontainer/
  │  └ devcontainer.json
  ├ templates/
  │  └ index.html
  ├ .dockerignore
  ├ Dockerfile　
  ├ docker-compose.yml
  ├ .gitignore
  ├ app.py
  └ requirements.txt

コードの説明

アプリはPythonを使い Todoリストを作成しました。アプリの詳細はこちらにテンプレートを用意しています。本記事では Docker の設定を中心に説明します。

Dockerfile

Dockerイメージを作成するための設定を記載します。

Dockerfile

FROM python:3.10 // PythonのイメージをDockerhubからプル

COPY ./requirements.txt /app/requirements.txt // Pythonの依存関係やパッケージ情報をイメージにコピー

WORKDIR /app //作業ディレクトリを イメージ先の/appに切り替える

RUN pip install -r requirements.txt　// 依存関係やパッケージをイメージ内でダウンロード

COPY . /app　//ローカルのファイルやフォルダをイメージ内にコピー

ENTRYPOINT [ "python" ] // コンテナを起動する際のコマンドを設定

CMD ["app.py" ]

docker-compose.yml

Dockerコンテナ起動するための設定を記載します。

docker-compose.yml

version: '3.10' // docker-compose.ymlのバージョン
services:
  db:
    image: postgres:14.1-alpine // データベースイメージをDockerhubからプル
    container_name: sampletodo_db
    restart: always
    environment:　//データベース起動に必要な環境情報
          - POSTGRES_USER=postgres　
          - POSTGRES_PASSWORD=postgres
    volumes: 
      - db:/var/lib/postgresql/data //データベース内容のマウント先を指定
    networks:
      mynet:
        aliases:
          - db
      healthcheck: 
        test: ["CMD-SHELL", "pg_isready -U postgres"]
        interval: 1s
        retries: 3
  web:
    container_name: sampletodo_web
    build: .  
    depends_on:
      db: 
        condition: service_healthy # dbのコンテナが起動完了してからwebコンテナを起動させる為の設定 
    ports:
      - '127.0.0.1:8000:8080'
    environment:
      POSTGRES_URL: postgresql://postgres:postgres@db:5432/postgres
    volumes:
      - './:/src'
    networks:
      mynet:

volumes: 
  db: 
    driver: local

networks: // networksを使い 'db'と'web'という2つのコンテナを接続させる
  mynet:　//任意の名前
    driver: bridge

.devcontainer/devcontainer.json

VSCodeの拡張機能、Remote Developmentを起動するための設定を記載します。

.devcontainer/devcontainer.json

{
    "name": "sampletodo remote",
    "dockerComposeFile" : ["../docker-compose.yml"], 
    "service": "web",
    "extensions": ["oderwat.indent-rainbow"],  
    "workspaceFolder": "/app",
    "postCreateCommand": "apt update && apt install -y git" 

}

テンプレートのクローンから開発環境を整えるまでの流れ

※各ツールのインストールは完了しています

GithubリポジトリからSampleTodo をクローンします。
```
git clone git@github.com:workshop-msano/sampleTodo.git
```
ファイルをVSCodeで開きます。VSCodeの左下にある Remote Container起動ボタンを押下します。
VSCodeのポップアップ画面から Open Folder in Containerを選択します。
ポップアップ画面のOpenを押下します。
しばらく待つと VSCodeが表示されます。ログにDone. Press any key to close the terminal.と表示されていれば成功です！

左下の Remote Developmentボタンの隣に Dev Container: <devcontainer.jsonで設定した名前>と表示されます。　

http://localhost:8000からウェブアプリにアクセス可能です。
すでにコンテナにはgitをインストールしているので、コンテナからGithubにアクセスできるように設定します。※VSCodeでGithubにSSH接続できることが前提です。
ターミナルを開き、以下のコマンドを実行します。
```
git config --global user.email '<your setting>'
git config --global user.name '<Your setting>'

mkdir -p ~/.ssh/
curl -s -o ~/.ssh/id_ed25519 "https://github.com/$(git config --global --get user.name).keys"
```
次にターミナルで ssh -v git@github.comと入力しましょう。
ログの中に Githubアクセス成功の表示があれば完了です！Githubにリポジトリを作成し、Dockerコンテナ内からソースコードのバージョン管理をおこなうことが出来ます。