gitのpushに紐づけてS3へのアップロードとcloudfrontのキャッシュ削除を自動で行う

注意：うろ覚えなんで手順抜けてる可能性あります。
#背景
aws s3の静的ホスティングでサイトを公開している。最初はいちいちコンソールで上げてたが、流石にめんどくさすぎるので自動化したかった。サイト自体はgitで管理してたので、gitと連携して自動アップロードできないかなぁって調べたらCodeshipってサービスでできるらしいと知ったので使って自動化した。ついでにcloudfrontのキャッシュ削除も。

#codeship
githubやbitbucketと連携してpushと連動してサーバのビルドとかができるらしいです。
aws s3とも連携できてBucket名を指定すればアップロードしてくれます。
月100回のビルドまで無料らしいです。
#設定手順
##codeshipアカウントの準備
https://codeship.com/
トップページのSign upを押すと上の欄にgitのホスティングサービスが出てくるので自分が使ってるやつを選びます。（自分はbitbucket）
多分認証画面みたいなのが出てくるのでOKを押して、あとは必要事項を入れてsign up
##新しいProjectを作る
最初のログインのときにプロジェクト作成画面が出ます。
飛ばしてもあとから作れます。
下側の入力欄にbitBuketの自動アップロードしたいリポジトリの「クローンの作成」でコピーできるURLを貼ります。
この時自分は**エラー**が出ました。
![bit.png](https://qiita-image-store.s3.amazonaws.com/0/67919/da4035d8-b7cc-5204-95ea-ae7735a3767b.png)
bitbucket側でpipelinesを使うことを許可する設定を行わないとだめっぽいです。
bitbucketだとリポジトリの設定の一番下のPIPELINESのSettingのEnable Pipelinesのチェックをつけたら行けました。多分他のサービスでも似たような設定項目があると思います。
![びt.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/f774aceb-807d-0d85-9719-ffa81185efc9.png)
次にプロジェクトタイプを選びます。s3へのアップロードとcloudfrontのキャッシュ削除だけならbasicでいいです。というかproだとお金取られるのかな？(わからない)
![pro.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/2287db31-c33f-d087-593e-f788f9a51d62.png)
##Projectの設定
Projectの作成が完了したらこんな画面が出てくると思います。上の項目のDeployを選びます。
![dep.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/f000e7a2-00b7-822b-34b2-71cd5ce872b8.png)
パイプライン（ビルドの手順のことをこう呼ぶらしい）でデプロイするブランチを設定します。この項目はよくわかってません。指定したブランチにプッシュされた時にトリガーするって設定かと思ったら初期設定だと他のブランチにプッシュしてもビルドが動いてました。ビルドするデータの場所……？とりあえずgit側でデプロイ用のブランチ作ってその名前と同じにしました。
![up.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/69c7cb72-b9c2-c0f0-ac72-ca40e1f21baa.png)
###s3へのアップロード
まずはs3の項目を選択。
![s3.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/7776f068-ecab-c886-0a4a-9a22a5a8b8c7.png)
s3の設定。*AWS Access Key ID、AWS Secret Access Key*はs3の権限（AmasonS3FullAccess）を持ってるIAMユーザのものを使用します。新しく作るなら後でつかうのでcloudfrontの権限(CloudFrontFullAccess)も持たせておくといいです。AWS Secret Access Keyは後でも入力するのでちゃんと保存しておいてください。IAMの設定は割愛します。[AWSのドキュメント](https://docs.aws.amazon.com/ja_jp/general/latest/gr/managing-aws-access-keys.html)を参照して下さい。
*Region*は[リージョン対応表](https://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html)を見て合うものを選択してください。東京ならap-northeast-1です。
*local Path*はgit上のアップロードしたいファイルがあるフォルダを指定します。
*S3 Bucket*はアップロード先のBucket名を入れてください。
*ACL*はprivateでいいと思います。（よくわかってない）（権限関連だからよくわかってないのは危なそう）([資料](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/acl-overview.html#sample-acl)読む限りprivateなら許可された人のみアクセスできるからこれでいいっぽい？)
![s3r.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/2ecd37f2-b944-bae1-afdd-399a67da9283.png)
設定ができたら下の画像のように表示されます。これでs3へのアップロードの設定は完了です。次はcloudfrontのキャッシュ消去です。
![yuaz.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/82c7c287-c324-f973-1a4a-060cb98ef276.png)

###cloudfrontのキャッシュ消去
cloudfrontは連携できないのでaws cliを使って行います。codeshipに標準で入ってます。Custom Scriptを選びます。
![こんd.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/282d067f-6a5d-441f-32f7-e1c2e6bbe002.png)
deployment commandsには
`aws cloudfront create-invalidation --distribution-id クラウドフロントのディストリビューションのアイディ --paths "/*"`と書きます。ID（アイディ）は下の画像の赤丸の部分のことです。`"/*"`の部分は消去したいキャッシュの場所です。注意点として*(アスタリスク)を使う場合は""(ダブルクォーテーション)で囲む必要があります。

↓AWSコンソール画面↓
![cl.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/a8ed981d-aa0f-6386-85c0-8a0e61dd0a6a.png)
↓custom scriptの設定画面↓
![ぢs.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/696372c2-4d21-a441-2a7d-b36be832cb16.png)

次にaws cliで使うアクセスキーの設定をします。
上のメニューのEnvironmentを選びます。
![enn.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/18707d5f-a79a-e87f-03cf-9f1570bf8a56.png)

Environment VariablesにIAMのアクセスキーを追加します。keyにAWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEYと入力してValueにそれぞれの値を入力してください。内容はs3で設定したときと同じです。cloudfrontのアクセス権(CloudFrontFullAccess)を持ってるユーザじゃないとだめです。

↓流石に雑消しじゃ怖いのでキーは映してません。右側にvalueがあります。↓
![あc.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/a98d9b58-a2d9-6acd-94aa-15448de88631.png)
##build triggerの設定
初期設定だと、どのブランチにプッシュしてもビルドが走ってしまいます。
デプロイ用のブランチにプッシュしたときのみビルドを走らせたいので設定を変更します。
上のメニューのBuid Triggersを選びます。
![bt.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/0c9b7df6-9c4f-02d7-9bdc-3be7a8c8fe70.png)
この項目はお好みで（特定のブランチのみを指定するならRun builds for these branches onlyをえらんでEnter one branch per lineにそのブランチ名を書けばOKです）正規表現も使えるらしい。
![sete.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/e9b94196-4bd1-e8e7-beb2-494b6aa0b2d4.png)


#実行
指定したブランチにプッシュするとビルドが始まるはずです。Projectトップを見るとビルド中の情報が見れます。成功したら以下のようにSUCCEEDEDと出ます。失敗したらFAILEDと出てどのステップで失敗したか、どういうエラーが出たかが見れます。設定を修正したら赤丸のRestart buildでもう一度実行できます。最初は一応s3とcloudfront、自分のサイトが更新されているかを確認しましょう。
![bbbb.PNG](https://qiita-image-store.s3.amazonaws.com/0/67919/5d592a0c-29bc-e1b6-cbbe-8f4730bc4c33.png)

#終わり
これでデプロイ作業が楽になります。正直手動でアップロードとキャッシュ削除するのがめんどくさすぎてサイトの更新停滞してたのでこれでだいぶモチベ戻りました。やっぱり自動化は大事。

~~表記統一全然できてないな……。最初とかですます調ですらないし……。~~

#参考
https://qiita.com/kashitaka1118/items/75954c92c0db9bf669e3
https://cwhite.me/continuous-delivery-for-your-static-site-with-codeship/