VSCodeでJava＆PostgreSQLの環境を構築しようとした件

前提

1. プロキシ設定が必要
2. DBはPostgreSQL
3. VsCodeで以下の環境を構築

構成　※意外と躓いたので備忘録

・サーバーサイド：Java（SpringBoot）
・クライアントサイド：Node.js（Nuxt.js）

手順

下準備

1. Dockerの設定にProxy設定を行う
   ID、パスワードが必要な場合は以下を参考に設定
   「http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/」
2. Gitに適当なリポジトリを作成
3. そのリポジトリをCloneしておく
4. コマンドプロンプトでCloneしたディレクトリに移動
5. VSCodeを起動
   code .と入力すれば、カレントディレクトリを開いて起動してくれる

開発用コンテナとPostgreSQLコンテナを準備

1. 「.devcontainer」フォルダを作成し、その中に
   「devcontainer.json」「docker-compose.yml」を作成

devcontainer.json　※SpringBootで使いたいので一式をextensionsに突っ込む

{
  "dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
  "service": "app",
  "workspaceFolder": "/home",
  "extensions": [
    // Language: Java
    "vscjava.vscode-java-pack",
    "redhat.java",
    "vscjava.vscode-java-debug",
    "vscjava.vscode-lombok",
    // Spring Boot
    "pivotal.vscode-boot-dev-pack",
    "pivotal.vscode-spring-boot",
    "vscjava.vscode-spring-initializr",
    "vscjava.vscode-spring-boot-dashboard"
    // Gradle
    "vscjava.vscode-gradle",
    "KabirSarkar.spring-boot-gradle-extension-pack",
    // Swagger
    "adisreyaj.swagger-snippets"
  ]
}

docker-compose.yml　※バージョンと識別子(app)は実体と揃える事

version: '3.2'

services:
  app:
    command: sleep infinity
  db:
    command: sleep infinity

1. ルートに「docker-compose.yml」を作成

docker-compose.yml　※コレが実体

version: '3.2'
services:
  db:
    image: postgres:14
    container_name: springboot_db
    restart: always
    ports:
      - 5432:5432
    environment:
      POSTGRES_USER: 'develop'
      POSTGRES_PASSWORD: 'p@ssw0rd'
      HTTP_PROXY: $HTTP_PROXY
      http_proxy: $http_proxy
      HTTPS_PROXY: $HTTPS_PROXY
      https_proxy: $https_proxy
      FTP_PROXY: $FTP_PROXY
      ftp_proxy: $ftp_proxy
      NO_PROXY: $NO_PROXY
      no_proxy: $no_proxy
    volumes:
      - ./db/init_db:/docker-entrypoint-initdb.d
  app:
    build: ./docker/java
    container_name: springboot
    restart: always
    ports:
      - 8080:8080
    tty: true
    environment:
      HTTP_PROXY: $HTTP_PROXY
      http_proxy: $http_proxy
      HTTPS_PROXY: $HTTPS_PROXY
      https_proxy: $https_proxy
      FTP_PROXY: $FTP_PROXY
      ftp_proxy: $ftp_proxy
      NO_PROXY: $NO_PROXY
      no_proxy: $no_proxy
    depends_on:
      - db
    volumes:
      - ./app/src:/home

1. 「.env」も作成

.env　※プロキシは必要に応じて

HTTP_PROXY=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
http_proxy=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
HTTPS_PROXY=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
https_proxy=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
FTP_PROXY=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
ftp_proxy=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/

1. 「app」フォルダを作成し、その中に
   「src」フォルダを作成　※コレがRemote-Containerでの作業フォルダ
2. 「db」フォルダを作成し、その中に
   「init_db」フォルダを作成し、その中に「init_dbinit.sql」を作成

init_dbinit.sql

-- テーブルをCreate
CREATE TABLE Names (
    seq serial PRIMARY KEY,
    Name VARCHAR(50)
);
-- データを入れておく
INSERT INTO Names
VALUES (null,'鈴木'),(null,'加藤'),(null,'木村');

1. 「docker」フォルダを作成し、その中に「java」フォルダを作成して
   「Dockerfile」を作成

FROM adoptopenjdk/openjdk11

ENV HTTP_PROXY "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"
ENV http_proxy "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"
ENV HTTPS_PROXY "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"
ENV https_proxy "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"
ENV FTP_PROXY "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"
ENV ftp_proxy "http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/"

RUN apt-get update && apt-get install -y unzip
WORKDIR /gradle
RUN curl -L https://downloads.gradle-dn.com/distributions/gradle-7.5-bin.zip -o gradle-7.5-bin.zip
RUN unzip gradle-7.5-bin.zip
ENV GRADLE_HOME=/gradle/gradle-7.5
ENV PATH=$PATH:$GRADLE_HOME/bin
RUN gradle --version

ファイル構成

凡例：[]フォルダ
[root]
├[.devcontainer]
│├devcontainer.json
│└docker-compose.yml
├[app]
│└[src]
├[db]
│└[init_db]
│　└init_dbinit.sql
├[docker]
│└[java]
│　└Dockerfile
├.env
└docker-compose.yml

VSCodeでリモートコンテナ起動

1. VSCodeに「Remote Development＜ms-vscode-remote.vscode-remote-extensionpack＞」
   「日本語パック＜MS-CEINTL.vscode-language-pack-ja＞」をインストール
2. 画面左下の「><」をクリックして「Remote-Containers: Open Folder in Container」を選択

SpringBootのベースを用意

1. 「F1」キーを押下して、「Spring Initializr: Create a Gradle Project」を選択
   ※それぞれの設問はお好きなように。
   　ただ、Javaは11を選択。DockerfileはOpenJDK11なので
   　保存先は「/home/srv」を選択
2. Spring Boot Dashboardを入れているので、機能拡張が有効化されて
   ビルドが実行されるハズ。※ただし、Gradleは動かないと思います。
3. プロジェクトルート「/home/srv」に「gradle.properties」ファイルを作成

gradle.properties

systemProp.http.proxyHost=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
systemProp.http.proxyPort=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
systemProp.https.proxyHost=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/
systemProp.https.proxyPort=http://[Proxy-ID]:[Proxy-Password]@[Proxy-URL]:8080/

nuxt.jsのベースを用意