🐳

Intellij × Dev Containersでローカル開発環境を整備してみた

千葉祐太

2024/06/14に公開

はじめに

Septeni Japan株式会社でプロダクト開発を行なっているエンジニアの千葉です。

Dev ContainersについてはVSCodeの記事をよく見かけますが、JetBrains製IDEに関する記事は少なく、今回軽く触ってみたのでブログを書いてみました。

JetBrainsのDev ContainersはまだBeta版のようなので、実運用に耐えられるかどうかも含めて見ていきます。

前提

Webアプリケーション
IDEはIntellijを利用
以下のようなWeb構成
- Frontend: React / Typescript / Yarn
- Backend: Spring Boot / Kotlin / Gradle
- DB： MySQL

この記事を読んでいただきたい方々

Jetbrains製IDEを使っているが、Dev Containersは使ったことのない方
新しくジョインする人がローカル開発環境構築で詰まることが多く、時間がかかることに課題感を感じている方

Dev Containersとは？

ローカル開発環境のセットアップや管理を簡単にし、開発者がどのマシンでも同じ環境で作業できるようにすることを目的として作られた、コンテナを使ってローカル開発環境を作る仕組みです。

MicrosoftがVS Codeの拡張機能として提供したことが始まりと認識しています。

Dev Containersを使うメリット

一貫性

開発環境が全員で統一されるため、「自分の環境では動くけど、他の人の環境では動かない」という問題が減ります。

新しくチームにジョインした開発者に、「ローカル開発環境手順に沿ってコマンドを実行したのにエラーが出るんですけどー？」のようなことを言われ、原因調査と解決に時間を奪われた経験、皆さんもあるのではないでしょうか？

Dev Containersを利用することでこういった悩みから解放されます。

簡単なセットアップ

新しい開発者がプロジェクトに参加する際、複雑な環境設定をする必要がなく、すぐに作業を始められます。

依存関係の管理

必要なライブラリやツールがコンテナ内に含まれているため、依存関係の問題が発生しにくいです。

構築方法

以下のような技術スタックのWebアプリケーションを開発するためのローカル開発環境をDev Containersで作っていきます。

Frontend: React / Typescript / Yarn
Backend: Spring Boot / Kotlin / Gradle
DB： MySQL

以下のようなディレクトリ構造を前提に説明していきます。

web-app
├── .devcontainer
│   └── devcontainer.json
├── backend
│   ├── src
│   ├── build.gradle.kts
│   ├── gradlew
│   ├── ...
├── frontend
│   ├── src
│   ├── package.json
│   ├── ...
├── Dockerfile
├── docker-compose.yml
└── README.md

1. Dev Container用のDockerfileを用意する

フロントエンドではnode.jsやyarn、バックエンドではjavaが必要になるので、それぞれインストールしていきます。

FROM ubuntu:latest

RUN apt-get update && \
    apt-get install -y curl gnupg software-properties-common git && \
    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
    apt-get install -y nodejs openjdk-17-jdk mysql-client && \
    npm install -g yarn \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*    

ENV JAVA_HOME=/usr/lib/jvm/java-17-openjdk-arm64
ENV PATH=$JAVA_HOME/bin:$PATH

WORKDIR /workspace

EXPOSE 3000 8080 3306

CMD ["/bin/bash"]

2. docker-compose.ymlを用意する

MySQLを立てるコンテナを別で用意するために、docker-compose.ymlを用意します。

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: devcontainer_app
    volumes:
      - .:/workspace
    ports:
      - "3000:3000"
      - "8080:8080"
    depends_on:
      - db
  db:
    image: arm64v8/mysql:8.0
    container_name: devcontainer_mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: web-app
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3307:3306"
    volumes:
      - db-data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
volumes:
  db-data:

3. devcontainer.jsonを用意する

devcontainerの設定ファイルであるdevcontainer.jsonを作ります。

{
  "name": "Full Stack Dev Container",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "postCreateCommand": "cd /workspace/frontend && yarn install && cd /workspace/backend && ./gradlew build",
  "remoteUser": "root"
}

キー	説明
name	Dev Containerの名前
dockerComposeFile	使用するDocker Composeファイルのパス
service	Dev Container上で実行されるサービス名(docker-compose.yml内のservice名)
workspaceFolder	Dev Container内のワークスペースのパス
settings	Dev Container内で使用されるターミナルのシェル
postCreateCommand	Dev Containerが作成された後に実行されるコマンド
remoteUser	Dev Container内で使用されるユーザーの名前

4. Dev Containerを立ち上げる

Dev Containerを起動

Intellij上でdevcontainer.jsonを開き以下アイコンを押下します。

「Create Dev Container and Clone sources...」を押下します。

Git RepositoryとBranchを指定して、「Build Container and Continue」を押下します。

以下のようにコンテナのビルドが始まるので待ちます。

ビルドが完了したら、開発に利用するエディタ(今回はIntellij)を選んで「Continue」を押下します。

しばらく待つとIntellijが立ち上がりました。
これでDev Containerの起動は成功です！

アプリケーションを起動してみる

フロントエンドを起動してみます。

cd frontend
yarn dev

バックエンドも起動してみます。

cd backend
./gradlew bootRun

無事起動に成功したのでブラウザで開いてみます。

ユーザー一覧はDBに保存されているユーザー情報を表示する作りになっているので、
フロントエンド、バックエンド、DBがうまく疎通できて正常に動作していそうです。

Gitの初期設定

ターミナル上でgit pullを行うとこんなダイアログが表示されるので、github等に登録しているSSH keyのPATHを入力します。

再度git pullをすると成功するようになります。
これでDev Container上でもgitコマンドが利用できます。

結論

まだ実際のプロダクト開発で本格的に運用していないのでなんとも言えませんが、導入もそこまで難しくないですし、普段ローカルマシンで行っているのと同様に開発ができるんじゃないかなと思っています。

今回は一つのDev Container上でフロントエンドとバックエンドを起動し、Intellijを利用して両方を開発する環境を構築しましたが、それぞれで必要な依存関係を定義したDockerfileを用意してDev Containerを作ることでバックエンドはIntellij、フロントエンドはWebStormのような開発も行うことができると思います。

フロントエンドのみ変更を行う場合やバックエンドのみ変更を行う場合は、疎通確認のために不要なIDEのを起動しないといけないため、スペックの低いPCを使っている場合は、メモリ等のリソースの観点から1つのDev Containerで開発した方が良いかもしれません。

これから新規のプロダクトでDev Containersを使って開発を行う予定なので、運用していく過程で課題が見つかったらどこかで共有できればと思っております。

参考資料

We are hiring

Septeni Japanでは、一緒にプロダクト開発組織を盛り上げてくれる仲間を募集しています！
ご興味のある方は以下リンクから応募していただき、カジュアル面談を通じて働く環境や仲間を知っていただければと思います！

その際、応募フォームの「知ったきっかけ」に「テックブログ」と記載いただければと思います。

Septeni Japan Tech BlogPublication