[AWS] 리눅스 배포시 404 오류 (1)

📌fanal 프로젝트를 마치고 포트폴리오를 배포 중 404 오류를 만났다.
해결방안을 찾기 위해 스프링 부트에서 간단한 api 테스트 코드를 작성 후
다시 war를 만들어도 오류가 해결되지 않았다.

개발환경

JDK 17
SPRINGBOOT
REACT
SECURITY

문제점

1. 스프링 부트 초기 세팅시 배포까지 생각하지 않고 jar로 만들었다.
2. jar로 만들어 SpringBootServletInitializer를 상속받지 못해 톰캣이 경로를 찾지 못했다.
3. 리액트에서 env 파일을 만들었지만 실제 코드에서는 base_url을 따로 만들어 localhost에 직접 적용했다.
4. 시큐리티를 적용했지만 정확한 url을 몰라 우선 permitAll을 해둔 상태이다.

해결방안

War 뽑기

초기 세팅을 jar로 했기 때문에 war를 뽑기 위해 id'war'와 apply plugin: 'war'를 추가한 후 다시 그래들을 빌드해보니 원하는 war 가 생겼다.

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.0'
	id 'io.spring.dependency-management' version '1.1.4'
	id 'war'
}

group = 'com.team1060'
version = '0.0.1-SNAPSHOT'
apply plugin: 'war'

java {
	sourceCompatibility = '17'

ServletInitializer.class 생성

가장 어려운 부분이었는데, 초기 세팅을 jar로 해서 SpringBootServletInitializer로 상속받지 못해 DispatcherServlet을 몰라 404오류가 떳다.
찾아보니 일반 SpringFramework는 Web.xml에 DispatcherServlet을 등록하는 작업이 필요한데 내 프로젝트는 Web.xml도 없고, WebApplicationinitializer의 구현체인 SpringBootServletInitializer도 없어 톰캣에서 url의 경로를 몰랏던 것 같다. 그래서 ServletInitializer.class를 따로 만들었다.

public class ServletInitializer extends SpringBootServletInitializer {

	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
		return application.sources(BackendApplication.class);
	}

}

리액트 경로 지정

리액트에서 env 파일을 .env.production을 새로 만들고 경로를 localhost가 아닌 publicIp로 설정했다. 그리고 외부 api 로그인의 경우 redirectURL에 직접 localhost를 줬었기 때문에 publicIP로 변경했다.

REACT_APP_BASE_URL = 'http://13.xxx.xx.xx:8080'

카카오 redirectURL

const handleOAuthKakao = async (code) => {
    try {
        const response = await axios.get(`http://13.xxx.xx.xx:8080/oauth/kakao`, {
            params: {
                code: code,
                oauthServerType: "KAKAO"
            }
        });
        const token = response.data;
        localStorage.setItem('ACCESS_TOKEN', token);

        window.location.href = "/";
    } catch (error) {
        console.error(error);
    }
};

security 경로

우선 시큐리티는 처음 프로젝트를 설계할 때 url명세서를 꼼꼼히 작성했지만 cors오류가 발생했다.
위의 오류들은 다 해결하고 백엔드를 다시 연결하자마자 처음 마주한 화면은 기본 로그인 화면이었다.

url을 직접 수정하며 확인해보려고 했지만 모든 화면이 시큐리티 때문에 cors 오류가 발생해 permitAll을 해둔 상태이다. 이 부분은 백엔드와 프론트 연결 여부를 먼저 체크해야 하기 때문에 지금은 기능을 끈 상태이다. 하지만 아직 이미지가 완벽하게 업로드 되지 않았기 때문에 오류를 해결한 후 다시 포스팅 하려고 한다. 화이팅!