背景

spring securityやORMなど、業務で使用するライブラリ、フレームワークの練習台としてtwitter風のwebアプリを作ってみようと思いました。

java + journalでjavanalなんて名前をつけて、ゆっくりやっていきます。

とりあえず今日は環境構築をやっていきます。

環境構築

ホストPCに色々インストールするのは嫌だったので、Dockerコンテナ上で開発をしていきます。

Docker + VS Code Remote-Container
docker image: openjdk:17.0.2-jdk-slim-bullseye

java: 17.0.2
フレームワーク: spring boot 2.7.3

プロジェクト作成

Spring Initializrを使用してspring bootプロジェクトを作成します。

画面右上の「ADD DEPENDENCIES...」ボタンから好きな依存関係を追加できます。

とりあえずURLにアクセスして画面を表示させたかっただけなので、lombokとwebを追加しました。

設定ができたら画面中央下部の「GENERATE」でプロジェクトをダウンロードします。

プロジェクトのzipファイルがダウンロードが完了すれば、任意のフォルダに解凍します。

今後は、この解凍したプロジェクトを含むディレクトリをルートディレクトリとして進めていきます。

Docker環境構築

作成したプロジェクトの実行環境を構築していきます。

ルートディレクトリ直下にdockerフォルダを作成し、その配下に下記のようにフォルダとファイルを作成します。

.
├── README.md
├── docker
│   ├── app
│   │   └── Dockerfile
│   └── docker-compose.yml
└── javanal

docker-compose.yml

services:
  app:
    build:
      context: ..
      dockerfile: ./docker/app/Dockerfile
    # tty: true、もしくはフォアグラウンドで実行しているプロセスがあればコンテナが停止しない
    tty: true
    # source(ホストマシン)のディレクトリをtarget(コンテナ)にマウントする
    volumes:
      - type: bind
        source: ../javanal
        target: /app
    ports:
      - target: 8080
        published: ${WEB_PORT:-8080}
        protocol: tcp
        mode: host
    #コンテナ内のワーキングディレクトリ
    working_dir: /app

Dockerfile

FROM openjdk:17.0.2-jdk-slim-bullseye

Docker動作確認

上記の手順でdocker-compose.ymlとDockerfileを作成した後、ymlファイルが存在するディレクトリで下記コマンドを実行します。

$ docker compose up -d

以下のようなメッセージが出れば成功です。

[+] Running 1/1
 ⠿ Container docker_app_1  Started                                                                                                                               3.7s

VS Code Remote-Containerの環境設定

javaの開発は、上記コンテナ内のソースコードを編集・デバッグしながら開発を行なっていきますが、Dockerコンテナを起動しただけでは、コンテナ内のソースコードを編集することができません。

そこで、VS Codeの拡張機能であるRemote-Containerを使用することによって、VSCode上でコンテナ内のソースコードを編集できるようにします。

拡張機能のインストール

VSCodeの画面でcmd + shift + xのショートカットを押して、拡張機能ページを表示させます。検索エリアに「remote」と入力すると、下記のRemote Developmentがヒットするのでインストールします。

devcontainer.jsonの作成

下記のように.decontainerフォルダ, devcontainer.jsonを作成します。

├── .devcontainer
│   └── devcontainer.json
├── README.md
├── docker
│   ├── app
│   │   └── Dockerfile
│   └── docker-compose.yml
└── javanal

devcontainer.json

{
  // 任意の名前
  "name": "remote-java",
  // DockerComposeFileを指定
  "dockerComposeFile": "../docker/docker-compose.yml",
  // DockerComposeFileにあるservice名を指定
  "service": "app",
  // コンテナに入ったときの作業ディレクトリ
  "workspaceFolder": "/app",
  "settings": {
      // bashでターミナルを起動
      "terminal.integrated.defaultProfile.linux": "bash"
  },
  // コンテナ内で使いたい拡張機能
  "extensions": [
    // Java関連の拡張機能パック
    "vscjava.vscode-java-pack",
    // Spring Boot関連の拡張機能パック
    "pivotal.vscode-boot-dev-pack",
    "gabrielbb.vscode-lombok"
  ]
}

Remote - Container動作確認

ルートディレクトリでcmd + shift + P を押してコマンドパレットを開く。

「Remote-Containers: Reopen in Container」と入力し、実行する。

画面左下の表示が次の通りになれば起動完了。

これで環境構築は終了

Beginner's Hack

復習用。誰かのためになれば...

javanal#1 - javaでtwitter風webアプリを作る（環境構築）

背景