리액트 AWS S3 배포 및 온프레미스 Backend

                                    npm run build

                                    AWS S3 버킷 생성 -> 정적 웹 호스팅 Enable -> Public Access block 해제 -> Policy 생성

# Policy 예시
  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::your-bucket-name/*"
      }
    ]
  }

이후 Object에 dist 폴더의 모든 파일 업로드
* CLI 명령어:  aws s3 sync dist/ s3://your-bucket-name --delete

                                    버킷 선택 - 속성 - 정적 웹호스팅 endpoint 확인

ex) http://marketing-web-app.s3-website.ap-northeast-2.amazonaws.com/

                                    # .env 파일을 분리하면 된다.

.env.development
.env.production

# npm run 명령어 (Vite가 알아서 인식한다)
npm run dev -> .env.development
npm run build -> .env.production

                                    랜선 직접사용시 : ipcofig -> ip주소 찾기
윈도우 방화벽 설정: 서비스 port열기

                                    [윈도우 Defender]- [고급설정] - [인바운드 규칙생성] - [TCP:port]

                                    Access to XMLHttpRequest at 'http://ip:port/endpoint' from origin
'http://marketing-web-app.s3-website.ap-northeast-2.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource.

                                    @Configuration
class WebCorsConfig: WebMvcConfigurer {

    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**")
            .allowedOrigins(
                "http://localhost:5173",  // Vite 기본 포트
                "http://localhost:5174",   // 추가 포트
                "http://marketing-web-app.s3-website.ap-northeast-2.amazonaws.com" //s3 web hosting
            )
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH")
            .allowCredentials(true)
            .allowedHeaders("*")
            .exposedHeaders("Authorization")
            .maxAge(3000)
    }
}