在devContainer中创建Next(React) + SpringBoot(Java)的开发环境，后端部分

2 年 ago
科, 颖
4 minutes

下一个是关于Spring Boot开发环境安装的第二部分，关于后端的部分。
关于前端部分，请点击这里。

组成

    • SDKMAN

 

    • SpringBoot

 

    • gradle

 

    • Java

 

    mySQL

步骤

创建DevContainer

    • 1.VScodeを起動する

 

    適当なフォルダーを作成して、そのフォルダー配下でVSCodeを起動する。
~$ mkdir sample-project-backend
~$ cd sample-project-backend

sample-project-backend$ code .
    • 2.VSCodeのコントロールパネル(ctrl + shift + P)から、「Dev containers:Add Dev Containers Configuration Files…」を選択す

 

    • 3.「Java」を選択

 

    • 4.「Java」のバージョンを選択(17)。

 

    5.CLI等を入れるかと尋ねられるので、何も選択せずに作成をする。以下の感じになればOK
sample-project-backend(root)
  └─ .devcontainer
      └─ devcontainer.json

※如果真的要確保操作正常的話，最好進行驗證，但只是從官方獲取而已，應該沒問題的（笑）。

自定义DevContainer

我想通过使用DockerFile来启动devContainer，所以要进行修改和创建。

    1.devcontainer.jsonを修正
{
	"name": "java-backend",
	"dockerComposeFile" : "./compose.yml",
	"service": "java-backend",
 	"shutdownAction": "stopCompose",
	"workspaceFolder": "/work/backend",

	"customizations": {
		"vscode": {
			"settings": {
				"editor.formatOnSave": true
			},
			"extensions": [
				"mhutchie.git-graph",
			]
		}
	},
    "otherPortsAttributes": {
		"onAutoForward": "ignore"
	},
	"remoteUser": "vscode"
}
    • 2.compose.ymlを作成する。

 

    devcontainer.jsonからcompose.ymlを呼ぶようにしたいので、compose.ymlを作成する。
services:
  java-backend:
    container_name: java-backend
    build: ./docker/java
    volumes:
      - ..:/work/backend:cached
    command: sleep infinity
    • 3.以下のDockerFileを作成する。

 

    ここでは、SDKMANをインストールするためのパッケージと、Gitを追加している。
FROM mcr.microsoft.com/vscode/devcontainers/java:17-jdk-bullseye

RUN apt-get update && apt-get -y install git zip unzip curl && \
curl -s "https://get.sdkman.io" | bash

WORKDIR /work/backend
    • 4.起動して確かめる。

 

    コントロールパネル(ctrl + shift + P)からDev Containers: Rebuild and Reoprn in containerを選択する。起動後にSDKMANのバージョンを確認し下記のようになっていればOK
sdk version 

SDKMAN!
script: 5.18.2
native: 0.4.3
    5.ファイル構成は以下の通り
sample-project-backend(root)
  └─ .devcontainer
      ├─ docker
      │   └─ java
      │       └─ Dockerfile
      ├─ compose.yml
      └─ devcontainer.json

创建一个 Spring 项目。

    1.コンテナを起動している状態で、Spring CLIおよびgradleをインストールしていきます。
sdk install springboot 3.1.5
sdk install gradle 8.4
    2.Spring CLIとgradleの確認をして、下記のようになっていることを確認。
$ spring --version

Spring CLI v3.1.5

$ gradle --version

------------------------------------------------------------
Gradle 8.4
------------------------------------------------------------
    • 3.プロジェクトを作成します。

 

    • 下記のコマンドを使用してプロジェクトの作成を行います。↓軽く説明

gradleの依存関係にspring-boot-starter-webを注入
プロジェクトはgradle(java)を使用
Javaのバージョンを指定(17)
プロジェクト名をsample-appとする。

$ spring init -d=web --type=gradle-project -j=21.0.1 -n=sample-app sample-app 
Using service at https://start.spring.io
Project extracted to '/work/backend/sample-app'

$ mv sample-app/* ./.

尽管已经进行了一些更改，但build.gradle文件如下所示。

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.5'
	id 'io.spring.dependency-management' version '1.1.3'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain{
		languageVersion = JavaLanguageVersion.of(17)
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('bootBuildImage') {
	builder = 'paketobuildpacks/builder-jammy-base:latest'
}

tasks.named('test') {
	useJUnitPlatform()
}
    • 4.ひとまず動作確認

 

    下記のコマンドを使用してとりあえず、プロジェクトを動かしてみましょう。
$ gradle bootRun

由于项目中没有任何内容，我认为在http://localhost:8080/上进行确认时会显示如下界面。

backend_SpringInit_デフォルト.PNG

5.ここからおなじみのHello Worldを表示するように修正します。

VsCodeにてctrl ＋ Cを押下して動作中のgradleを止める

src/main/java/com/example/sampleapp/SampleAppApplication 下記変更を適用します。

package com.example.sampleapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
+ import org.springframework.web.bind.annotation.RequestMapping;
+ import org.springframework.web.bind.annotation.RestController;

+ @RestController
@SpringBootApplication
public class SampleAppApplication {

+	@RequestMapping
+	String SayHello(){
+		return "Hello World";
+	}
	public static void main(String[] args) {
		SpringApplication.run(SampleAppApplication.class, args);
	}

}
    • 6.再度動作確認

 

    • http://localhost:8080/でHello Worldが表示されればOK!!!

 

    この時点のディレクトリは以下の通り
sample-project-backend(root)
  ├─ .devcontainer
  │   ├─ docker
  │   │   └─ java
  │   │       └─ Dockerfile
  │   ├─ compose.yml
  │   └─ devcontainer.json
  │
  ├─ src
  │   ├─ main
  │   │   ├─ resources
  │   │   │   ├─ static
  │   │   │   ├─ templates
  │   │   │   └─ application.properties
  │   │   └─ java
  │   │       └─ com   
  │   │           └─ example  
  │   │               └─ sampleapp
  │   │                   └─ SampleAppApplication.java
  │   └─ test
  │   │   └─ java
  │   │      └─ com   
  │   │          └─ example  
  │   │              └─ sampleapp
  │   │                  └─ SampleAppApplication.java
  │
  ├─ gradle
  │   ├─ gradle-wrapper.jar
  │   └─ gradle-wrapper.properties
  │
  ├─ .gradle/* # 長いので中身割愛
  │   
  ├─ build/*   # 長いので中身割愛 
  ├─ .gitignore
  ├─ build.gradle
  ├─ gradlew
  ├─ gradlew.bat
  ├─ README.md
  └─ setting.gradle

MySQL的建设

    • 1.mySQL用のコンテナの追加

 

    • データを保管するためのデータベースとして今回はmySQLを使用する。

 

    下記のようにcompose.ymlを追加して、mySQL用のコンテナを立ち上げる。
services:
  java-backend:
    container_name: java-backend
    build: ./docker/java
    volumes:
      - ..:/work/backend:cached
    command: sleep infinity
+    depends_on:
+      - mysql
+  
+  mysql:
+    container_name: java-backend-mysql
+    build: ./docker/mysql
+    env_file:
+      - ./docker/mysql/.env
+    ports:
+      - 3306:3306
+    volumes:
+      - db-store:/var/lib/mysql
+
+volumes: 
+  spring-store:
+  spring-logs:
    • 2.ビルドファイルを追加する。

 

    • compose.ymlに直接記載してもよいですが、カスタマイズしやすいようにDockerfileおよび.envを追加する。

 

    ※そもそもフォルダーがないと思うので、フォルダーも併せて作成をお願いします。
FROM mysql:8.0.30

TZ=Asia/Tokyo

MYSQL_DATABASE=spring_db
MYSQL_USER=spring
MYSQL_PASSWORD=password
MYSQL_ROOT_PASSWORD=password
    • 3.疎通確認

 

    • 疎通確認をするために、mysql-clientを入れて動作確認する。

 

    メインのコンテナ用Dockerfileを少しカスタマイズします。
FROM mcr.microsoft.com/vscode/devcontainers/java:1-21-bullseye

- RUN apt-get update && apt-get -y install git zip unzip curl && \
+ RUN apt-get update && apt-get -y install git zip unzip curl default-mysql-client  && \
curl -s "https://get.sdkman.io" | bash

WORKDIR /work/backend

如果能在重新构建并启动容器后，使用命令出现以下类似的提示，即表示成功。

$ mysql -h java-backend-mysql -u spring -ppassword
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.30 MySQL Community Server - GPL

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

其他的定制选项

開發環境的建立已經完成，但在開發過程中可能有一些方便的調整，我們將記錄下來。

添加调试功能

如果你使用VSCode，在侧边栏选择Run and Debug(ctrl + shift + D)，如果是第一次使用，则选择create a launch.json file，这样就会生成下面的用于Java的json文件，从而使得debug功能可用。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Current File",
            "request": "launch",
            "mainClass": "${file}"
        },
        {
            "type": "java",
            "name": "SampleAppApplication",
            "request": "launch",
            "mainClass": "com.example.sampleapp.SampleAppApplication",
            "projectName": "backend"
        }
    ]
}

自动化安装Spring/Gradle。

根据不同情况，容器有时候无法工作，需要经常重启容器。每次都在终端重新安装SpringBoot和Gradle是很麻烦的。虽然仅仅是一个例子，但可以通过在容器启动时执行Shell脚本来解决这个问题。创建一个名为”createCommand.sh”的执行文件，并在”devcontainer.json”中调用它。

#!/bin/bash

# 一時的にSDKのパスを通す
source "/usr/local/sdkman/bin/sdkman-init.sh"

# spring/gradleのインストール
sdk install springboot 3.1.5
sdk install gradle 8.4

+	"postCreateCommand": "bash .devcontainer/createCommand.sh"

将UTC标准时间调整为日本时间。

虽然简单，但可以按照以下方式设置时区。

+ ENV TZ=Asia/Tokyo

添加扩展功能

在VSCode中，您可以选择各种扩展功能。
通过选择左侧边栏中的EXTENSIONS(ctrl + shift + X)，您可以查看扩展功能的列表，并选择安装。此外，您还可以通过选择齿轮图标并选择复制扩展ID来将其添加到devcontainer.json中，在容器启动时自动安装。
以下是一个示例：

	"customizations": {
		"vscode": {
			"extensions": [
				"mhutchie.git-graph",
				"vscjava.vscode-gradle",
				"mikestead.dotenv",
				"cweijan.vscode-mysql-client2"
			]
		}
	}

参考资料

    Spring ドキュメント 入門セクション
bannerAds