Twitter API를 사용하여 자동으로 Tweet (4)

지금까지의 내용은 다음과 같습니다.

Twitter API를 사용하여 자동으로 Twitter (1)     Request Token 얻기

Twitter API를 사용하여 자동으로 Twitter (2)     
AWS API Gateway 및 Lambda에 배포

Twitter API를 사용하여 자동으로 Twitter (3)     
Vue를 사용하여 Twitter 인증 및 허가 획득

이번에는 지난 Vue에서 만든 콘텐츠를 AWS의 S3 호스팅에서 공개한다.

S3 호스팅 기능으로 공개

S3 콘솔

S3 버킷 만들기

콘솔에 로그인하고 버킷 만들기를 선택합니다.


임의의 버킷명을 입력, 리전은 전회 로 작성한 Lambda·API Gateway와 같은 리전을 선택해, 「다음」을 클릭한다.

옵션은 디폴트인 채로 「다음」을 클릭한다.

모든 공개 액세스 차단을 선택 취소하고 다음을 클릭합니다.
그 후 확인 화면이 표시되므로 버킷의 작성을 완료한다.

이제 버킷이 만들어졌습니다.

호스팅 설정하기

다음으로, 작성한 버킷을 호스팅용으로 설정한다.
먼저 만든 버킷을 클릭합니다.

"속성"을 클릭하고 "Static website hosting"을 설정합니다.

Static website hosting을 클릭하고 이 버킷을 사용하여 웹사이트 호스팅을 선택한 다음 색인 문서에 index.html을 입력하고 저장을 클릭합니다.



이것으로 호스팅 설정이 완료되었습니다. 다만, 버킷이 공개 설정되어 있지 않기 때문에 외부로부터 액세스할 수 없다. 따라서 액세스 권한을 설정합니다.

액세스 권한 설정 (버킷 게시)

먼저, 액세스 권한 탭, 버킷 정책을 클릭하여 버킷 정책 편집기를 표시합니다.



정책에 다음 정책 문을 입력하고 저장을 클릭합니다.
(<버킷 이름>에 작성한 버킷 이름을 입력하십시오.)

{
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<バケット名>/*"
        }
    ]
}

이제 작성한 버킷에서 웹 콘텐츠를 외부에 공개할 수 있게 되었다.

앱을 빌드하고 S3에 게시

다음에, 전회 작성한 Vue 어플리케이션을 S3로 공개할 수 있는 형태로 빌드해, S3에 업로드한다.
먼저, 이전 프로젝트 폴더에서 다음 명령을 실행하여 빌드합니다.

$ npm run build

빌드 후 dist 폴더 아래에 아래와 같이 폴더와 파일이 생기므로 그대로 방금 만든 버킷에 업로드한다.






업로드는 다음 버킷의 화면에서 드래그 앤 드롭으로 수행 할 수 있습니다.


업로드 완료 후, 아래의 화면의 엔드포인트에 표시되어 있는 URL에 액세스하면, 전회 작성한 Vue 앱이 표시된다.



이번에 얻은 인증·인가 정보를 사용해 Access Token을 취득한 기사을 공개했습니다.

전회까지의 투고는 이하
Twitter API를 사용하여 자동으로 Twitter (1)
Twitter API를 사용하여 자동으로 Twitter (2)
Twitter API를 사용하여 자동으로 Twitter (3)