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


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

- [Twitter APIを使って自動でTweetする（１）](https://qiita.com/jnakanaka1/items/bf4f450bd9dd3bd5005f)<br>&nbsp;&nbsp;&nbsp;&nbsp;Request Tokenの取得
- [Twitter APIを使って自動でTweetする（２）](https://qiita.com/jnakanaka1/items/3b8fbedb14e1a8dcf406)<br>&nbsp;&nbsp;&nbsp;&nbsp;
AWSのAPI GatewayとLambdaへのデプロイ
- [Twitter APIを使って自動でTweetする（３）](https://qiita.com/jnakanaka1/items/94c342e6e2a46f4ae64c)<br>&nbsp;&nbsp;&nbsp;&nbsp;
Vueを使ったTwitterの認証・認可の取得

今回は、前回Vueで作成したコンテンツをAWSのS3のホスティングで公開する。

---

## S3のホスティング機能で公開する
[S3コンソール](https://s3.console.aws.amazon.com/s3/)

- **S3バケットを作成する**

コンソールにログインし、「バケットを作成」を選択する。

<img width="715" alt="S3-1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/b3a9c3c7-f04f-bc9b-27c4-29d83061951b.png">
任意のバケット名を入力、リージョンは[前々回](https://qiita.com/jnakanaka1/items/3b8fbedb14e1a8dcf406)で作成したLambda・API Gatewayと同一のリージョンを選択し、「次へ」をクリックする。
<img width="820" alt="S3-2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/79d8be35-ff5a-49b6-9a7a-90d5d128a18b.png">
オプションはデフォルトのままで「次へ」をクリックする。
<img width="818" alt="S3-3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/5c6d56ef-c0f1-04b0-d785-7ae347c65cc6.png">
「パブリックアクセスをすべてブロック」のチェックを外し、「次へ」をクリックする。
その後確認画面が表示されるのでバケットの作成を完了する。
<img width="546" alt="S3-9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/80d01a4e-a199-8dff-e333-81cfaa9ec0b2.png">
これでバケットが作成された。

- **ホスティングの設定をする**

次に、作成したバケットをホスティング用に設定する。
まず、作成したバケットをクリックする。
<img width="718" alt="S3-5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/b403b2de-0a34-73dd-8065-5c2a0f38af64.png">
「プロパティ」をクリックし、「Static website hosting」の設定を行う。
<img width="852" alt="S3-6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/e82aca12-5cc0-49da-aafc-9ec3b6e1d9d9.png">
「Static website hosting」をクリックし、「このバケットを使用してウェブサイトをホストする」を選択し、インデックスドキュメントに「index.html」と入力して保存をクリックする。
<img width="736" alt="S3-7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/180f2725-4153-e9c7-dabd-75b94b52ce20.png">
<img width="282" alt="S3-8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/564dfd0b-3db6-7f78-3eae-9a22c7fac1cb.png">


これで、ホスティングの設定は完了した。ただし、バケットが公開設定されていないため外部からアクセスすることができない。そのため、アクセス権の設定を行う。

- **アクセス権の設定（バケットを公開する）**

まず、「アクセス権限」タブ、「バケットポリシー」をクリックし、バケットポリシーエディタを表示する。

<img width="835" alt="S3-10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/3aae199d-c1f8-a9cd-400b-6b965983201e.png">

ポリシーに以下のポリシー文を入力し、「保存」をクリックする。
（<バケット名>には作成したバケット名を入力してください。）

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

これで、作成したバケットでウェブコンテンツを外部に公開することができるようになった。

- **アプリをビルドし、S3で公開する**

次に、前回作成したVueアプリをS3で公開できる形にビルドし、S3にアップロードする。
まず、前回のプロジェクトフォルダで以下のコマンドを実行しビルドする。

```shell
$ npm run build
```

ビルド後、distフォルダ配下に以下のようにフォルダおよびファイルができるので、それらをそのまま先ほど作成したバケットにアップロードする。

|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/7eb6dfa4-579a-0975-d37c-48f845cd5d4f.png)
|:-:

アップロードは、以下のバケットの画面でドラッグ&ドロップで行うことができる。
<img width="882" alt="S3-11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/7fbd037c-0b76-d9fc-7eb6-9b941a5be901.png">

アップロード完了後、以下の画面のエンドポイントに表示されているURLにアクセスすると、前回作成したVueアプリが表示される。

<img width="282" alt="S3-8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/e3e961c6-1f31-1158-db8c-dec1772662ec.png">

今回得られた[認証・認可情報を使ってAccess Tokenを取得した記事](https://qiita.com/jnakanaka1/items/01bb63df167ba4cd7390)を公開しました。

前回までの投稿は以下
[Twitter APIを使って自動でTweetする(1)](https://qiita.com/jnakanaka1/items/bf4f450bd9dd3bd5005f)
[Twitter APIを使って自動でTweetする(2)](https://qiita.com/jnakanaka1/items/3b8fbedb14e1a8dcf406)
[Twitter APIを使って自動でTweetする(3)](https://qiita.com/jnakanaka1/items/94c342e6e2a46f4ae64c)