react 프로젝트 s3 정적 배포하기

1. AWS 접속 후 버킷 생성

버킷 만들기 버튼을 누른다.

다른 항목은 테스트 단계에서는 크게 신경쓰지 않아도 괜찮은듯.
버킷 이름은 중복이 허용되지 않는다.
신경써야 하는 부분.
이 버킷의 퍼블릭 액세스 차단 설정을 해제한다.

이런 문구가 뜬다면 퍼블릭 엑세스를 할 수 있다.

2. 빌드된 파일 넣기

npm run build

명령어를 사용하면 dist 디렉토리에 index.html 파일과 assets 폴더안에 js, css 파일이 생긴다.
그 파일들을

객체 탭에 업로드한다.
주의해야 할 점은 dist 폴더 그 자체를 업로드 하는게 아니고
그 안에 든 내용물만 객체에 업데이트 해야 경로 오류가 없다는 것.

이런식으로 업로드 하면 된다.

기특하게도 성공한 모습.

3. S3 버킷을 정적 웹사이트로 설정

속성 탭에서 밑으로 스크롤을 쭉 내리다보면

정적 웹사이트 호스팅 이라는 항목이 있다.
편집한다.

활성화 하면 호스팅 유형이나 인덱스 문서 등을 설정할 수 있다.
인덱스 문서는 빌드 이후에 따로 수정하지 않았다면 index.html 로 되어있을것이니 그대로 입력하면 된다.
저장한다.

4. 권한 설정

권한 탭에 보면 버킷 정책에 대한 부분이 비어있다.
이 부분을 설정해주어야 한다.

이런 형식으로 작성하라고 되어있다.
Your-Bucket-Name 부분에 자신의 버킷 이름을 입력하면 된다.

{
  "Version": "2012-10-17",
  "Statement": [{
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::<Your-Bucket-Name>/*"
  }]
}

예를들어 버킷 이름이 deploy-test-polaris 라면
"Resource": "arn:aws:s3:::deploy-test-polaris/*" 라고 입력하면 될 듯.

5. TEST

속성 탭에 정적 웹 사이트 호스팅 탭에 보면 업로드 한 index.html 를 배포한 주소가 나온다.
접속해보면

잘 성공한 모습.

---

배포 이후 발생한 이슈

링크 복사 기능이 안된다.
해당 기능은

<DropdownMenuItem onClick={() => navigator.clipboard.writeText(data.link)}>

navigator.clipboard 라는 함수를 사용한다.
개발 환경에서는 당연히 문제가 없었고 vercel 로 배포했을 때도 정상적으로 작동해서
이게 무슨 경우인지 참 난감하기 그지없었다.

navigator.clipboard.writeText가 텍스트를 클립보드에 복사하지 않는 이유는 무엇입니까?

스택 오버 플로우.
우선 첫번째 해결책. promise로 해당 로직을 수정한 이후에도 동일하게 작동하지 않았으므로
보안 이슈일 확률이 높다.
vercel 은 애초에 https 로 배포되고 localhost 는 브라우저에서 안전하다고 판단한다는 듯.
navigator.clipboard 함수는 http 환경에서는 보안상의 이슈로 사용할 수 없다고 한다.
참 안타까운 이야기.