GitHubとCodeBuildを使ってアーティファクトを作る

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はGitHubとCodeBuildを使ってローカルで作成したReact環境のアーティファクトを作ってみたいと思います。
※当方インフラエンジニアです。フロントエンド関係は勉強中です。なので詳しいことは書けません。Reactは勉強中です。難しい。

環境イメージ

EC2（Amazon Linux 2023）でReact環境を作っていきます。
それをGitHubにpush。GitHubにpushされている情報CodeDeployに読み込ませてアーティファクトを作っていきたいと思います。
今後、このアーティファクトをCodeDeployに読み込ませて環境デプロイをしていきたいと思います。

環境構築

GitHubリポジトリ作成

Githubにパブリックリポジトリを作成してそこにコードをpushします。
Create repositoryを押下します。

以下の設定でCreate Repositoryしていきます。

リポジトリが作成できたことを確認します。

EC2環境構築

SSHでログインして以下のコマンドを実行していきます。
まずはgithubからcloneしていきます。

[ec2-user@ip-192-168-1-84 ~]$ sudo su -
[root@ip-192-168-1-84 ~]# dnf update && dnf upgrade -y
[root@ip-192-168-1-84 ~]# dnf install -y git
[root@ip-192-168-1-84 ~]# git clone https://github.com/ohtsuka-shota-se/app.git
Cloning into 'app'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (3/3), done.
[root@ip-192-168-1-84 ~]# ls
app
[root@ip-192-168-1-84 ~]# cd app/

Reactを実行できる環境を用意し、実行していきます。

[root@ip-192-168-1-84 ~]# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
[root@ip-192-168-1-84 ~]# source ~/.bashrc
[root@ip-192-168-1-84 ~]# nvm install --lts
Installing latest LTS version.
Downloading and installing node v22.18.0...
Downloading https://nodejs.org/dist/v22.18.0/node-v22.18.0-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v22.18.0 (npm v10.9.3)
Creating default alias: default -> lts/* (-> v22.18.0)
[root@ip-192-168-1-84 ~]# node -v
v22.18.0

[root@ip-192-168-1-84 app]# npm create vite@latest .

> npx
> create-vite .

x
◇  Current directory is not empty. Please choose how to proceed:
x  Remove existing files and continue
x
◇  Select a framework:
x  React
x
◇  Select a variant:
x  JavaScript
x
◇  Scaffolding project in /root/app...
x
m  Done. Now run:

  npm install
  npm run dev

[root@ip-192-168-1-84 app]# ls -a
.   .git        README.md         index.html    public  vite.config.js
..  .gitignore  eslint.config.js  package.json  src
[root@ip-192-168-1-84 app]# npm install
[root@ip-192-168-1-84 app]# npm run dev -- --host 0.0.0.0

> app@0.0.0 dev
> vite --host 0.0.0.0

12:15:32 AM [vite] (client) Re-optimizing dependencies because lockfile has changed

  VITE v7.1.3  ready in 367 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.84:5173/
  ➜  press h + enter to show help

http://EC2のパブリックIP:5173でアクセスし、例の画面が表示されることを確認します。

GitHubのtoken生成とpush

GitHubにpushするためのtokenを生成していきます。
GitHubのコンソールからsettingsを押下します。

Developer settingsを押下します。

Personal access tokensを押下
classicを選択します

以下のように作成してきます。

tokenが生成されているはずなので、これを控えます。

EC2でpushしていきます。

[root@ip-192-168-1-84 app]# git config --global user.email "●●@gmail.com"
"
[root@ip-192-168-1-84 app]# git config --global user.name "ohtsuka-shota-se"
[root@ip-192-168-1-84 app]# git add .
[root@ip-192-168-1-84 app]# git commit -m "first-push"
[main daf8a93] first-push
 13 files changed, 3068 insertions(+), 2 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 eslint.config.js
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.css
 create mode 100644 src/App.jsx
 create mode 100644 src/assets/react.svg
 create mode 100644 src/index.css
 create mode 100644 src/main.jsx
 create mode 100644 vite.config.js

[root@ip-192-168-1-84 app]# git push origin main
Username for 'https://github.com': ohtsuka-shota-se
Password for 'https://[e-mail]':（tokenを入力）
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Compressing objects: 100% (16/16), done.
Writing objects: 100% (18/18), 28.24 KiB | 5.65 MiB/s, done.
Total 18 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To https://github.com/ohtsuka-shota-se/app.git
   4f6c8b7..daf8a93  main -> main

pushされたことを確認します。

CodeBuild

ようやく本日の主役の登場です。
CodeBuild管理画面からプロジェクト作成を押下

プロバイダはGitHub。リポジトリのURLを入力します。
作成途中で認証情報がありますが、、これに対応します。
アカウント認証情報を管理しますの部分を押下。

Githubの個人用アクセストークンは先ほどDeveloper toolsで作成したtokenを使用します。

以下の設定で保存していきます。
buildspecの他、作成されるアーティファクトを格納するS3も選択しておきます。

今回使用したbuildspecです。
このファイルは、CodeBuildがソースコードをどのようにビルド（構築）し、成果物（アーティファクト）をどのように出力するかを定義するための指示書のようなものです。
※本当であれば、これもgithubにpushして管理したりCodeBuildに読み込ませた方が良いと思うのですが、今回は初めてなので・・・

中身はnpmのコマンドとかですね。

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 22 
    commands:
      - echo "依存パッケージをインストールします..."
      - npm install
      
  build:
    commands:
      - echo "ビルドを開始します..."
      - npm run build

artifacts:
  base-directory: 'dist'
  files:
    - '**/*'

ビルドを開始を押下していきます。

ビルドステータスが表示されます。

ビルドログのタブを開くことで実行結果を確認することが可能です。
ステータスが成功となることを確認します。

ビルドプロジェクトからアーティファクトの格納URLを確認します。

S3に格納されいてることを確認します。