月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

AWS CodePipeline×CodeBuildでVueアプリを自動ビルド・デプロイしてみた話

             
  • 2020.02.29
  • AWS
AWS CodePipeline×CodeBuildでVueアプリを自動ビルド・デプロイしてみた話
Advertisement

 

なんかちょい前にVueでダッシュボードアプリを作りました。

 

こいつは今GitHub上でソースコードを管理しています。

URL:「https://github.com/izumin0401/vue-dashboard」

 

せっかくなので、こいつのmasterブランチに変更が加わった段階でCodeBuildで自動ビルドを行い、CodePipelineで今配置されているS3へ自動デプロイするようにしたいと思います。

ってことでやりましょう。

 

僕のプロフィールはこちら

 

 

前提

・GitHubで管理されているVueアプリが存在すること

・S3×CloudFrontでVueアプリが配信されていること

 

 

 

ざっくりイメージ

今回の構築が完了すると、以下の手順で自動ビルド・デプロイが行われます。

①Vueアプリのmasterブランチに変更をプッシュ。

②GitHubのWebhookが起動し、CodePipelineが起動。

③CodePipelineがCode Buildにソースコードを一式渡す。

④CodeBuildがbuildspec.ymlに基づきビルド開始。

⑤CodePipelineがビルドした成果物をS3にデプロイ。

CodeBuild内でCloudFrontのキャッシュ削除も行います。

 

 

Vueアプリのルートにbuildspec.ymlを配置

CodeBuildは当然アプリのビルドをするわけですが、ではそのアプリのビルド手順はどこに定義されているのでしょうか?

実は、というほどのものでもないですが、CodeBuildは「buildspac.yml」というファイルを見てビルドを行います。

このファイルをVueアプリのルートに配置することで、CodeBuildがファイルに基づきビルドを実行してくれます

 

こんな感じの「buildspac.yml」をルートに配置します。

node_module」という記載がちらほら見えますが、これは単純にキャッシュを利用しているだけなので、あまり気にしなくても良いです。

■GitHub

URL:「https://github.com/izumin0401/vue-dashboard/blob/master/buildspec.yml」

 

 

S3のバケットを確認

すでにVueアプリはS3にデプロイ済み前提ですが、一応今の現状を確認しておきます。

 

CodePipline1

こんな感じですね。

 

 

CodePipeline設定

CodePipline2

CodePipelineの画面を開き、「パイプラインを作成する」をクリックします。

 

 

CodePipline3

上記のような設定を行い、「次へ」をクリックします。

※パイプライン名は後で編集できないので注意しましょう。
※リージョンは無難に東京とかにしときましょう。

 

 

CodePipline4

ソースプロバイダーの選択をします。

ソースプロバイダーとは「ソースの提供元」のことで、「ソースの提供元はどこですか?」と聞かれているわけです。

今回はGitHub上にソースを管理しているので「GitHub」を選択します。

※ソースをCodeCommitに管理している場合は、「CodeCommit」を選択します。

 

 

CodePipline5

GitHubを選択すると、下部に「GitHubと接続」ボタンが表示されるのでクリックします。

うまくいけば、上記のようにリポジトリとブランチを選択できるようになります。

次へ」をクリックして進みます。

この段階でCodePipelineとGitHubの疎通を確認しているイメージですね。

 

 

CodePipline6

プロバイダーに「AWS CodeBuild」を選択します。

今回はCodeBuildを事前に作成していないので、「プロジェクトを作成する」をクリックします。

 

 

CodePipline7

プロジェクト名は面倒なのでPipelineと同じ「vue-dashboard」にしました。

 

 

CodePipline8

環境設定はこんな感じです。

ランタイム「Standard」には、どうやらnode.js等が含まれているようです。

■参照

URL:「https://docs.aws.amazon.com/codebuild/latest/userguide/build-env-ref-available.html」

 

あとはデフォルト設定でOKです。

 

 

CodePipline9

Pipelineの画面に先ほど作成したCode Buildのプロジェクト名が表示されていればOKです。

次に」をクリックします。

 

 

CodePipline10

上記のように、デプロイ設定を行います。

次に」をクリックします。

 

 

キャプチャ忘れ。

確認画面が表示されるので、「パイプラインを作成する」をクリックします。

 

 

CodePipline11

こんな感じで経過が分かります。

 

 

CodePipline12

どうやらすべてうまくいったみたいですね。

S3を確認してみましょう。

 

 

CodePipline13

日付が今日日付になっているので、どうやらデプロイされたようです。

素晴らしい。

 

 

Advertisement

 

CloudFrontのキャッシュは?

今のままだとS3の資材は最新化されますが、CloudFrontのキャッシュは消えない。。

ってことで、「buildspec.yml」を修正します。

 

buildspec.ymlの修正

なんか他のサイトとかだとこれでうまくいってる感じなんですが、これだとうまくいきません。

その理由は後述しますが、この時点ではどうせ失敗するので「buildspec.yml」はプッシュしない方が良いです。

${CLOUDFRONT_DISTRIBUTION_ID}は環境変数です。
ID等の情報はソース上に持たず、AWS上に環境変数として設定します。

 

環境変数の設定

CodePipline14

CodeBuild > ビルドプロジェクト > [あなたのプロジェクト] > 環境を編集する」から、追加設定で環境変数を設定します。

値にCloudFrontのDistributionIDを入力します。

 

CodeBuildにCloudFrontへの権限を付与する

CodeBuildはbuildspec.ymlファイルを元にビルドを行いますが、このファイルに先ほどCloudFrontへのコマンドを追記しました。

が、CodeBuildはCloudFrontへの諸々権限も持っていないため、「権限ないよ」って言われてエラーになります。

なので、CodeBuildのIAMロールにCloudFrontへの権限を付与してあげましょう。

 

CodeBuild > ビルドプロジェクト > [あなたのプロジェクト] 」の環境に記載されているサービスロールをクリックします。

 

 

CodePipline15

IAMの画面が開くので、ポリシー「CloudFrontFullAccess」をアタッチします。

※FullAccessはいらないですが、面倒なので全権限付与してます。

 

 

CodePipline16

再度パイプラインが正常に動けば、上記のようにCloudFrontのキャッシュも削除されます。

素晴らしい。

 

 

まとめ

元々Code Buildを触りたかっただけだったのが、色々と触る羽目に。。

が、CodePipelineはクソ便利だということが分かりました。

さいなら。

Travelerを知らないの?