[Docker] springboot와 vue, mysql 배포부터 연동까지

사전 작업 (배포에 필요한 것들)

• springboot 프로젝트
• Vue.js 프로젝트
• Docker Hub 회원가입
• 로컬 PC에 Docker 설치

제가 작성한 도커 배포하는 방법 보시고 시간 절약 하세요.. ㅠㅜㅠ

---

1-1. Springboot 프로젝트 Dockerfile 설정하기

프로젝트 최상단에 작성합니다. (도커 관련 파일)

// JAVA 11 기준
FROM openjdk:11
ARG JAR_FILE=./build/libs/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

 

application.yml (데이터베이스 설정 부분 주목)

# database
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver

  # spring data jpa
  jpa:
    database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        format_sql: true
        default_batch_fetch_size: 100
cos:
  key: abbci2ioadij@@@ai17a662###8139!!!18ausudahd178316738687687@@ad6g

 

컨테이너를 생성하고 한 네트워크에서 DB 컨테이너와 연결하여 사용할 것이므로 아래에 Docker-compose 파일에서 DB 설정을 해주면 됩니다.

 

1-2. Jar 파일 빌드하기

1) 명령어로 빌드하기

./gradlew clean bootJar (실행가능한 Jar파일만 생성) 

 

2) Intellij 왼쪽에 Gradle 클릭 -> build -> bootJar 눌러서 Jar 파일 빌드하기

Jar 파일 생성하

Jar 파일 생성 결과

 

1-3. Docker 로그인

도커 허브에 이미지를 PUSH 하기 위해서는 로그인이 필요합니다.

docker login -u [username]

 

1-4. Docker 이미지 생성하기

docker build -t [dockerhub id]/[이미지명]:[태그명] [DockerFile 위치]

# EX
docker build -t kylo/spring-project .

 

 

1-5. Docker Hub에 이미지 업로드하기

docker push [dockerhub id]/[이미지명]

# EX
docker push kylo/spring-project

 

---

2-1. Vue 프론트 프로젝트 Dockerfile 설정하기

 

FROM node as build-stage
MAINTAINER ba93love@gmail.com
WORKDIR /app
ADD . .
RUN yarn install
RUN yarn run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY  ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build-stage /app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

 

 

Dockerize Vue.js App — Vue.js

 

2-2. Docker 이미지 생성

docker build -t [dockerhub id]/[이미지명]:[태그명] [DockerFile 위치]

# EX
docker build -t kylo/vue-project .

 

2-3. Docker 허브에 이미지 업로드하기

docker push [dockerhub id]/[이미지명]

# EX
docker push kylo/vue-project

 

 

2-4. Vue 코드에서 서버와 비동기 통신 주소 설정

export default {
    name: 'Login',
    setup() {
        const hostName = window.location.hostname;
        const hostNameServerUrl = 'http://' + hostName + ':8080';
        const state = reactive({
            form:{
                username: "",
                password: ""
            }
        });
        const submit = () =>{
            axios.post(hostNameServerUrl + '/api/user/login', state.form)
            .then((res)=>{
                if (res.data.status === 500 && res.data.data === '404 NOT_FOUND') {
                    window.alert("로그인 정보가 존재하지 않습니다.");
                    window.location.reload();
                    return;
                }
                store.commit('setAccount', res.data);
                sessionStorage.setItem("id", res.data);
                window.alert("로그인 되었습니다.");
                window.location.href = "/";
            }).catch(() => {
                window.alert("로그인 정보가 존재하지 않습니다.");
            });
        }
        return {state, submit, hostName, hostNameServerUrl}
    }
}
</script>

 

※ 다른 리눅스 컴퓨터에서 실행하기 위해서 기존에 로컬 컴퓨터에서 설정했던 부분을 약간 수정해 주어야 합니다.

const hostName = window.location.hostname;
const hostNameServerUrl = 'http://' + hostName + ':8080';

 

기존 코드:

/api/** 로 연결된 주소는 백엔드 서버와 관련된 주소로 설정했었습니다.

이를 그대로 도커에 배포하여 실행하면 백엔드와 프론트 컨테이너가 연결이 되지 않는 문제가 있었습니다.

연결이 잘 되기 위해서는 위의 코드와 같이 window.location.hostname 값을 이용하여 비동기 통신 부분을 수정해주어야 합니다.

axios.post('/api/user/login', state.form)...

---

3. AWS나 가상 리눅스 컴퓨터에서 실행하기

저는 가상 리눅스 컴퓨터에서 실행해 보았습니다. 

 

3-1. 이미지 다운로드 하기

docker pull kylo/spring-project
docker pull kylo/vue-project

 

3-2. Docker-compose.yml 파일을 이용하여 컨테이너 생성 및 연결하기

 

docker-compose 파일을 이용하면 여러 이미지를 한 번에 컨테이너화 할 수 있습니다.

또한 네트워크를 생성하여 생성한 컨테이너들을 한 네트워크안에 연결할 수도 있습니다.

 

docker-compose 파일에서 mysql과 springboot 백엔드 컨테이너를 연결해 주어야 합니다.

 

version: "3"
services:
  # MySQL 컨테이너 설정
  blog-mysql:
    image: mysql
    networks:
      - blog-net
    restart: always  # 컨테이너 재시작 설정
    environment:
      MYSQL_ROOT_PASSWORD: 1234
      MYSQL_DATABASE: blog_db
      MYSQL_USER: kylo  # DB 사용자 생성
      MYSQL_PASSWORD: 1234  # DB 사용자 비밀번호 설정
    ports:
      - 33306:3306
      
  # backend
  blog-backend:
    depends_on:
      - blog-mysql
    image: kylo/spring-project  # WordPress 이미지 사용
    networks:
      - blog-net
    ports:
      - 8080:8080
    restart: always
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://blog-mysql:3306/blog_db?useSSL=false&allowPublicKeyRetrieval=true
      SPRING_DATASOURCE_USERNAME: kylo
      SPRING_DATASOURCE_PASSWORD: 1234
      
  # frontend
  blog-front:
    depends_on:
      - blog-backend
    image: kylo/vue-project
    networks:
      - blog-net
    ports:
      - 3000:80
    restart: always
    environment:
      BACKEND_API_URL: http://blog-backend:8080/api
      
# 컨테이너 간 통신을 위한 네트워크 설정
networks:
  blog-net:

 

 

✔️mysql 설정

  blog-mysql:
    image: mysql
    networks:
      - blog-net
    restart: always  # 컨테이너 재시작 설정
    environment:
      MYSQL_ROOT_PASSWORD: 1234
      MYSQL_DATABASE: blog_db
      MYSQL_USER: kylo
      MYSQL_PASSWORD: 1234
    ports:
      - 33306:3306

 

image : 사용할 이미지 작성

networks : 사용할 네트워크 설정

environment: 데이터베이스 환경 설정하기 ( ROOT_PASSWORD, DATABASE, USER, PASSWORD)

ports : 호스트 포트번호:컨테이너 포트번호를 작성하여 포트포워딩을 작성해 줍니다.

 

✔️백엔드 설정 (springboot 컨테이너)

# backend
  blog-backend:
    depends_on:
      - blog-mysql
    image: kylo/spring-project  # WordPress 이미지 사용
    networks:
      - blog-net
    ports:
      - 8080:8080
    restart: always
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://blog-mysql:3306/blog_db?useSSL=false&allowPublicKeyRetrieval=true
      SPRING_DATASOURCE_USERNAME: kylo
      SPRING_DATASOURCE_PASSWORD: 1234

 

depends_on : 의존성 설정 (DB 컨테이너가 먼저 실행되어야 하므로 blog-mysql 작성)

image : 사용할 이미지 작성

networks : 사용할 네트워크 설정

ports : 호스트 포트번호:컨테이너 포트번호를 작성하여 포트포워딩을 작성해 줍니다.

environment: 데이터베이스 환경 설정하기 (SPRING_DATASOURCE_URL, SPRING_DATASOURCE_USERNAME, SPRING_DATASOURCE_PASSWORD) 설정하기 (application.yml 파일에서 DB 설정을 하지 않고 컨테이너 생성 시 DB 설정을 작성합니다.)

 

✔️프론트 설정 (vue 컨테이너)

# frontend
  blog-front:
    depends_on:
      - blog-backend
    image: kylo/vue-project
    networks:
      - blog-net
    ports:
      - 3000:80
    restart: always
    environment:
      BACKEND_API_URL: http://blog-backend:8080/api

 

depends_on : 의존성 설정 (Spring 컨테이너가 먼저 실행되어야 하므로 blog-backend 작성)

image : 사용할 이미지 작성

networks : 사용할 네트워크 설정

ports : 호스트 포트번호:컨테이너 포트번호를 작성하여 포트포워딩을 작성해 줍니다.

environment: 데이터 통신을 할 백엔드 url 주소를 작성합니다.