ToyProject(더다주) s3 정적 웹사이트 배포

노영완·2023년 8월 8일
0

ToyProject(더다주)

목록 보기
10/13
post-thumbnail

클라이언트 코드 s3로 배포

npm run build

우선 해야하 할 것) 내가 올릴 프로젝트를 build 해주어야 한다. 위의 명령어를 해당 프로젝트 터미널에 입력하면 build 된다. 처음 build시에는 시간소요가 좀 된다. 작동이 안되는 것이 아니니 차분히 기다리면 된다.

1) S3를 검색 후 버킷 만들기 버튼을 누른다

2) 버킷이름을 설정해주고 퍼블릭 액세스 차단 설정을 풀어준다.

이 후 다른 설정은 변경할 것이 없다 위의 과정을 다 마쳤으면 버킷 만들기 버튼을 누른다.
3) 생성한 버킷에 들어가 업로드를 누르고 내가 배포할 파일에 들어가 build 폴더에 있는 파일들을 모두 올린다.(버킷에 이름은 학습용으로 임시로 설정한 이름이다.)



4)
1. 속성 탭을 클릭해 들어간다 가장 아래에 정적 웹사이트 호스팅 편집을 누른다
2. 활성화, 정적 웹 사이트 호스팅, 인덱스 문서: index.html 오류 문서: index.html
3. 위의 과정을 다 했으면 정적 웹 사이트 호스팅란에 처음과는 다르게 엔드 포인트가 생길것은 확인할 수 있다.




5)
1. 권한 탭을 클릭해 들어간다 버킷 정책에 편집을 클릭한다
2. 밑에 코드를 작성해준다. 주의!할점은 Bucket-Name이 부분은 자기가 설정한 bucket name을 넣어주어야 한다.
3. 위의 과정을 다 했으면 엔드 포인트를 타고 들어가면 자기에 프로젝트가 나온것을 확인할 수 있다

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

0개의 댓글