6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

注意:うろ覚えなんで手順抜けてる可能性あります。

背景

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
bitbucket側でpipelinesを使うことを許可する設定を行わないとだめっぽいです。
bitbucketだとリポジトリの設定の一番下のPIPELINESのSettingのEnable Pipelinesのチェックをつけたら行けました。多分他のサービスでも似たような設定項目があると思います。
びt.PNG
次にプロジェクトタイプを選びます。s3へのアップロードとcloudfrontのキャッシュ削除だけならbasicでいいです。というかproだとお金取られるのかな?(わからない)
pro.PNG

Projectの設定

Projectの作成が完了したらこんな画面が出てくると思います。上の項目のDeployを選びます。
dep.PNG
パイプライン(ビルドの手順のことをこう呼ぶらしい)でデプロイするブランチを設定します。この項目はよくわかってません。指定したブランチにプッシュされた時にトリガーするって設定かと思ったら初期設定だと他のブランチにプッシュしてもビルドが動いてました。ビルドするデータの場所……?とりあえずgit側でデプロイ用のブランチ作ってその名前と同じにしました。
up.PNG

s3へのアップロード

まずはs3の項目を選択。
s3.PNG
s3の設定。AWS Access Key ID、AWS Secret Access Keyはs3の権限(AmasonS3FullAccess)を持ってるIAMユーザのものを使用します。新しく作るなら後でつかうのでcloudfrontの権限(CloudFrontFullAccess)も持たせておくといいです。AWS Secret Access Keyは後でも入力するのでちゃんと保存しておいてください。IAMの設定は割愛します。AWSのドキュメントを参照して下さい。
Regionリージョン対応表を見て合うものを選択してください。東京ならap-northeast-1です。
local Pathはgit上のアップロードしたいファイルがあるフォルダを指定します。
S3 Bucketはアップロード先のBucket名を入れてください。
ACLはprivateでいいと思います。(よくわかってない)(権限関連だからよくわかってないのは危なそう)(資料読む限りprivateなら許可された人のみアクセスできるからこれでいいっぽい?)
s3r.PNG
設定ができたら下の画像のように表示されます。これでs3へのアップロードの設定は完了です。次はcloudfrontのキャッシュ消去です。
yuaz.PNG

cloudfrontのキャッシュ消去

cloudfrontは連携できないのでaws cliを使って行います。codeshipに標準で入ってます。Custom Scriptを選びます。
こんd.PNG
deployment commandsには
aws cloudfront create-invalidation --distribution-id クラウドフロントのディストリビューションのアイディ --paths "/*"と書きます。ID(アイディ)は下の画像の赤丸の部分のことです。"/*"の部分は消去したいキャッシュの場所です。注意点として*(アスタリスク)を使う場合は""(ダブルクォーテーション)で囲む必要があります。

↓AWSコンソール画面↓
cl.PNG
↓custom scriptの設定画面↓
ぢs.PNG

次にaws cliで使うアクセスキーの設定をします。
上のメニューのEnvironmentを選びます。
enn.PNG

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

↓流石に雑消しじゃ怖いのでキーは映してません。右側にvalueがあります。↓
あc.PNG

build triggerの設定

初期設定だと、どのブランチにプッシュしてもビルドが走ってしまいます。
デプロイ用のブランチにプッシュしたときのみビルドを走らせたいので設定を変更します。
上のメニューのBuid Triggersを選びます。
bt.PNG
この項目はお好みで(特定のブランチのみを指定するならRun builds for these branches onlyをえらんでEnter one branch per lineにそのブランチ名を書けばOKです)正規表現も使えるらしい。
sete.PNG

実行

指定したブランチにプッシュするとビルドが始まるはずです。Projectトップを見るとビルド中の情報が見れます。成功したら以下のようにSUCCEEDEDと出ます。失敗したらFAILEDと出てどのステップで失敗したか、どういうエラーが出たかが見れます。設定を修正したら赤丸のRestart buildでもう一度実行できます。最初は一応s3とcloudfront、自分のサイトが更新されているかを確認しましょう。
bbbb.PNG

終わり

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

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

参考

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

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?