[Azure/Spring] Vue.js 컨테이너화시키기

DockerFile 작성

• 기존 프론트 서버의 상단에 DockerFile을 작성한다.

# Node.js 이미지를 기반으로 사용
FROM node:18

# 애플리케이션 디렉토리 생성
WORKDIR /app

# package.json과 package-lock.json 파일 복사
COPY package*.json ./

# 종속성 설치
RUN npm install

# 애플리케이션 소스 복사
COPY . .

# 애플리케이션 빌드 (필요한 경우)
# RUN npm run build

# 개발 서버를 시작
CMD ["npm", "run", "dev"]

# 포트 노출 (기본적으로 npm run dev는 3000번 포트를 사용)
EXPOSE 3000

Docker-Compose.yml 재설정

services:
  mysql:
    image: mysql:8.0
    container_name: my-mysql
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_DATABASE: ssafytrip
      MYSQL_USER: user
      MYSQL_PASSWORD: 1001
    ports:
      - "3306:3306"
    networks:
      - my-network
    volumes:
      - mysql-data:/var/lib/mysql

  app:
    build:
      context: /Users/gimgyuhyeong/Desktop/바탕화면/공부/여행지니/journeyjinni-backend
      dockerfile: Dockerfile
    container_name: my-spring-boot-app
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://my-mysql:3306/ssafytrip
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: root
    ports:
      - "80:8080"
    depends_on:
      - mysql
    networks:
      - my-network

  frontend:
    build:
      context: /Users/gimgyuhyeong/Desktop/바탕화면/공부/여행지니/journeyjinni-frontend
      dockerfile: Dockerfile
    container_name: my-vuejs-app
    ports:
      - "5100:5173"
    networks:
      - my-network
    depends_on:
      - app

networks:
  my-network:

volumes:
  mysql-data:

• 기존의 서버와 DB 밑에 frontend 속성 추가
• 기존의 vue.js의 로컬 서버 포트가 5173 이기에 5100 으로 매핑
• docker-compose up --build 로 모든 이미지를 build 진행

---

Issue - 프론트 서버에 접속할 수가 없음

• 포트 매핑을 했지만 프론트 서버에 접속할 수 없는 현상 발생
• vite는 기본적으로 localhost를 외부 접속을 차단한다!
• 이를 해결하기 위해 설정에서 0.0.0.0 을 추가

  server: {
    host: '0.0.0.0', // 모든 IP에서 접근 가능하게 함
    proxy: {
      '/api': {
        target: 'http://localhost', // 백엔드 서버 주소
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''), // 프록시 경로 재작성
      },
    },
  },

접속 가능!

---

Issue - 서버와 연결이 안됨

curl http://my-spring-boot-app:8080

• 해당 curl로 직접 접속시에는 백엔드 서버측에서 응답함
• 하지만 브라우저에서 접속한 컨테이너 프론트 서버에서 axios를 통해 응답에 실패함

추측

• axios 요청을 보내는건 브라우저이다.
• 브라우저는 도커 내부에 있는 백엔드 서버를 모른다.

해결법

• docker-name으로 api 주소를 설정하는게 아닌 localhost 로 설정한뒤 이걸 포트 매핑으로 도커 서버로 보내는 방식으로 변경
• 이러한 방식은 추후 CI/CD 환경에서 잘 작동할지는…? 모르겠다.