붕어빵 지도 프로젝트 도메인으로 배포하기 (2)

로컬 환경에서 어느 정도 프론트랑 백엔드 만들어놨으니,

이걸 외부 도메인으로 배포해서 직접 돌아다니면서 DB에 저장시켜야 한다.

 

그러기 위해선 외부 도메인을 사용하기 위해 서버로 배포를 해야 하는데

지금 기존에 팀 프로젝트로 진행했던 2차, 3차 프로젝트가 외부 tomcat으로 배포 중이어서 거기다가 똑같이 배포하면 되지 않을까? 하고 그렇게 해봤다.

 

결론부터 말하면 실패!

 

지금 프로젝트 구성이

프론트는 vscode에서 react를 사용

백엔드는 sts3에서 spring boot로 하기 때문에 외부 tomcat으로 배포가 안된다.

 

2차 프로젝트나 3차 프로젝트는 최초 프로젝트 설정 때부터 

Spring Legacy Project의 Spring MVC Project로 시작했기 때문에 프론트와 백엔드가 하나의 프로젝트에 통합된 구조였다.

백엔드는 src/main/java에 구성했었고 프론트는 src/main/webapp/web-inf/views인 전형적인 MVC 패턴대로 구성이 되어있어서 외부 tomcat을 실행하면 바로 배포가 가능했다.

그래서 실제로 내 컴퓨터의 공인 ip와 구매한 도메인을 연결했고 여기에 SSL 인증서를 받아서 이걸 tomcat의 server.xml 설정을 해서 https://도메인으로 배포가 되고 있는 상태였다.

 

그러나 지금 하고 있는 붕어빵 프로젝트는 spring boot로 서버를 키고 있는데,

spring boot는 기본적으로 내장된 tomcat을 이용해서 서버를 실행하게 된다.

 

그래서 일단은 외부 tomcat에 통합해서 서버를 실행시켜보려고 했다.

 

---

 

 

⛔ 빌드 후 외부 Tomcat으로 실행하기

 

찾아보니 React + Spring Boot 프로젝트를 외부 Tomcat에서 실행하는 방법 중에 가장 눈에 띄는 게 있었다.

 

react + spring boot인 상태면 프론트 빌드한 파일들을 spring boot 프로젝트의 static 폴더에 넣은 후

spring boot 프로젝트를 war파일로 빌드해서 외부 톰캣의 webapps 폴더에 넣으면 톰캣이 실행될 때 자동으로 war파일을 해제해서 서버가 실행된다고 해서 그렇게 시도해 봤다!

 

일단 첫 번째로 vscode에서 프론트들을 빌드해 줬다.

그 후 빌드해서 나온 dist 폴더의 파일들을 spring boot 프로젝트의 static 폴더에 넣어줬다.

npm run build

 

빌드 후 나온 dist폴더의 파일들 static에 넣어주기

 

빌드하기 전에 build.gradle에 설정을 해줬다.

plugins {
    id 'war' // WAR 파일 빌드 플러그인
}

bootWar {
    enabled = true // WAR 빌드 활성화
    mainClass = 'com.bbangmap.BbangmapApplication' // 메인 클래스 경로 설정
}

bootJar {
    enabled = false // JAR 빌드 비활성화
}

 

SpringBootServletInitializer 확장하기

@SpringBootApplication
public class BbangmapApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(BbangmapApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(BbangmapApplication.class, args);
    }
}

 

빌드하기

./gradlew clean build

 

war 파일 tomcat의 webapps에 넣어주기

webapps에 war파일 넣기

 

그러고 외부 tomcat의 server.xml에서 context docbase 설정도 하고 외부 tomcat을 켜봤지만..

실패.. war파일 압축을 해제를 안 한다. 그래서 수동으로 해제도 해보고 경로설정까지 하고 했지만 열리지가 않는다..

 

이 방법은 그래서 포기! 더 찾아보면 방법이 있을 거 같았지만.. 주말 안에는 해결하고 싶어서 다른 방법을 찾아봤다.

 

---

 

 

🟢 내장 tomcat에다가 SSL 설정해서 배포하기

 

그렇다면 그냥 내장 tomcat에다가 외부 tomcat 설정하는 것처럼 똑같이 설정해서 돌리면 되지 않을까? 생각이 들어서 그렇게 해봤다.

 

같은 방식으로 리액트에서 빌드된 정적 파일들을 Spring boot 프로젝트에 통합했다.

리액트에서 axios 요청을 도메인으로 바꾸고 빌드했다.

const apiClient = axios.create({
    baseURL: 'https://www.ys2ys2.com/bbangmap',
    headers: { "Content-Type": "application/json" },
});

npm run build 후 나온 파일들 static에다가 복사해 두고

여기서 React 라우팅 문제를 방지하기 위해 IndexController를 추가했다.

@Controller
public class IndexController {
    @GetMapping("/")
    public String index() {
        return "index.html"; // static 폴더의 index.html 반환
    }
}

 

그러고 spring boot 서버를 켰는데 localhost:8081로 프론트가 잘 실행이 되는 걸 확인했다.

(react 개발 환경에서는 vite를 사용해서 npm run dev를 하기 때문에 5174 포트로 열리고

spring boot 환경에서는 기존에 8080 포트를 사용 중이라 8081로 설정했다)

 

axios 요청도 제대로 된 경로로 가고 있었다.

이걸 이제 공인 ip랑 연결해서 도메인을 추가하고 SSL 인증서 작업을 하면 될 것 같았다.

 

기존에 zeroSSL에서 사용했던 SSL 인증서들을 그대로 썼다. 같은 도메인이니까!

기존에 만들어 둔 .p12 키스토어를 그대로 사용했다.

(참고 : https://ys2ys2.tistory.com/49)

SSL인증서를 통해 프로젝트 서버를 HTTPS로 전환하기

 

 

 

 

그 후 application.properties에 SSL 설정을 추가했다.

server.port=443
server.ssl.enabled=true
server.ssl.key-store=classpath:certificates/keystore.p12
server.ssl.key-store-password=비밀번호
server.ssl.key-store-type=PKCS12
server.ssl.key-alias=1 //기존에 만들어둔 .p12 alias는 1로 만들어뒀다.

 

그리고 CORS 설정도 했다.

@Configuration
public class WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins(
                            "http://localhost:5173",
                            "https://www.ys2ys2.com"
                        )
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

 

그러고.. 서버 켰는데.. 된다!!😂😂

 

 

외부 https 도메인에서 db에 저장된 값들이 잘 가져와지고 저장하기도 잘 된다!

이제 반응형 해서 내 폰에 잘 보이게 해 놓고 뽈뽈뽈 돌아다니면서 값들 저장해 두면 된다!!!

 

---

 

 

이거 해결하느라 꼬박 하루를 썼는데 결국 이렇게 해결되니까 기분이 좋다!!

 

문제는 내장 tomcat도 https을 사용하기 위해 443 포트를 쓰고

프로젝트 2개를 돌리는 외부 tomcat도 https를 사용하기 위해 443 포트를 쓰고 있기 때문에 포트 충돌이 난다..

 

그래서 붕어빵 프로젝트가 돌아갈 때는 2개 프로젝트가 안 돌아간다.. 이걸 어떻게 나눌지 어떻게 합칠지 고민해봐야겠다!