AWS EC2로 프로젝트 배포하기 (1) Spring Boot - React 한번에 build 하기

라미·2024년 3월 20일

Study

목록 보기

1/2

팀 프로젝트를 완성하고 포트폴리오를 작성하는데 깃허브 주소만 올렸더니 뭔가 휑~한 것이.. 프로젝트를 완성하고 나서 배포해보지 않았다는 걸 깨닫게 되었다!
인사담당자가 내 프로젝트를 한눈에 잘 볼 수 있게, 또 나중에 실무에서 프로젝트를 완성하고 나서 배포하여 서비스화 될 수 있게 하기 위해 AWS EC2로 배포해보았다.

1. Spring Boot - React 한번에 build 하기

나는 Spring Boot 루트 폴더 내부에 React 프로젝트 폴더를 생성했기 때문에 따로따로 빌드하여 배포하는 것보다 한 번에 빌드하여 배포할 수 있는 방법을 찾고 싶었다. 물론 특정 폴더를 제외하고 빌드를 할 수도 있지만, 이번엔 한 번에 빌드하는 쪽으로 시도해보았다.

1) 프로젝트 폴더 구조

나는 Spring Boot 프로젝트 폴더 내부의 src-main 폴더 내부에 frontend라는 폴더명으로 Front 부분인 React 프로젝트를 생성해주었었다.

frontend 폴더 내부에 package.json 파일이 있는 것을 확인할 수 있다.

2) React 프로젝트에 proxy 설정하기

이전까지 팀 프로젝트 개발 중에는 setupProxy.js 파일을 작성하여 Spring Boot(8080 포트)와 React(3000 포트) 간의 CORS 에러 해결을 위해 http-proxy-middleware를 설치하여 React에 8080 포트를 허용해주었다.

*seupProxy.js 예시

하지만 이 미들웨어는, 배포 전 로컬환경에서만 작동한다!!
이걸 몰라서 빌드를 몇번을 다시 했었던지...

아무튼, 그래서 8080 포트 허용을 새롭게 작성해주어야 한다.

(1) package.json 파일에 다음과 같이 작성

"proxy": "http://localhost:8080",

(2) .env.production 파일 생성
package.json 파일과 같은 레벨의 위치에 .env.production 파일을 생성하고, 다음과 같이 입력하여 환경변수를 설정해준다.

*STS4에서는 해당 파일이 보이지 않아서 VS Code로 열어 편집했다!

REACT_APP_DB_HOST="http://localhost:8080"

(3) .env.development 파일 생성
마찬가지로 같은 위치에 .env.development 파일을 생성하고, 다음과 같이 입력한다.

REACT_APP_DB_HOST=""

(4) 서버 호출 api에 환경 변수 입력해주기

process.env.REACT_APP_DB_HOST +

나는 메인페이지에서만 호출해주고 있기 때문에 한 곳만 추가해줬는데, 모든 서버 호출 부분에 추가 해주어야 한다!

3) Spring Boot에 React 빌드 코드 입력해주기

Spring Boot 프로젝트의 build.gradle에 다음 코드를 추가해준다.

def frontendDir = "$projectDir/src/main/frontend"

sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {
        commandLine "npm", "audit", "fix" 
        commandLine 'npm', 'install'
    }
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$buildDir/resources/main/static"
}

frontendDir 에는 React 프로젝트 폴더 경로를 입력해준다.
installReact 에서는 빌드 시 React 내부의 package.json 위치에서 'npm install' 명령어를 입력하게 하여 install을 실행하게 한다.
buildReact 에서는 빌드 시 React 프로젝트 빌드 명령어를 입력하여 React 프로젝트가 빌드되도록 해준다.
copyReactBuildFiles 는 빌드 완료 된 React 프로젝트를 스프링 부트의 static 폴더로 복제하여 Front 페이지로서 읽어들일 수 있도록 만들어준다.
각 명령어는 dependsOn 입력어를 통해 순차적으로 실행되도록 도와준다.

4) Spring Boot 빌드하기

(1) 프로젝트 폴더에서 터미널 열고 빌드하기

ls
./gradlew build

ls를 입력하여 build.gradle 이 있는지 확인 후,
./gradlew build 명령어를 통해 빌드한다.

근데 왜인지 build fail... (build success가 나온 사람은 (2)로 가기)

To address all issues (including breaking changes), run:
npm audit fix --force
이렇게 나와있길래, frontend 폴더에서 npm audit fix --force를 해주고 다시 빌드를 해봤는데, 또 fail..