AWS 엘라스틱 빈스톡을 이용한 프론트엔드 배포

1. 로컬 디렉터리 엘라스틱 빈스톡 환경 초기화

eb init 프로젝트명-frontend

 - select a default region : 백앤드와 동일 지역 선택

 - It appears you are using Node.js. Is this correct? : Y(Node.js 사용)

 - select a platform :  알맞은 버전 Node.js 선택

 - Do you wish to contiue with CodeCommit? : n

 - Do you want to set up SSH for your instances? : n

 

2. eb create

 - app-config.js 변경 : 로컬인 경우 8081, 아닐 경우 빈스톡 주소로 변경

//backend uri를 가져오도록 구현

let backendHost;

const hostname =  window&&window.location && window.location.hostname;

if(hostname === "localhost"){
    backendHost = "http://localhost:8081";
}else{
    backendHost = "엘라스틱 빈스톡 주소";
}

export const API_BASE_URL = '${backendHost}';

 - 변경 후 npm run build 실행

 

 - eb create

eb create --elb-type application --instance-type t2.micro 28s

 1) Environment Name , DNS CNAME prefix 설정

 2) Spot Fleet requests : n

 

 - 생성 확인 : AWS 콘솔 -> 엘라스틱 빈스톡에 들어가서 확인

 

3. CORS 해결

 - 백엔드의 WebMvcConfig에서

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration //스프링 빈으로 등록
public class WebMvcConfig implements WebMvcConfigurer{
	//유효시간 설정, 1시간
	private final long MAX_AGE_SECS = 3600;
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**") //모든 경로에 대해
		//origin이 http://localhost:3000, 프론트 엔드 URL 인 경우
		.allowedOrigins("http://localhost:3000", "<프론트 엔드 URL>")
		//get, post, put, delete, patch, options 메서드 허용
		.allowedMethods("GET","POST","PUT","DELETE","PATCH","OPTIONS")
		//모든 헤더 허용
		.allowedHeaders("*")
		//인증 관련 정보 허용
		.allowCredentials(true)
		//유효시간 설정
		.maxAge(MAX_AGE_SECS);
	}
}

코드 수정 후 컴파일

./gradlew clean && ./gradlew build

새 버전 백엔드 애플리케이션 재배포

eb deploy