Twitter APIを使って自動でTweetする（４）

今までの内容は以下の通り

• Twitter APIを使って自動でTweetする（１）
      Request Tokenの取得
• Twitter APIを使って自動でTweetする（２）
       AWSのAPI GatewayとLambdaへのデプロイ
• Twitter APIを使って自動でTweetする（３）
       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を使って自動でTweetする(1)
Twitter APIを使って自動でTweetする(2)
Twitter APIを使って自動でTweetする(3)