사전 작업 (배포에 필요한 것들)
- 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 파일 빌드하기
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
Vue.js - The Progressive JavaScript Framework
v2.vuejs.org
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 주소를 작성합니다.
'Infra > Docker' 카테고리의 다른 글
| [Docker] Docker compose로 redis 실행하기 - redis.conf, requirepass, data 설정 (0) | 2024.04.21 |
|---|---|
| [Docker] Docker network, volume 이해 및 docker-compose에 network, volume 지정하기 (0) | 2024.04.21 |
| [Docker] 도커 허브 연결하기, 도커 컴포즈 docker-compose 파일 작성하기 (1) | 2023.12.03 |
| [Docker] 도커 기본 명령어, 명령어 정리 (0) | 2023.12.03 |
| Docker란 무엇인가? 도커 장점과 컨테이너, 도커 엔진의 역할 이해하기 (0) | 2023.12.03 |
