aws

【AWS】CodeBuildを使ってSPAアプリをS3で公開する方法解説!

こんにちは、フルスタックエンジニアのryuです。

今回の記事は、CodeBuildを使ってSPAアプリをS3で公開する方法を解説します。CodeBuildを使うことでSPAアプリのビルドを自動化することができます。今回の記事では、CodeBuildの使い方を分かりやすく解説します!

サーバー構築を実践で身につけるInfraAcademy

※本ページには、プロモーション・アフィリエイトリンクが含まれています

【AWS】CodeBuildを使ってSPAアプリをS3で公開する方法解説!

AWSのCodeBuildの使い方が分からない・・・

今回の記事では、AWSのCodeBuildを使って、SPAのアプリをS3で公開する方法を解説します。

CodeBuildとは、ソースコードのコンパイルやテストを自動化してくれる便利なサービスです。CodecommitやCodePipelineなどと連携して、ソースコードを更新したらデプロイまで自動で行ってくれます。

今回は、SPAのアプリを自動でビルドして、S3に公開する部分を解説します。SPAのアプリはNuxt.jsで実装しております。使用するソースコードについては、下記のGitHubをご覧ください。

engineer-ninaritai/codebuild-spa (github.com)

Codebuildプロジェクトの作成

まず、Codebuildのプロジェクトを作成します。

AWSのコンソール画面から、「CodeBuild」と検索して、CodeBuildの操作画面に進みます。

AWSのCodeBuild

操作画面に進んだら、画面右の「ビルドプロジェクトを作成する」をクリックしましょう。

ビルドプロジェクトを作成する

まず、プロジェクト名の設定を行います。プロジェクトの名前が分かるように設定してください。今回は「spa-app」にしました。

CodeBuildのプロジェクト名の設定

ビルドするリポジトリの選択

次に、ビルドするソースコードのリポジトリの場所を指定します。

GitHubにリポジトリがある場合は、ソースプロパイダーを「GitHub」にします。

CodeBuildのソースリポジトリ

そして、「OAuthを使用して接続する」を選択して、「GitHubに接続」をクリックすると、以下のような画面が出るので、「Authorize aws-docesuite」をクリックして進めます。

CodeBuildとGitHubの連携

そして、リポジトリのURLを入力したら完了です。

もし、GitHubのアカウントが無い場合は、CodeCommitを使用するのが楽です。AWSでソース管理のリポジトリを作成することができます。設定方法はこちらの記事で解説しております。

CodeBuildの環境の設定

続いて、CodeBuildの環境の設定です。ソースコードをビルドするためのサーバーのバージョンなどを設定します。

CodeBuildの環境

ソースコードのリポジトリとの連携が完了したら、ビルドするサーバー環境の設定です。以下のように設定しましょう。

  • 環境イメージ→マネージド型イメージ
  • オペレーティングシステム→Amazon Linux 2
  • ランタイム→Standard
  • イメージ→aws/codebuild/amazonlinux2-x86-64starndard:3.0
  • イメージのバージョン→最新のもの
CodeBuildのサーバー環境設定

SPAをビルドするだけなら、特にデフォルトの設定で大丈夫ですが、アプリに特殊な設定などをしている場合は、Dockerイメージを使ってビルド環境を構築することができます。

Codebuildのサービスロール

次は、サービスロールの設定です。CodebuildのIAM権限の設定です。新しいサービスロールを選択しましょう。

Codebuildの新しいサービスロール

CodebuildからAWSのサービスを操作する場合に、このサービスロールに権限を与えます。例えば、S3にファイルをアップロードするための権限などです。

CodeBuildでアプリをビルドする設定ファイルの作成

次に、CodeBuildでアプリをビルドする設定ファイルの作成を行います。これは、「Buildspec」ファイルと呼ばれています。

Buildspecファイルの設定

CodeBuildのサーバー環境の設定が完了したら、Buildspecの設定を行います。どのようにソースコードをビルドするのかをBuildspecファイルに定義します。

Codebuild上の設定はデフォルトのままで大丈夫です。ビルド仕様の「buildspecファイルを使用する」にチェックがあることを確認してください。

この場合、ソースコードのルートディレクトリにbuildspec.ymlファイルを作成する必要があります。

ビルドの方法を定義するbuildspec.ymlの作成

次にbuildspec.ymlファイルの作成を行います。GitHubのリポジトリにはすでに作成してありますが、念のためファイルの中身を公開します。

version: 0.2

phases:
  install:
    commands:
      - cd app
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - aws s3 rm s3://www.engineer-ninaritai.com --recursive
artifacts:
  files:
    - '**/*'
  base-directory: 'dist'

[S3のバケット名]の部分は、自分のS3のバケット名を指定しましょう。

buildspecファイルの内容については詳しくは説明しないので、こちらのドキュメントを参考にしてください。

CodeBuild のビルド仕様に関するリファレンス – AWS CodeBuild (amazon.com)

アーティファクトの設定

最後にアーティファクトの設定です。下記のようにS3を選択しておきましょう。

Codebuildのアーティファクト

残りの設定はデフォルトのままで大丈夫です。ビルドプロジェクトの作成を完了させましょう!

CodeBuildにS3の権限を付与する

Codebuildのプロジェクトの作成が完了したら、先ほど作成したサービスロールにS3の権限を付与しましょう。

権限が無いと、下記のように”(AccessDenied) when calling the ListObjectsV2 operation: Access Denied”とエラーメッセージが表示されます。

IAMから「ロール」→「Codebuildのサービスロール」→「ポリシーのアタッチ」を選択しましょう。そして、S3の権限を付与します。

また、S3側のバケットポリシーの設定もしておきましょう!S3の「アクセス許可」から選択できます。

CodeBuildを実行させてみよう

最後にCodebuildを実行させてみましょう。画面右上の「ビルドを開始」をクリックします。

ステータスが完了になることを確認してください。

S3にもビルドしたファイルがあることを確認してください。

S3は静的サイトの公開の設定をすれば、ビルドしたサイトを見ることができます。静的サイトの公開の手順はこちらで解説しております。

【AWS】S3でNuxt.jsの静的サイトを公開する方法解説!【初心者でもWebサイトが簡単に作れる】

CodeBuildなどAWSを勉強するならUdemyがおすすめ

CodeBuildなどAWSを勉強するならUdemyがおすすめです。

UdemyはITの講座が豊富にあるサイトです。参考書での勉強が苦手な方にはおすすめです。

以下のように、AWSに関する講座が豊富にあります!

Udemyがおすすめな理由
  1. セールだと1500円前後!
  2. 無料サンプル講義動画・無料講義動画あり!
  3. 気に入らなければ30日間返金保証!

UdemyでAWSの講座を探す

CodeBuildを使ってSPAアプリをS3で公開する方法まとめ

今回の記事では、CodeBuildの設定方法を解説しました。CodeBuildを使ってSPAアプリをS3で公開したい方は参考にしてください。

AWSをさらに勉強したい方はこちらの参考書がオススメです。

関連:【入門から応用まで】AWSのオススメ参考書5選!【現役クラウドエンジニアが解説します】

ABOUT ME
ryu@InfraAcademyというインフラ学習サービス運営
大手企業→上場ベンチャー→スタートアップでエンジニアをしていました。 インフラエンジニア歴10年以上。 Linuxやネットワークの学習ができるサービスInfraAcademyを運営中。
RELATED POST