概要

devcontainerでのNode.jsとPostgreSQLを動かすための環境

作成経緯

普段、参画しているプロジェクトではテストコードを書いていないこともあり、自動テストに興味があって、下記書籍を読み始めました。

実際に手元で作成するための環境としてはdevcontainerを使用して「Node.jsとPostgreSQL(テスト結果確認用のAllure Report)」のコンテナを用意しました。
その際に行った作業内容を記載します。

成果物

最終的には、下記「devcontainer.json」と「docker-compose.yml」を作成しました。

devcontainer.json

{
	"name": "Node + PostgreSQL Dev",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/workspace",
	"features": {
	  "ghcr.io/devcontainers/features/node:1": {
		"version": "20"
	  }
	},
	"forwardPorts": [3000],
	"postCreateCommand": "npm install",
	"mounts": [
	  "source=${localWorkspaceFolder},target=/workspace,type=bind"
	]
  }

docker-compose.yml

version: "3.1"

services:
  app:
    image: mcr.microsoft.com/devcontainers/base:ubuntu
    volumes:
      - ..:/workspace:cached
    command: sleep infinity
    depends_on:
      - db

  db:
    image: postgres:15.1
    restart: no
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: admin
    ports:
      - "5432:5432"
    volumes:
      - ../db/init:/docker-entrypoint-initdb.d

  allure:
    image: frankescobar/allure-docker-service
    ports:
      - "5050:5050"
    volumes:
      - ../e2e/allure-results:/app/allure-results
      - ../e2e/output:/app/allure-reports

上記設定ファイル作成後、アプリケーションを実行、localhostへアクセスすることでアプリケーションの画面が表示されます。
※アプリケーション自体は書籍上で用意していただいている内容をそのまま使用しています

テスト結果確認用のAllure Reportです。
結果確認については下記URLで行っています。
http://localhost:5050/latest-report

変更経緯

devcontainer.json の作成

ベースとなるファイルとしてはchatGPTに聞いて作成してもらいました。
下記がchatGPTが作成したファイルとなります

devcontainer.json

{
  "name": "Node + PostgreSQL Dev",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20"
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install",
  "remoteEnv": {
    "DATABASE_URL": "postgres://postgres:postgres@db:5432/postgres"
  },
  "mounts": [
    "source=${localWorkspaceFolder}/app,target=/workspace,type=bind"
  ]
}

ここから、下記修正を行っています。

mountsの変更
フォルダ構成は書籍上のサンプルアプリの構成を使用
remoteEnvの削除
→環境変数は別途用意した.envで設定しています

docker-compose.ymlの作成

こちらについては書籍上のサンプルアプリで使用されているdocker-compose.ymlを変更して、作成しました。
配置先についても.devcontainer配下に移動しています。
変更点は下記です

app側の追記
書籍上のサンプルアプリケーションはdbについてのみdockerで用意しているため、追加しました
restartはno指定
学習時にだけ起動してくれていれればいいので、変更

allure Report用の環境準備

作成したapp側のコンテナでjavaを入れてあげればallure Reportの実行もおそらくできたと思うのですが、docker-compose.ymlへ記載するようにしました。
また、テスト結果の出力先を参照するようvolumesを指定しています。

その他の変更点

.envの変更
書籍上のサンプルアプリケーションでのもともとの設定値「PGHOST=localhost」から「PGHOST=db」へ変更しました。
アプリケーションサーバもコンテナで動かしている都合上、アプリケーションサーバ側からlocalhostでは接続できないため、変更しています。
私は最初ここを理解しておらず、、提供いただいているDBへのデータ投入のプログラムの実行でエラーとなりました。。
(app側の)package.jsonの変更
書籍上のサンプルアプリケーションでのもともとの設定値「"dev": "docker compose up -d && nodemon src/index.js"」から「"dev": "nodemon src/index.js"」に変更しました