aws

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

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

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

【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サイトが簡単に作れる】 (engineer-ninaritai.com)

今回の記事では、CodeBuildの設定方法を解説しました。これで解説を終わります。

さらにAWSについて学びたいという方は、こちらの講座がオススメです。初心者の方向けにAWSについて幅広く学ぶことが可能です。

AWS認定ソリューションアーキテクト アソシエイト試験突破講座 – 初心者向け20時間完全コース-

こちらの参考書もオススメです。

ABOUT ME
ryu
大手メーカのIT部門でインフラエンジニアやってます。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!