初めに
本記事は、Dockerを勉強中(2週間ほど)の投稿者のメモとして使用する記事のため、正しい情報とは限りません。ご注意ください。
本記事は、以下を参考にしております。
Spring boot + Vue.js + MySql + VS Code + Docker で開発環境を構築する
上記URLです
https://qiita.com/PoKoPoKoTa2ry/items/2f9b54518b8158809192
今回目指すもの
タイトルの通りDocker、VSCode,SpringBoot,Mybatis,Gradle,MySQL,Vue.jsを連携した簡易アプリ(検索ボタンを押すとDBのデータが表に反映される)の作成を目指す。また、Bootstrap5(見た目)やVue-Router(ルーティング)、axios(FEとBE間の通信)等も使用します。
前提事項
DockerやVSCodeのインストール、VSCodeの拡張機能(Spring Initializrとかlombokなど)がある程度インストールされていること
使用環境について
本記事で、タイトルの通りDocker、VSCode、SpringBoot、Mybatis、Gradle、MySQL、Vue.jsを使用した開発環境となります。以下は使用環境のバージョンになります。
OSは、Macを使用しております。
MacのOS
macOS Montery 12.3.1
Dockerのバージョン
Client:
Cloud integration: v1.0.22
Version: 20.10.11
API version: 1.41
Go version: go1.16.10
Git commit: dea9396
Built: Thu Nov 18 00:36:09 2021
OS/Arch: darwin/amd64
Context: default
Experimental: true
Server: Docker Engine - Community
Engine:
Version: 20.10.11
API version: 1.41 (minimum version 1.12)
Go version: go1.16.9
Git commit: 847da18
Built: Thu Nov 18 00:35:39 2021
OS/Arch: linux/amd64
Experimental: false
containerd:
Version: 1.4.12
GitCommit: 7b11cfaabd73bb80907dd23182b9347b4245eb5d
runc:
Version: 1.0.2
GitCommit: v1.0.2-0-g52b36a2
docker-init:
Version: 0.19.0
GitCommit: de40ad0
build.gradle (springbootとMybatisのバージョン)
plugins {
id 'org.springframework.boot' version '2.6.7'
id 'io.spring.dependency-management' version '1.0.11.RELEASE'
id 'java'
id 'war'
}
group = 'app'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
compileOnly {
extendsFrom annotationProcessor
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.2'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'mysql:mysql-connector-java'
annotationProcessor 'org.projectlombok:lombok'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
useJUnitPlatform()
}
Gradleのバージョン
------------------------------------------------------------
Gradle 7.4
------------------------------------------------------------
Build time: 2022-02-08 09:58:38 UTC
Revision: f0d9291c04b90b59445041eaa75b2ee744162586
Kotlin: 1.5.31
Groovy: 3.0.9
Ant: Apache Ant(TM) version 1.10.11 compiled on July 10 2021
JVM: 16.0.1 (Oracle Corporation 16.0.1+9-24)
OS: Mac OS X 11.3 x86_64
Javaのバージョン
openjdk version "1.8.0_332"
OpenJDK Runtime Environment (build 1.8.0_332-b09)
OpenJDK 64-Bit Server VM (build 25.332-b09, mixed mode)
MySQLのバージョン
mysql Ver 8.0.29 for Linux on x86_64 (MySQL Community Server - GPL)
Vueのバージョン
app@0.1.0 /usr/src/app
+-- @vue/cli-plugin-babel@5.0.4
| `-- @vue/babel-preset-app@5.0.4
| `-- vue@3.2.33 deduped
+-- bootstrap-vue@2.22.0
| `-- portal-vue@2.1.7
| `-- vue@2.6.14
+-- vue-router@4.0.13
| `-- vue@3.2.33 deduped
`-- vue@3.2.33
`-- @vue/server-renderer@3.2.33
`-- vue@3.2.33 deduped
手順の大まかな流れ
構築フロー
①最低限のフォルダ、ファイル構成の準備 #shを作ったので実行するだけ
②Dockerfileや設定ファイルの作成
③spring_projectの作成 #spring initializrを使用
④コンテナの作成(DockerのBuildを実施）
⑤vue_projectの作成(vue-cliのインストール等の実施)
⑥DBの作成(Tableの作成やデータの挿入)
⑦開発1(Vue.js編)
⑧開発2(Spring編)
⑨動作確認
⑩コンテナの削除
次の見出しから手順です。
手順１：ファイル・フォルダ構成の確認・準備
初めに準備する最低限のファイル・フォルダの構成です。
任意の場所で作成してください。フォルダ名は任意に設定して問題ないですがこの後に作成するDockerfileの指定するパスが変更されるので注意してください。
ファイル・フォルダ構成
「*」はファイルです
「-」はフォルダです
・プロジェクト名(名前は任意)
-.devcontainer
*devcontainer.json
-docker
-mysql
-settings
-sql
*init.sql
*Dockerfile
*my.cnf
-spring
*Dockerfile
-vue
*Dockerfile
*docker-compose.yml
-spring_project
-vue_project
*gitkeep
以下のようなシェルを作成し、任意の場所で実行すれば、上記の最低限のフォルダやファイルを作成します。
※spring_projectはSpring Initializrでこの後別途作成するので作りません。
init.sh
#!/bin/bash
echo -n "任意のプロジェクト名を入力してください:"
read PROJECTNAME
mkdir $PROJECTNAME
#devcontainer関連を作成
mkdir $PROJECTNAME/.devcontainer
touch $PROJECTNAME/.devcontainer/devcontainer.json
mkdir $PROJECTNAME/docker
#mysql関連を作成
mkdir $PROJECTNAME/docker/mysql
mkdir $PROJECTNAME/docker/mysql/settings
mkdir $PROJECTNAME/docker/mysql/sql
touch $PROJECTNAME/docker/mysql/sql/init.sql
touch $PROJECTNAME/docker/mysql/Dockerfile
touch $PROJECTNAME/docker/mysql/my.cnf
#spring関連を作成
mkdir $PROJECTNAME/docker/spring
touch $PROJECTNAME/docker/spring/Dockerfile
#vue関連を作成
mkdir $PROJECTNAME/docker/vue
touch $PROJECTNAME/docker/vue/Dockerfile
#docker-compose.ymlを作成
touch $PROJECTNAME/docker/docker-compose.yml
#vue_project関連を作成
mkdir $PROJECTNAME/vue_project
touch $PROJECTNAME/vue_project/gitkeep
cd $PROJECTNAME
#VSCodeを起動
code .
任意の場所で実行する
init.shの実行コマンド
sh ./init.sh
プロジェクト名を「Docker_Spring_Vue_MySQL」で作成する
手順2：Dockerfileや設定ファイル等の作成
(1)docker-compose.ymlの作成
.Docker_Spring_Vue_MySQL/docker/docker-compose.yml
version: '3.6'
services:
mysql:
image: mysql:8.0
container_name: mysql
command: --default-authentication-plugin=mysql_native_password
build: ./mysql
environment:
MYSQL_DATABASE: "testdb" #DBの名前は任意に設定してください
MYSQL_ROOT_USER: "root" #root権限のユーザ名は任意に設定してください
MYSQL_ROOT_PASSWORD: "root" #root権限のパスワードは任意に設定してください
MYSQL_USER: "user" #作業ユーザ権限のユーザ名は任意に設定してください
MYSQL_PASSWORD: "user" #作業ユーザ権限のパスワードは任意に設定してください
TZ: "Asia/Tokyo"
ports:
- 3306:3306
volumes:
- ./mysql/sql:/docker-entrypoint-initdb.d # 「:」の左がローカル環境で右がコンテナの環境
- ./mysql/settings/:/var/lib/mysql # 「:」の左がローカル環境で右がコンテナの環境
spring:
image: openjdk:8
container_name: spring
build: ./spring
depends_on:
- mysql
ports:
- "8080:8080"
tty: true
volumes:
- ../spring_project:/srv:cached # 「:」の左がローカル環境で右がコンテナの環境
working_dir: /srv
vue:
container_name: vue
build: ./vue
ports:
- 9000:8080
volumes:
- ../vue_project:/usr/src/app:cached # 「:」の左がローカル環境で右がコンテナの環境
stdin_open: true
tty: true
volumes:
mysql_db:
driver: local
(2)mysqlのDockerfileと設定ファイル等の作成
.Docker_Spring_Vue_MySQL/docker/mysql/Dockerfile
FROM mysql
EXPOSE 3306
ADD ./my.cnf /etc/mysql/conf.d/my.cnf
CMD ["mysqld"]
.Docker_Spring_Vue_MySQL/docker/mysql/my.cnf
[mysqld]
character-set-server=utf8
[mysql]
default-character-set=utf8
[client]
default-character-set=utf8
テーブルの作成とデータを挿入する任意のSQL文を作成してください
.Docker_Spring_Vue_MySQL/docker/mysql/sql/init.sql
CREATE DATABASE IF NOT EXISTS testdb;
CREATE TABLE IF NOT EXISTS user(
id INTEGER not null,
name varchar(20) not null,
PRIMARY KEY (id, name)
);
INSERT INTO user(id, name)VALUES(1, 'Tarou');
(3)springのDockerfileの作成
.Docker_Spring_Vue_MySQL/docker/spring/Dockerfile
FROM openjdk:8
VOLUME /tmp
WORKDIR /app
(4)vueのDockerfileの作成
.Docker_Spring_Vue_MySQL/docker/vue/Dockerfile
FROM node:14
WORKDIR /usr/src/app/
RUN npm install -g npm && \
npm install -g @vue/cli
手順3：spring_projectの作成
Spring Initializrを使用して、spring_projectを作成します。
本手順では、VSCodeの拡張機能を使用しています。
「Spring Boot Extension Pack」をインストールすれば、自動で必要な拡張機能がインストールされるはずです。
「command + shift + p」を押下し、「Spring Initializr: Create Gradle Project...」を選択
「バージョン2.6.7」を選択
「Java」を選択
デフォルトのパッケージ名を決めます。
何でも良いかと思いますが、今回はシンプルに「app」とします。
プロジェクト名を決めます。
「spring_project」にします。任意のプロジェクト名にしたい場合は、「docker-compose.yml」の「volumes:」の「spring_project」を任意のプロジェクト名と一致させる必要があるので注意してください。
今回、デプロイまでは実施しないのでどちらでも構いません。一応「War」で実施します。
Javaのバージョン8を選択します。変更したい場合は、「docker-compose.yml」と「spring」の「Dockerfile」の修正も必要になります。
依存ライブラリを注入します。
いくつ追加していただいても構いませんが、最低限以下のものを追加してください。
依存ライブラリ名
Spring Boot Devtools
Lombok
Spring Web
Mybatis Framework
MySQL Driver
「Generate into this folder」を押下
プロジェクトの作成成功すると以下のように「spring_project」が追加されます。
手順4:コンテナの作成
dockerコマンドを実行して、コンテナの作成を行います。
実行コマンド
$ cd docker
$ docker-compose build
(以下のようになればOK)
Building mysql
[+] Building 50.4s (7/7) FINISHED
...
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Building spring
[+] Building 70.9s (6/6) FINISHED
...
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Building vue
[+] Building 214.9s (7/7) FINISHED
...
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
$ docker-compose up -d
(以下のようになればOK)
Creating network "docker_default" with the default driver
Creating vue ... done
Creating mysql ... done
Creating spring ... done
「docker-compose build」実行時に以下のようなエラーが出た場合は、「code ERR_SOCKET_TIMEOUT」とあるようにタイムアウトなので再度実行を試してみてください。
ERRORが出た場合
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Building vue
[+] Building 181.0s (6/6) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 36B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:14 2.1s
=> [1/3] FROM docker.io/library/node:14@sha256:2f39686f6d0b2687550659367fa11f56018a0f782b7e30f1a0ea56b11dece124 0.0s
=> CACHED [2/3] WORKDIR /usr/src/app/ 0.0s
=> ERROR [3/3] RUN npm install -g npm && npm install -g @vue/cli 178.7s
------
> [3/3] RUN npm install -g npm && npm install -g @vue/cli:
#6 32.47 /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
#6 32.47 /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
#6 32.60 + npm@8.9.0
#6 32.60 added 63 packages from 18 contributors, removed 299 packages and updated 138 packages in 30.03s
#6 178.6 npm ERR! code ERR_SOCKET_TIMEOUT
#6 178.6 npm ERR! errno ERR_SOCKET_TIMEOUT
#6 178.6 npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/express: Socket timeout
#6 178.6 npm ERR! network This is a problem related to network connectivity.
#6 178.6 npm ERR! network In most cases you are behind a proxy or have bad network settings.
#6 178.6 npm ERR! network
#6 178.6 npm ERR! network If you are behind a proxy, please make sure that the
#6 178.6 npm ERR! network 'proxy' config is set properly. See: 'npm help config'
#6 178.6
#6 178.6 npm ERR! A complete log of this run can be found in:
#6 178.6 npm ERR! /root/.npm/_logs/2022-05-08T14_52_17_816Z-debug-0.log
------
executor failed running [/bin/sh -c npm install -g npm && npm install -g @vue/cli]: exit code: 1
ERROR: Service 'vue' failed to build : Build failed
成功した場合
失敗した場合
正常にインストールできたか確認しましょう。
実行コマンド
$ docker exec -it mysql /bin/bash
root@06d477b04065:/# mysql --version
(以下が表示されればMySQLは正常にインストールされる。)
mysql Ver 8.0.29 for Linux on x86_64 (MySQL Community Server - GPL)
root@06d477b04065:/# exit
exit
docker $ docker exec -it spring /bin/bash
root@3fcb4e4b0fe5:/srv# java -version
(以下が表示されればJavaは正常にインストールされる。)
openjdk version "1.8.0_332"
OpenJDK Runtime Environment (build 1.8.0_332-b09)
OpenJDK 64-Bit Server VM (build 25.332-b09, mixed mode)
root@3fcb4e4b0fe5:/srv# exit
exit
docker $ docker exec -it vue /bin/bash
root@8fcff5f29ed5:/usr/src/app# npm -version
(以下が表示されればNode.jsは正常にインストールされる。)
8.9.0
root@8fcff5f29ed5:/usr/src/app# node --version
(以下が表示されればNode.jsは正常にインストールされる。)
v14.19.1
root@8fcff5f29ed5:/usr/src/app# exit
exit
Gitを使用する方は一旦この辺りでpushしましょう。
手順5:vue_projectの作成
実行コマンド
$ docker exec -it vue /bin/bash
root@8fcff5f29ed5:/usr/src/app# vue create .
Vue CLI v5.0.4
? Generate project in current directory? (Y/n) Y
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies:
USE Yarn
> USE NPM
(以下のようになればVueのインストール成功)
...
🎉 Successfully created project app.
👉 Get started with the following commands:
$ npm run serve
Vueの実行をして、正常にインストールされた確認します。
実行コマンド
root@b330486c1252:/usr/src/app# npm run serve
(以下のようになれば成功)
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 26011ms 4:24:15 PM
App running at:
- Local: http://localhost:8080/
- Network: http://172.19.0.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
ブラウザで以下のURLにアクセスし、以下の画像のように表示されるか確認する。
http://localhost:9000/
手順6:DBの作成(Tableの作成やデータの挿入)
コンテナ作成時に既にデータは挿入されているはずですが、もしない場合は、以下のコマンドを試してください。
実行コマンド
$ docker-compose exec mysql /bin/bash
root@5edee7944240:/# mysql -h 127.0.0.1 -P 3306 -uroot -proot
mysql> show databases;
mysql> use testdb;
mysql> show tables;
mysql> select * from user;
(データがあれば問題なし、なかったら以下を実行する)
mysql> source /docker-entrypoint-initdb.d/init.sql;
mysql> select * from user;
(以下のように表示されれば成功)
+----+-------+
| id | name |
+----+-------+
| 1 | Tarou |
+----+-------+
手順7:開発1(Vue.js編)
以下は作成する機能の大まかなイメージです。
大まかなイメージ
(1)ホーム画面(Home.vue):検索画面(Search.vue)にアクセスできる
(2)検索画面(Search.vue):検索ボタンがあり、押下すると表にデータが表示される。ホーム画面(Home.vue)に戻る
(3)ヘッダー(Header.vue):ホーム画面(Home.vue)、検索画面(Search.vue)共通のヘッダー
Vue.jsの開発は以下のものを作成します。
開発工程
(1)モジュールのインストール(Bootstrap5)
(2)モジュールのインストール(Vue Router)
(3)モジュールのインストール(axios)
(4)main.jsの修正
(5)vue.config.jsの修正
(6)route.jsの作成
(7)Header.vueの作成
(8)Home.vueの作成
(9)Search.vueの作成
(10)App.vueの修正
(11)Vueの動作確認
(1) モジュールのインストール(Bootstrap5)
Vue.jsでBootstrap5を使えるようにします。
実行コマンド
$ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm install vue bootstrap-vue bootstrap
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
added 16 packages, and audited 940 packages in 1m
100 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
警告メッセージが出るかもしれませんが、一旦無視していただいても問題ないと思います。
(いくつか調べましたがうまくいきませんでした。すみません・・・)
一応調べたことを記載しときます。
調べたこと
$ docker exec -it vue /bin/bash
(1) 警告メッセージのとおり、「popper」のバージョンが古いと言われているので、新しいバージョンにする。
npm uninstall @popperjs/core
npm install @popperjs/core
(2)以下のコマンドを実行
npm audit fix
npm audit fix --force
※もしかしたらvueのバージョンが変更される可能性があるのでその場合は
$ npm uninstall vue
$ npm install vue@3.2.13
動作確認は他のモジュールのインストールが終わった後に行います。
(2)モジュールのインストール(Vue Router)
Vue Routerをインストールします。
実行コマンド
$ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm install vue-router@4
added 2 packages, and audited 957 packages in 8s
101 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
(3)モジュールのインストール(axios)
axiosをインストールします。
実行コマンド
docker $ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm install axios
added 5 packages, and audited 962 packages in 8s
101 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
(4)main.jsの修正
main.jsを以下のように修正してください。
.Docker_Spring_Vue_MySQL/vue_project/src/main.js
import App from './App.vue'
import router from './router/router.js'
import { createApp } from 'vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.js"
createApp(App).use(router).mount('#app')
(5)vue.config.jsの修正
vue.config.jsを以下のように修正してください。
.Docker_Spring_Vue_MySQL/vue_project/vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
devtool: 'source-map',
},
})
(6)route.jsの作成
「.Docker_Spring_Vue_MySQL/vue_project/src/」の下に「route」フォルダーを作成し、「route」フォルダー内に「route.js」を新規作成します。
.Docker_Spring_Vue_MySQL/vue_project/src/router/route.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Search from '../pages/app/Search.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/search',
name: 'Search',
component: Search
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
(7)Header.vueの作成
「GameGenreSelector/vue_project/src/components/」の下に「Header.vue」を新規作成します。
GameGenreSelector/vue_project/src/components/Header.vue
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/search">search</a>
</div>
</div>
</div>
</nav>
</template>
(8)Home.vueの作成
GameGenreSelector/vue_project/src/の下に「pages」フォルダーを作成し、「pages」フォルダー内に「Home.vue」を新規作成します。
GameGenreSelector/vue_project/src/pages/Home.vue
<template>
<h1>Home</h1>
</template>
(9)Search.vueの作成
GameGenreSelector/vue_project/src/の下に「app」フォルダーを作成し、「app」フォルダー内に「Search.vue」を新規作成します。
GameGenreSelector/vue_project/src/pages/app/Search.vue
<template>
<div>
<button @click="search" type="button" class="btn btn-primary">検索</button>
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">ユーザ名</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.message">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return{
items: []
}
},
methods: {
search (){
axios
.get('http://localhost:8080/search')
.then(
response => {
for (let i=0; i<response.data.length; i++) {
this.items.push(response.data[i]);
}
console.log(this.items);
}
).catch(
error => {
let errorData1 = {id: 2, name: "Jirou"};
let errorData2 = {id: 3, name: "Saburou"};
this.items.push(errorData1);
this.items.push(errorData2);
}
);
}
}
}
</script>
(10)App.vueの修正
vue.config.jsを以下のように修正してください。
.GameGenreSelector/vue_project/src/App.vue
<template>
<div id="app">
<Header/>
<router-view name="Header"></router-view>
<router-view></router-view>
</div>
</template>
<script>
import Header from './components/Header'
export default {
name: 'App',
components: {
Header
}
}
</script>
(11)Vueの動作確認
お待たせしました。Vueの動作確認をしましょう。
実行コマンド
docker $ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm run serve
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 37356ms 3:48:51 PM
App running at:
- Local: http://localhost:8080/
- Network: http://172.19.0.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
もし警告メッセージが出た場合は次のコマンドを実行してください。
警告メッセージが出た場合
docker $ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm run serve
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
WARNING Compiled with 1 warning 3:37:56 PM
warning in ./node_modules/bootstrap/dist/css/bootstrap.min.css
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
App running at:
- Local: http://localhost:8080/
- Network: http://172.19.0.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
####(このコマンドを実行)####
root@b330486c1252:/usr/src/app# npm install autoprefixer@10.4.5 --save-exact
changed 1 package, and audited 962 packages in 11s
101 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
####(再度をサービスを起動する)####
root@b330486c1252:/usr/src/app# npm run serve
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 37356ms 3:48:51 PM
App running at:
- Local: http://localhost:8080/
- Network: http://172.19.0.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
ブラウザでアクセスしてください。
http://localhost:9000/
検索画面へアクセス(searchをクリック)してください。
または以下へブラウザでアクセスしてください。
http://localhost:9000/search
検索ボタンを押下してください。
・Bootstrap5はナビゲーションバーやボタンのレイアウトが上手くいけば成功です。
・Vue Routerは画面遷移が上手くいっていたら成功です。
・axiosはまだspringと連携していないので、catchで作成したerrorData1,errorData2の内容が反映されていれば成功です。
お疲れ様です。これで、Vueの開発は成功です。
次からSpringの開発を行います。
手順8:開発2(Spring編)
初めにVSCodeで「Remote Development」と「Remote - SSH: Editing Configuration Files」の拡張機能をインストールしましょう。コンテナ内のspringプロジェクトを直接操作したりデバッグ等をするのに使用します。
次に、今まで触れていなかった「.Docker_Spring_Vue_MySQL/.devcontainer/」の「devcontainer.json」を作成しましょう。
.Docker_Spring_Vue_MySQL/.devcontainer/devcontainer.json
{
"name": "spring-vue-mysql",
"workspaceFolder": "/srv",
"dockerComposeFile": "../docker/docker-compose.yml",
"settings": {
// Macの場合
"terminal.integrated.defaultProfile.osx": "/bin/bash"
// Windows(WSL)の場合(おそらく・・・動作確認はしていません。)
// "terminal.integrated.defaultProfile.linux": "/bin/bash",
},
"service": "spring", //attachするコンテナはspringを指定
"extensions": [
"vscjava.vscode-java-pack", // JavaExtensionPack
"pivotal.vscode-boot-dev-pack", // Spring Boot Extension Pack
"gabrielbb.vscode-lombok" //Lombok Annotations Support For VS Code
]
}
作成したら、VSCodeの左下、歯車(設定)の下の「><」のような部分をクリックしましょう。
次に、「Reopen in Container Remote-Containers」を選択します。
すると以下のようにVSCodeが切り替わると思います。
springのプロジェクトが表示されていると思います。
最初はインストール等を行なうので時間がかかるかもしれが、時間がたてば上記のようにspringのプロジェクトが表示されるはずです。
お待たせしました。それでは、Springの開発を始めましょう。
以下は作成する機能の大まかなイメージです。
大まかなイメージ
(1)検索ボタン押下後、DBにアクセスし、user情報を取得する。
(2)取得したDBの情報を画面に返す
Springの開発は以下のものを作成します。
開発工程
(1)application.propertiesの設定
(2)Accessorの実装
(3)Interfaceの実装
(4)Controllerの実装
(5)Mapper.javaの実装
(6)Mapper.xmlの実装
(7)Serviceの実装
(8)実行
(1)application.propertiesの設定
「application.properties」はMySQLへ接続するための設定を記載します。そのために、VSCodeではないターミナルを開いて、MySQLのコンテナに入り、catコマンドでコンテナのIPアドレスを調べましょう。
実行コマンド
$ docker exec -it mysql /bin/bash
root@5edee7944240:/# cat /etc/hosts
127.0.0.1 localhost
::1 localhost ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
172.19.0.3 5edee7944240
catコマンドの最後のIPアドレスが自身のMySQLが存在する環境のIPアドレスです。
今回、投稿者の場合は、「172.19.0.3」ですが、人によってIPアドレスは違うと思うので任意で読み替えてください。
それでは、「application.properties」の設定を行いましょう。
/srv/src/main/resources/application.properties
#※localhostを指定すると、springコンテナのIPアドレスを指定していることになるのでエラーになる
#spring.datasource.url=jdbc:mysql://localhost:3306/testdb
#※IPアドレスに注意(localhost:3306はコンテナが違うため)
spring.datasource.url=jdbc:mysql://172.19.0.3:3306/testdb
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis.configuration.map-underscore-to-camel-case=true
##以下はログ詳細に出してくれるものなのであってもなくても良いです。
# Web関連のロガーのログレベルをDEBUG or TRACEへ
logging.level.web=trace
# Spring MVCへのリクエスト/レスポンスログの詳細情報出力を有効化
spring.mvc.log-request-details=true
ローカル環境だと1行目のようにlocalhostと指定しがちですが、localhostを指定するとspringコンテナのIPアドレスを指定していることになるのでMySQLのコンテナのIPアドレスと異なるので接続できずにエラーになってしまいます。
なので最初に、catコマンドでMySQLのコンテナのIPアドレスを調べてもらいました。
(2)Accessorの実装
DBからデータを取得するときと画面にデータを返すための「UserInfo.java」を実装しましょう。
/srv/src/main/java/app/spring_project/testapp/accessors/UserInfo.java
package app.spring_project.testapp.accessors;
import lombok.Data;
@Data
public class UserInfo {
private int id;
private String name;
}
(3)Interfaceの実装
ControllerクラスとServiceクラスを繋げるためのInterfaceを実装します。
/srv/src/main/java/app/spring_project/testapp/interfaces/SearchServiceImpl.java
package app.spring_project.testapp.interfaces;
import java.util.List;
import app.spring_project.testapp.accessors.UserInfo;
public interface SearchServiceImpl {
List<UserInfo> callService();
}
(4)Controllerの実装
Controllerの実装をします。今回は検索機能なので「SearchController.java」を実装しましょう。
「Search.vue」のaxiosで「 http://localhost:8080/search 」にリクエストしているのでそれを受け取れるようにします。
/srv/src/main/java/app/spring_project/testapp/accessors/SearchController.java
package app.spring_project.testapp.controllers;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import app.spring_project.testapp.accessors.UserInfo;
import app.spring_project.testapp.interfaces.SearchServiceImpl;
@RestController
@CrossOrigin(origins = {"http://localhost:9000"})
public class SearchController {
@Autowired
private SearchServiceImpl service;
@RequestMapping("/search")
public List<UserInfo> search() {
return service.callService();
}
}
(5)Mapper.javaの実装
検索するSQLを呼び出すためのインターフェース、「SearchMapper.java」を実装しましょう。
/srv/src/main/java/app/spring_project/testapp/mapper/SearchMapper.java
package app.spring_project.testapp.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import app.spring_project.testapp.accessors.UserInfo;
@Mapper
public interface SearchMapper {
List<UserInfo> selectUser();
}
(6)Mapper.xmlの実装
「user」テーブルから「id,name」を取得するSQLを作成するために「SearchMapper.xml」を実装しましょう。
/srv/src/main/resources/app/spring_project/testapp/mapper/SearchMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="app.spring_project.testapp.mapper.SearchMapper">
<select id="selectUser" resultType="app.spring_project.testapp.accessors.UserInfo">
SELECT id, name FROM user
</select>
</mapper>
(7)Serviceの実装
SQL結果を呼び出す「SearchService.java」クラスを実装しましょう。
/srv/src/main/resources/app/spring_project/testapp/services/SearchService.java
package app.spring_project.testapp.services;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import app.spring_project.testapp.accessors.UserInfo;
import app.spring_project.testapp.interfaces.SearchServiceImpl;
import app.spring_project.testapp.mapper.SearchMapper;
@Service
public class SearchService implements SearchServiceImpl{
@Autowired
private SearchMapper mapper;
@Override
public List<UserInfo> callService() {
return mapper.selectUser();
}
}
(8)spring実行
「/srv/src/main/java/app/spring_project/SpringProjectApplication.java」を開くとmainメソッドの上に「Run | Debug」と表示されていると思うのでどちらでも構いませんがクリックするとspringのプロジェクトがされるのでエラーがないか確認しましょう。
成功すると以下のようになります。
自分は一度以下のエラーに合いました。原因は正確にはわからなかったのですが、最初は「SearchMapper.xml」の2~4行目()の部分を1行にしていたのですが、改行させました。また、「~[/srv/bin/main/app/spring_project/testapp/mapper/SearchMapper.class]: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.」のようなエラーが出ていたので、「SearchMapper.xml」の1~4行目をそのままコピペして、エラーが出るかもしれません。手入力してみると良いかもしれません。
エラーログ
root@e1c653c4dcd1:/srv# cd /srv ; /usr/bin/env /usr/local/openjdk-8/bin/java -cp /tmp/cp_3eelvnh0sq5e0cqtb2r7qdf0l.jar app.spring_project.SpringProjectApplication
12:01:52.636 [Thread-2] DEBUG org.springframework.boot.devtools.restart.classloader.RestartClassLoader - Created RestartClassLoader org.springframework.boot.devtools.restart.classloader.RestartClassLoader@5de3c9de
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.6.7)
2022-05-10 12:01:59.957 INFO 59857 --- [ restartedMain] a.s.SpringProjectApplication : Starting SpringProjectApplication using Java 1.8.0_332 on e1c653c4dcd1 with PID 59857 (/srv/bin/main started by root in /srv)
2022-05-10 12:01:59.981 INFO 59857 --- [ restartedMain] a.s.SpringProjectApplication : No active profile set, falling back to 1 default profile: "default"
2022-05-10 12:02:01.171 INFO 59857 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable
2022-05-10 12:02:20.938 INFO 59857 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)
2022-05-10 12:02:21.049 INFO 59857 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2022-05-10 12:02:21.051 INFO 59857 --- [ restartedMain] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.62]
2022-05-10 12:02:21.568 INFO 59857 --- [ restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2022-05-10 12:02:21.569 INFO 59857 --- [ restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 20391 ms
2022-05-10 12:02:21.603 TRACE 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Added existing Servlet initializer bean 'dispatcherServletRegistration'; order=2147483647, resource=class path resource [org/springframework/boot/autoconfigure/web/servlet/DispatcherServletAutoConfiguration$DispatcherServletRegistrationConfiguration.class]
2022-05-10 12:02:21.732 TRACE 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Created Filter initializer for bean 'characterEncodingFilter'; order=-2147483648, resource=class path resource [org/springframework/boot/autoconfigure/web/servlet/HttpEncodingAutoConfiguration.class]
2022-05-10 12:02:21.739 TRACE 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Created Filter initializer for bean 'formContentFilter'; order=-9900, resource=class path resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration.class]
2022-05-10 12:02:21.742 TRACE 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Created Filter initializer for bean 'requestContextFilter'; order=-105, resource=class path resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration$WebMvcAutoConfigurationAdapter.class]
2022-05-10 12:02:21.805 DEBUG 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Mapping filters: characterEncodingFilter urls=[/*] order=-2147483648, formContentFilter urls=[/*] order=-9900, requestContextFilter urls=[/*] order=-105
2022-05-10 12:02:21.806 DEBUG 59857 --- [ restartedMain] o.s.b.w.s.ServletContextInitializerBeans : Mapping servlets: dispatcherServlet urls=[/]
2022-05-10 12:02:24.262 ERROR 59857 --- [ restartedMain] o.m.spring.mapper.MapperFactoryBean : Error while adding the mapper 'interface app.spring_project.testapp.mapper.SearchMapper' to configuration.
org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.apache.ibatis.parsing.XPathParser.createDocument(XPathParser.java:263) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.parsing.XPathParser.<init>(XPathParser.java:127) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.xml.XMLMapperBuilder.<init>(XMLMapperBuilder.java:81) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.xml.XMLMapperBuilder.<init>(XMLMapperBuilder.java:76) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.annotation.MapperAnnotationBuilder.loadXmlResource(MapperAnnotationBuilder.java:178) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.annotation.MapperAnnotationBuilder.parse(MapperAnnotationBuilder.java:118) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.binding.MapperRegistry.addMapper(MapperRegistry.java:72) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.session.Configuration.addMapper(Configuration.java:864) ~[mybatis-3.5.9.jar:3.5.9]
at org.mybatis.spring.mapper.MapperFactoryBean.checkDaoConfig(MapperFactoryBean.java:80) ~[mybatis-spring-2.0.7.jar:2.0.7]
at org.springframework.dao.support.DaoSupport.afterPropertiesSet(DaoSupport.java:44) [spring-tx-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1863) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1800) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:620) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.config.DependencyDescriptor.resolveCandidate(DependencyDescriptor.java:276) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1389) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1309) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:656) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:639) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:119) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessProperties(AutowiredAnnotationBeanPostProcessor.java:399) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1431) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:619) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.config.DependencyDescriptor.resolveCandidate(DependencyDescriptor.java:276) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1389) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1309) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:656) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:639) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:119) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessProperties(AutowiredAnnotationBeanPostProcessor.java:399) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1431) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:619) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) [spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:953) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:918) ~[spring-context-5.3.19.jar:5.3.19]
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:583) ~[spring-context-5.3.19.jar:5.3.19]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:145) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:740) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:415) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:303) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1312) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1301) ~[spring-boot-2.6.7.jar:2.6.7]
at app.spring_project.SpringProjectApplication.main(SpringProjectApplication.java:10) ~[main/:na]
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_332]
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_332]
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_332]
at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_332]
at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.6.7.jar:2.6.7]
Caused by: org.xml.sax.SAXParseException: Premature end of file.
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:204) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:178) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:399) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:326) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1466) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl$PrologDriver.next(XMLDocumentScannerImpl.java:1013) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:601) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:504) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:841) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:770) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.DOMParser.parse(DOMParser.java:243) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.jaxp.DocumentBuilderImpl.parse(DocumentBuilderImpl.java:338) ~[na:1.8.0_332]
at org.apache.ibatis.parsing.XPathParser.createDocument(XPathParser.java:261) ~[mybatis-3.5.9.jar:3.5.9]
... 60 common frames omitted
2022-05-10 12:02:24.332 WARN 59857 --- [ restartedMain] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'searchController': Unsatisfied dependency expressed through field 'service'; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'searchService': Unsatisfied dependency expressed through field 'mapper'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'searchMapper' defined in file [/srv/bin/main/app/spring_project/testapp/mapper/SearchMapper.class]: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
2022-05-10 12:02:24.488 INFO 59857 --- [ restartedMain] o.apache.catalina.core.StandardService : Stopping service [Tomcat]
2022-05-10 12:02:24.761 INFO 59857 --- [ restartedMain] ConditionEvaluationReportLoggingListener :
Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2022-05-10 12:02:25.476 ERROR 59857 --- [ restartedMain] o.s.boot.SpringApplication : Application run failed
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'searchController': Unsatisfied dependency expressed through field 'service'; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'searchService': Unsatisfied dependency expressed through field 'mapper'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'searchMapper' defined in file [/srv/bin/main/app/spring_project/testapp/mapper/SearchMapper.class]: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:659) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:639) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:119) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessProperties(AutowiredAnnotationBeanPostProcessor.java:399) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1431) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:619) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:953) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:918) ~[spring-context-5.3.19.jar:5.3.19]
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:583) ~[spring-context-5.3.19.jar:5.3.19]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:145) ~[spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:740) [spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:415) [spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:303) [spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1312) [spring-boot-2.6.7.jar:2.6.7]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1301) [spring-boot-2.6.7.jar:2.6.7]
at app.spring_project.SpringProjectApplication.main(SpringProjectApplication.java:10) [main/:na]
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_332]
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_332]
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_332]
at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_332]
at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) [spring-boot-devtools-2.6.7.jar:2.6.7]
Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'searchService': Unsatisfied dependency expressed through field 'mapper'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'searchMapper' defined in file [/srv/bin/main/app/spring_project/testapp/mapper/SearchMapper.class]: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:659) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:639) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:119) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessProperties(AutowiredAnnotationBeanPostProcessor.java:399) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1431) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:619) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.config.DependencyDescriptor.resolveCandidate(DependencyDescriptor.java:276) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1389) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1309) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:656) ~[spring-beans-5.3.19.jar:5.3.19]
... 25 common frames omitted
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'searchMapper' defined in file [/srv/bin/main/app/spring_project/testapp/mapper/SearchMapper.class]: Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1804) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:620) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:208) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.config.DependencyDescriptor.resolveCandidate(DependencyDescriptor.java:276) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1389) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1309) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.resolveFieldValue(AutowiredAnnotationBeanPostProcessor.java:656) ~[spring-beans-5.3.19.jar:5.3.19]
... 39 common frames omitted
Caused by: java.lang.IllegalArgumentException: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.mybatis.spring.mapper.MapperFactoryBean.checkDaoConfig(MapperFactoryBean.java:83) ~[mybatis-spring-2.0.7.jar:2.0.7]
at org.springframework.dao.support.DaoSupport.afterPropertiesSet(DaoSupport.java:44) ~[spring-tx-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1863) ~[spring-beans-5.3.19.jar:5.3.19]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1800) ~[spring-beans-5.3.19.jar:5.3.19]
... 49 common frames omitted
Caused by: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Premature end of file.
at org.apache.ibatis.parsing.XPathParser.createDocument(XPathParser.java:263) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.parsing.XPathParser.<init>(XPathParser.java:127) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.xml.XMLMapperBuilder.<init>(XMLMapperBuilder.java:81) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.xml.XMLMapperBuilder.<init>(XMLMapperBuilder.java:76) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.annotation.MapperAnnotationBuilder.loadXmlResource(MapperAnnotationBuilder.java:178) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.builder.annotation.MapperAnnotationBuilder.parse(MapperAnnotationBuilder.java:118) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.binding.MapperRegistry.addMapper(MapperRegistry.java:72) ~[mybatis-3.5.9.jar:3.5.9]
at org.apache.ibatis.session.Configuration.addMapper(Configuration.java:864) ~[mybatis-3.5.9.jar:3.5.9]
at org.mybatis.spring.mapper.MapperFactoryBean.checkDaoConfig(MapperFactoryBean.java:80) ~[mybatis-spring-2.0.7.jar:2.0.7]
... 52 common frames omitted
Caused by: org.xml.sax.SAXParseException: Premature end of file.
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:204) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:178) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:399) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:326) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1466) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl$PrologDriver.next(XMLDocumentScannerImpl.java:1013) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:601) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:504) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:841) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:770) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.parsers.DOMParser.parse(DOMParser.java:243) ~[na:1.8.0_332]
at com.sun.org.apache.xerces.internal.jaxp.DocumentBuilderImpl.parse(DocumentBuilderImpl.java:338) ~[na:1.8.0_332]
at org.apache.ibatis.parsing.XPathParser.createDocument(XPathParser.java:261) ~[mybatis-3.5.9.jar:3.5.9]
... 60 common frames omitted
...
お疲れ様です。これでspringの開発も完了です。
手順9：動作確認
お待たせしました。これでやっと動作確認ができますね。
springとvueの両方を起動します。springは直前の手順で起動していると思うのでvueを起動します。
実行コマンド
docker $ docker exec -it vue /bin/bash
root@b330486c1252:/usr/src/app# npm run serve
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 22511ms 1:21:14 PM
App running at:
- Local: http://localhost:8080/
- Network: http://172.19.0.2:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
以下にブラウザでアクセスします。
http://localhost:9000/
search画面に遷移し、検索ボタンを押下します。
DB情報が表示されました!
手順10:コンテナの削除
実行コマンド
docker $ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
77b7a254a3fe openjdk:8 "bash" 12 seconds ago Up 10 seconds 0.0.0.0:8080->8080/tcp spring
29099a8d550f mysql:8.0 "docker-entrypoint.s…" 15 seconds ago Up 12 seconds 0.0.0.0:3306->3306/tcp, 33060/tcp mysql
0224b9a6d45f docker_vue "docker-entrypoint.s…" 15 seconds ago Up 12 seconds 0.0.0.0:9000->8080/tcp vue
docker $ docker-compose down
Stopping spring ... done
Stopping mysql ... done
Stopping vue ... done
Removing spring ... done
Removing mysql ... done
Removing vue ... done
Removing network docker_default
docker $ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
docker $ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
次のコマンドで未使用リソースの全削除もあり
docker $ docker system prune -a
これで終わりです。
最後に
大変長い記事になってしまい申し訳ございません。最後にいくつか自分が上手くいかなかった、つまずいた部分についてと解消した方法についてです。
つまずいた点
(1) springの実行でエラーになる。
- Mybatisに関するエラーで、SearchMapper.xmlの1~4行目の修正でうまくいった。
- アノテーションのつけ忘れ。@Mapper,@Service, @Controllerなど
(2) springの実行でエラーにならないが、DBアクセスでエラーになる。
- apprication.propertiesの修正(mysqlコンテナのIPアドレスの確認)
(3) なぜか、lombokが読み込めない。
- 何回か、「Reopen in Container Remote-Containers」でspringコンテナに入ったり出たりを繰り返す。
以上、ここまでお読みいただきありがとうございます。もしかしたら誤字やミスがあるかもしれません。その場合はご指摘いただけると助かります。