Vercel로 프론트 배포하기(2) 백엔드, 프론트엔드 초기 세팅 및 기초 작업하기

백엔드 초기세팅

형식: springboot: 3.xx, java: 17

아주 기초적인 세팅은 따로 설명하지 않고 넘어가니 참고하길 바란다.

build.gradle

buildscript {
	ext {
		queryDslVersion = "5.0.0"
	}
}
plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.3'
	id 'io.spring.dependency-management' version '1.1.3'
	id 'com.google.cloud.tools.jib' version '3.2.1'
}
jib {
	from {
		image = "openjdk:17-alpine"
	}
	to {
		image = "chokeong1/spotlightSeoul1"
		tags = ["latest"]
	}
	container {
		jvmFlags = ["-Xms128m", "-Xmx128m"]
	}
}
group = 'com.example'
version = '0.0.1-SNAPSHOT'
java {
	sourceCompatibility = '17'
}
configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}
repositories {
	mavenCentral()
}
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.h2database:h2'
	runtimeOnly 'com.mysql:mysql-connector-j'
	annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
	useJUnitPlatform()
}

Dockerfile

FROM gradle:7.5.1-jdk17
WORKDIR /app
COPY . /app
CMD ["gradle", "bootRun"]

docker-compose.yml

version: "3.9"
services:
  mysql:
    image: mysql
    container_name: mysqldb
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_SCHEMA}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_USER_PASSWORD}
    networks:
      - app-tier
    ports:
      - "3308:3306"
    volumes:
      - mysql-data:/var/lib/mysql
  backend:
    build:
      context: .
    container_name: backend-docker
    ports:
      - "8081:8080"
    environment:
      DB_USERNAME: ${DB_USERNAME}
      DB_SCHEMA: ${DB_SCHEMA}
      DB_USER_PASSWORD: ${DB_USER_PASSWORD}
      SPRING_PROFILES_ACTIVE: dev
    depends_on:
      - mysql
    networks:
      - app-tier
    restart: on-failure
    tty: true
networks:
  app-tier:
    driver: bridge
volumes:
  mysql-data: null

프론트엔드 초기세팅

Dockerfile

FROM node:18-alpine
WORKDIR /frontend
COPY package.json package-lock.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

형식

백엔드

백엔드를 돌려보기 위해 간단한 Getmapping을 만들었다.
주소: http://localhost:8081/kwon

package com.example.backend.domain.user.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;
@RestController
@CrossOrigin(origins = "http://localhost:3000")//cors오류 해결 
public class userController {
	@GetMapping("/kwon")
	public String getUserInfo() {
		return "XXXXXX 21학번 XXX";
	}
}

프론트엔드

위의 형식을 받을 수 있도록 코딩하였다.

import axios from 'axios';
const AxiosInstance = axios.create({
  baseURL: 'http://localhost:8081'
});
export default AxiosInstance; //customAxios

app.tsx

import React, { useEffect, useState } from 'react';
import AxiosInstance from './AxiosInstance';
function App() {
  const [userInfo, setUserInfo] = useState<string | null>(null);
  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const response = await AxiosInstance.get('/kwon');
        setUserInfo(response.data);
      } catch (error) {
        console.error('Error fetching user info', error);
      }
    };
    fetchUserInfo();
  }, []);
  return (
    <div className="App">
      <h1>User Information</h1>
      {userInfo ? <p>{userInfo}</p> : <p>Loading...</p>}
    </div>
  );
}
export default App;

결과물

다음할 것

먼저 docker로 한번에 묶어서 배포를 해보고 Vercel과 비교해보자