[074] docker-compose

한화시스템 BEYOND SW 캠프 9기 74일차
2024.10.08_화

 

 

전체적인 수업 내용!!

1. Front CORS

2. curl -> 목요일에 알려주신다고 함!

3. docker-compose

이렇게 진행을 하였다.

오전에는 수업을 하고 오후에는 프로젝트 진행!!!

 

Front CORS

front에서 CORS 처리하기!!!

[프론트에서 프록시를 이용]

1. 백엔드에서 CORS 처리 못하게 한다.

 

2. CORS Disabled 확인!

 

3. 프론트 vue 프로젝트 수정

App.vue와 vite.config.js 를 수정하였다.

 

4. 결과가 잘 나온다.

---

8011 포트를 사용하는 컨테이너도 만들어보자!

1. Vue 프로젝트에서 Dockerfile 생성

FROM node:lts-alpine

# curl 설치(client-url): 필수는 아님(postman 같은 것)
RUN apk add --no-cache curl

WORKDIR /app
COPY . ./

RUN npm install

# 0.0.0.0: 일종의 방화벽을 뚫는 개념 / 예전에 배운 Linux에서 bind-address와 비슷하다. 외부 무엇의 접근이든 허락한다.
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

 

2. 이미지 생성

`docker build -t yhnmko/sw_vue_project .`

 

3. 컨테이너 띄운다.

`docker run -d -p 8011:5173 --name second yhnmko/sw_vue_project`

 

→ 이렇게 해서 localhost:8011로 들어가서 해보면 안된다.(당연!!)

 

 

[그럼에도 불구하고 프론트 프록시를 어떻게든 이용하고 싶다????]

docker-compose 및 docker network(CNI)

내부에서만 통신이 되게 한다.

 

1. Vue에서 docker-compose.yml 생성

services:
  springboot-app:
    build:
      context: ./chap01_01_bootProject
      dockerfile: Dockerfile
    ports:
      - "8055:7777"
    networks:
      - camp-net

  vue-app:
    build:
      context: ./chap01_02_vueProject
      dockerfile: Dockerfile
    ports:
      - "8011:5173"
    networks:
      - camp-net
  
networks:
  camp-net:
    driver: bridge
    
# bridge 뿐만 아니라 host, none이 있지만 보안상의 이유로 잘 쓰지 않는다.
    
# 마지막 networks 설정 부분 3줄이 모두 들여쓰기가 되어있어서 진행이 되지 않았다.

 

2. App.vue 및 vite.config.js 수정

- App.vue

 

- vite.config.js

 

3. `docker compose up`

4. 결과가 잘나온다.

5. `docker compose down`

 

전체적인 느낌

 

 

💡 무엇이 되었든 프론트로 CORS를 해결하려고 하면 안될 것 같다??ㅋㅋㅋㅋㅋㅋ조금 복잡하고 생각할게 많은 듯하다!

---

프로젝트는 역시 이야기할 것이 많다...

수업 끝나고 나서는 계속 이야기 했던 것 같다.

서로 통일해야하는 부분, 깃허브에서 만들어야할 것,

피그마에서 공통 부분 등등

 

개발하기보다는 서로 이야기하는 부분이 많아서 그런지

금방 지쳐가는 것 같다.

오늘 DB까지 하고 개발 시작해야할 것 같다!!

내일은 내가 은근히 바빠서 많이 못해서 걱정이다 ㅠㅠㅠ

내일 쉬어서 좋은데..

좋으면서 걱정된다...ㅠㅠㅠㅠㅠㅠㅠㅠ

그래도 잠 좀 줄이고 공부하면서 해보자...

잠 줄이긴 해야할 듯? 끝내려면...

 

파이팅!!!