S3

• 파일 스토리지
• 이미지 저장용으로도 활용할 수 있지만, 스태틱 웹사이트 호스팅 용도로도 활용할 수 있다. (여기서의 스태틱의 의미는 정적웹, 동적웹 할때 스태틱과는 다르다. 예를들어서 리액트는 동적 웹을 구현하는 라이브러리지만, 리액트 앱을 S3에 올릴때는 리액트 앱을 스태틱 웹 앱으로서 올리는 것이다. 전에 자료가 어디 있었는데. 끝나고 찾아서 여기 첨부하자)

Static Website Hosting (React App) 하는 방법

1. 우선 앱을 빌드해서 빌드 파일을 준비한다.

   1. CRA를 사용한 경우 npm run build를 해주면 ‘build’ 폴더 안에 파일들이 생성된다.
   2. 추가로 최적화를 위해 udemy deploy내용을 참고해줘도 좋을 것 같다.

2. AWS S3 서비스에 들어가서 bucket을 생성해 준다.

   1. 필수로 이름을 설정해주어야 하고,
   2. 기타 설정할 옵션들이 몇개 있지만 default로 해도 무방한 듯 하다. (읽어봐도 딱히 건드릴 내용이 없어보임)

3. 빌드한 파일들을 bucket에 업로드한다. (drag & drop 해도 되고. 뭐 ㅇㅇ)

   1. 이런 과정은 AWS CLI 를 사용해서도 진행할 수 있다고 한다. 익숙해지면 더 편하겠지?

4. 그리고 해당 bucket에서 properties 탭에 가면 맨 하단에 static website hosting이라는 부분이 있고, 얘를 edit 해서 enable시켜준다.

   1. 이때 index file 을 설정해주어야 하는데, 우리의 경우, 그리고 대부분의 경우, index.html 으로 해주면 된다.

      

   2. 그리고 error document라는 부분도 있는데, react쓸경우, 특히 react router쓸 경우에는 우리가 앱 내에서 알아서 에러 페이지 처리(존재하지 않는 path 접속할 경우 등)를 하도록 해놨기 때문에, 그런 경우에 결론은 얘도 그냥 index.html로 설정해주면 된다.

   3. 그러면 이제 링크는 생성이 되어 있을건데, 눌러보면 403 에러가 날 것이다. 정상이다. 아직 permission 설정을 하지 않아서 그렇다

5. Permissions 탭에 가서 사람들이 우리 사이트에 접속할 수 있도록 설정을 해준다.

   1. Bucket policy라는 걸 찾아서 edit을 해주어야 한다.
   2. add new statement 버튼을 클릭

      1. add actions에서 getobject를 검색해서 체크

      2. add a resource 에서 다음과 같이 해준다.

         

         resource type은 object로, 그리고 *resource ARN의 경우 arn:aws:s3:::{buacket name}/{object}의 형태로 작성해야 하는데, 위 이미지를 보면 bucket name은 그냥 말그대로 제대로 버킷 이름 넣었고, object의 경우 모든 파일에 접근할 수 있도록 한다는 의미로 를 넣어 주면 된다.

      3. 마지막으로 principal 항목은 직접 text edit 해준다. {}로 되어 있을 건데, “” 로 바꿔준다. ‘누가 접속할 수 있는지’를 설정해주는 부분이라고 한다. 예를들면 특정 AWS 계정만 접속할 수 있게 해준다던지 이런것도 되는 모양이다. 암튼 우리는 모두가 접속할 수 있게 해주는게 목표이므로 “”로 해준다~

         1. +이때 public access 설정을 풀어줘야 했다. 안그러면 편집 권한을 안줌. 근데 이렇게 풀어 놔도 되는건가? 실제 서비스 할때.

         {
         	"Version": "2012-10-17",
         	"Statement": [
         		{
         			"Sid": "Statement1",
         			"Principal": "*",
         			"Effect": "Allow",
         			"Action": [
         				"s3:GetObject"
         			],
         			"Resource": [
         				"arn:aws:s3:::blight-o-mk1-bucket/*"
         			]
         		}
         	]
         }
         

6. 완료. 다시 아까 링크 접속해보면 이제 앱이 보인다.

   1. 생각보다 참 쉽고 빠르다. 폰으로 해봐도 잘 되고~ 좋구만.

앱 업데이트 하는 법

• 첫번째로, 파일을 다시 빌드하여 버킷에 다시 업로드 하는 방법이 있다. (override the existing files)

• 두번째로 CLI를 사용하는 법이 있다. 우선 근데 CLI setup이 되어 있어야 하는듯 하다.

  https://www.youtube.com/watch?v=_DIRSI07kxY

  AWS CLI | Setup an S3 Static Website

  • setup이 되어 있다면, 아래처럼 하면 된다.
  • aws s3 sync directory-path "s3://your-bucket-name/"
    • 얘를 이제 package.json의 script에 설정해주면 된다.
      • e.g. “sync”:
    • directory-path 부분에 우리의 빌드 폴더를 지정해주고(e.g. ./build), your-bucket-name 부분에 말그대로 우리 버킷 이름을 지정해주면 된다.
    • pc에 설정되어 있는 aws account가 여러개인 경우 sync 뒤에 —profile ‘account-name’ 을 추가해주는 모습도 볼 수 있었다. 나는 한개니까 그냥 없이.
    • 그러면 npm run sync를 하면 업데이트가 된다.

S3의 한계점

• https로 호스트할 수가 없다. http만 지원한다고 한다 S3는.
• https를 적용하려면 CloudFront를 함께 적용해야 한다.

Custom Domain Name 적용하기

• 도메인을 사고나서
• Route 53을 이용해서 적용해주면 된다. Route 53 부분에 더 자세히 설명~