📦 chore: Netlify 종속성 제거를 위한 NGINX 설정 변경 및 FE CD 스크립트 작성

[asn6878]

📋 작업 내용

nginx.conf 설정파일 이동

프로젝트 내에서 nginx 설정을 하고, 직관적으로 관리할 수 있도록 루트 디렉토리 내에 nginx 설정 파일을 만들었습니다.
그 후, /etc/nginx 경로 내에서 루트 디렉토리의 conf 파일을 include 처리 해 주었습니다.

# /etc/nginx/nginx.conf
http {
        ...
	include /var/web05-Denamu/nginx.conf;
}

index.html 및 vite 정적 빌드 파일을 NGINX에서 반환하도록 변경

기존에 Netlify에서 반환하던 정적파일을 NGINX에서 반환할 수 있도록 라우팅 처리 해두었습니다.

    # 정적 파일 서빙 - FE 빌드 파일
    location / {
        root /var/web05-Denamu/client/dist;
        index index.html;  # 기본 파일 설정
        try_files $uri /index.html;  # SPA 지원
    }

    # 정적 파일 서빙
	location /files {
		alias /var/web05-Denamu/static/;
		try_files $uri $uri/ =404; # 파일이 없으면 404 반환
	}
...

/ 루트 경로로 들어오는 요청들은 client/dist 내 파일들(index.html, css 및 다양한 js 파일들)을 반환합니다.
현재 https://www.api.denamu.site/ 경로로 접속해보시면, public-was 인스턴스에서 FE 정적파일들을 반환해주는 상태임을 확인하실 수 있으며, React Route 역시 정상적으로 동작하는 것을 보실 수 있습니다.

Client 파일들에서 API 요청시 사용되는 baseURL 변경

Important

@jungmyunggi @junyeokk baseURL 변경 내용 확인하시기 바랍니다.

public-was 인스턴스 서버로 가는 요청은 기존에 A 레코드를 활용해 api prefix를 통해 구분해 프록시를 진행중이었습니다.

• BE & 정적 파일 요청 경로 : api.denamu.site -> public-was 인스턴스 Public IP
• FE 요청 경로 : denamu.site -> : denamu.netlify.app

본 PR이 병합되면, FE 요청을 public-was에 위임하였으므로 netlify 로 매핑하는 경로를 제거할 예정입니다.

• 통합 요청 경로 : denamu.site -> public-was 인스턴스 Public IP
• FE 요청 경로 : denamu.site -> : denamu.netlify.app

Client측 CD Actions 스크립트 작성

Client 측 코드에 업데이트가 있을 시, npm run 커맨드를 통해 배포를 수행하는 Github Actions 스크립트를 작성했습니다.

추후 변경 방안

현 상황에서 CloudFlare를 제거하기 위해, SSL인증서, denamu.site DNS 라우팅 변경 (현재는 CloudFlare로 설정되어 있지만, 이제는 가비아 네임서버에서 다이렉트로 Public IP로 가도록 변경해야 합니다.) 등의 추가적인 처리가 필요합니다.

현재 정적파일 서빙 방식은 결국 서버에 부하를 주는 방식이기에, 조금 더 개선할 여지가 있다고 생각합니다. (Object Storage 혹은 S3 사용하기.) 허나 일단은 이렇게 개선을 하자고 이야기가 나왔던 것으로 기억해 진행해보았습니다. 이견 있으시면 편하게 말씀해주세요 😄

[Jo-Minseok]

확인했습니다~ 고생하셨어요 NGINX 설정 파일 안에서 다른 설정 파일을 가져오게도 할 수 있군요 처음 알았습니다.

[CodeVac513]

LGTM!