こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。
今回はCodeBuildを使って作成したアーティファクトをCodeDeployを使ってデプロイしていきたいと思います。
※当方インフラエンジニアです。フロントエンド関係は勉強中です。なので詳しいことは書けません。Reactは勉強中です。難しい。
環境イメージ
今回はEC2にデプロイしていきます。その際EC2にCodeDeployAgentを導入しないといけませんが、SystemManagerのDistributor機能を使って配布していきます。
その後CodeDeployを使ってデプロイをします。
環境構築
EC2
deploy先のEC2を用意します。
このEC2はAmazonS3FullAccessとAmazonSSMManagedInstanceCoreを持たせておきます。起動しておきましょう。SSH接続して何かをしておく必要はございません。
また、EC2のタグに以下を追加します。値は任意です。
このタグを見て、CodeDeployが行われます。
CD-Group：Code-Deploy-React-App-Group
SystemManaerを使ってEC2にCodeDeployAgentをインストールする
SSMを使ってCodeDeployment Agentをインストールします。
Fleet Manager機能を使用します。
- Fleet Managerは、AWS Systems Managerが提供する機能の一つで、AWS上やオンプレミス環境にあるサーバー群（フリート）を、単一の統合されたコンソールから一元的にリモート管理するためのツールです
- Fleet Managerを利用するには、管理したいEC2インスタンスやサーバーを、Systems Managerの管理対象である「マネージドノード」として登録する必要があります
使用を開始するボタンを押下します。
開始ボタンを押下した後、以下のような画面が表示されると思います。
デフォルトのホスト管理設定を設定するを押下します。
以下の設定で設定をしておきます。
IAMロールはデフォルトで作成されていて、推奨と表示されているものがあると思いますのでそれを選択します。
設定後少し待機すると、EC2を検知すると思います。
出てこなければEC2にSSHして、systemctl status amazon-ssm-agentがactiveとなっていることやrestartを試みてみると良いかもしれません。私はそれで解消しました。
ディストリビュータタブを押下します。
配布できるパッケージ一覧が表示されます。
CodeDeployment ManagerからCodeDeployAgentを選択した状態で、1回限りのインストールを押下
インストールしたいEC2を選択し、実行を押下します。
成功となれば、CodeDeployAgentが対象のEC2にインストール出来たことになります。
EC2にSSHして、codedeploy-agentが起動しているか確認してみるといいかもしれません。
[root@ip-172-31-36-117 ~]# systemctl status codedeploy-agent
● codedeploy-agent.service - AWS CodeDeploy Host Agent
Loaded: loaded (/usr/lib/systemd/system/codedeploy-agent.service; enabled;>
Active: active (running) since Sat 2025-09-27 01:38:06 UTC; 2min 57s ago
Main PID: 7041 (ruby)
Tasks: 3 (limit: 1111)
Memory: 66.5M
CPU: 1.124s
CGroup: /system.slice/codedeploy-agent.service
tq7041 "codedeploy-agent: master 7041"
mq7048 "codedeploy-agent: InstanceAgent::Plugins::CodeDeployPlugin>
Sep 27 01:38:04 ip-172-31-36-117.ap-northeast-2.compute.internal systemd[1]: St>
Sep 27 01:38:06 ip-172-31-36-117.ap-northeast-2.compute.internal systemd[1]: St>
lines 1-13/13 (END)
S3にCodeDeployに必要な資材を準備する。
S3のフォルダ構成を以下とします。
このS3はCodeBuildで生成したアーティファクトがあるものでOKです。
.
├── react-app-build-project/ # CodeBuildでビルドされたアーティファクト
│ ├── index.html
│ └── assets/
│ └── ...
├── appspec.yml # CodeDeployへの指示書
└── scripts/ # 実行するスクリプト群
├── install_apache.sh # Apacheをインストールするスクリプト
└── start_server.sh # Apacheを起動するスクリプト
それぞれの設定ファイルの内容は以下としました。
appspec.yml
version: 0.0
os: linux
files:
- source: /react-app-build-project/ # アーティファクト内のdistディレクトリの中身を
destination: /var/www/html # EC2のこのディレクトリにコピーする
hooks:
AfterInstall:
- location: scripts/install_apache.sh # ファイルコピー後にApacheをインストール
timeout: 300
runas: root # root権限で実行
ApplicationStart:
- location: scripts/start_server.sh # アプリケーション起動フェーズでApacheを起動
timeout: 300
runas: root # root権限で実行
install_apache.sh
#!/bin/bash
# エラーが発生したらスクリプトを停止する
set -e
echo "Installing Apache (httpd)..."
sudo yum update -y
sudo yum install -y httpd
start_server.sh
#!/bin/bash
set -e
echo "Starting Apache (httpd)..."
# httpdを有効化して、OS起動時に自動で起動するようにする
sudo systemctl enable httpd
# httpdを起動する
sudo systemctl start httpd
S3のファイルセットをzip化していきます。
今回はCloudShellからS3のファイルをまとめてzip化していきました。
（CloudShell嫌いではないけど・・・Cloud9なんで終わったんだ・・・復活してくれ💦）
sudo su -
~ $ mkdir s3
~ $ cd s3/
s3 $ aws s3 sync s3://aws-codefamily-s3-gfonfgeovjwq .
download: s3://aws-codefamily-s3-gfonfgeovjwq/appspec.yml to ./appspec.yml
download: s3://aws-codefamily-s3-gfonfgeovjwq/install_apache.sh to ./install_apache.sh
download: s3://aws-codefamily-s3-gfonfgeovjwq/aws-codefamily-codebuild/index.html to aws-codefamily-codebuild/index.html
download: s3://aws-codefamily-s3-gfonfgeovjwq/aws-codefamily-codebuild/assets/index-D8b4DHJx.css to aws-codefamily-codebuild/assets/index-D8b4DHJx.css
download: s3://aws-codefamily-s3-gfonfgeovjwq/start_server.sh to ./start_server.sh
download: s3://aws-codefamily-s3-gfonfgeovjwq/aws-codefamily-codebuild/assets/react-CHdo91hT.svg to aws-codefamily-codebuild/assets/react-CHdo91hT.svg
download: s3://aws-codefamily-s3-gfonfgeovjwq/aws-codefamily-codebuild/assets/index-BfkMANgE.js to aws-codefamily-codebuild/assets/index-BfkMANgE.js
download: s3://aws-codefamily-s3-gfonfgeovjwq/aws-codefamily-codebuild/vite.svg to aws-codefamily-codebuild/vite.svg
s3 $ ls -ltr
total 16
-rw-r--r--. 1 cloudshell-user cloudshell-user 219 Sep 27 06:07 start_server.sh
-rw-r--r--. 1 cloudshell-user cloudshell-user 168 Sep 27 06:07 install_apache.sh
-rw-r--r--. 1 cloudshell-user cloudshell-user 597 Sep 27 06:07 appspec.yml
drwxr-xr-x. 3 cloudshell-user cloudshell-user 4096 Sep 27 06:18 aws-codefamily-codebuild
s3 $mkdir scripts
s3 $cp -p start_server.sh scripts/
s3 $cp -p install_apache.sh scripts/
s3 $ chmod +x scripts/install_apache.sh
s3 $ chmod +x scripts/start_server.sh
s3 $ zip react-app.zip -r .
adding: aws-codefamily-codebuild/ (stored 0%)
adding: aws-codefamily-codebuild/assets/ (stored 0%)
adding: aws-codefamily-codebuild/assets/index-BfkMANgE.js (deflated 69%)
adding: aws-codefamily-codebuild/assets/index-D8b4DHJx.css (deflated 50%)
adding: aws-codefamily-codebuild/assets/react-CHdo91hT.svg (deflated 49%)
adding: aws-codefamily-codebuild/index.html (deflated 39%)
adding: aws-codefamily-codebuild/vite.svg (deflated 50%)
adding: appspec.yml (deflated 39%)
adding: scripts/ (stored 0%)
adding: scripts/start_server.sh (deflated 25%)
adding: scripts/install_apache.sh (deflated 7%)
s3 $ ls
appspec.yml aws-codefamily-codebuild install_apache.sh react-app.zip start_server.sh
s3 $ aws s3 cp react-app.zip s3://aws-codefamily-s3-gfonfgeovjwq
upload: ./react-app.zip to s3://aws-codefamily-s3-gfonfgeovjwq/react-app.zip
zipファイルがアップロードできたことを確認します。
CodeDeploy
まずCodeDeploy用のIAMロールを作成していきます。
CodeDeployの管理画面に移動します。アプリケーションの作成を押下します。
プラットフォームはEC2を選択します。
次にデプロイグループを作成していきます。
IAMロールは先ほど作成したものを選択します。
環境設定のタグについては、デプロイ先EC2に設定しているものを指定します。
今回はCD-Group：Code-Deploy-React-App-Groupとなります。
デプロイグループが作成できたことを確認します。
デプロイの作成を押下していきます。
デプロイグループは先ほど作成したもの、リビジョンはS3に格納したzipを選択します。
デプロイが開始されます。
ステータスが成功となることを確認します。
http://デプロイ先のEC2IPアドレスでアクセスします。
デプロイできていますね。
個人的なメモ
もしファイルがあるのに、ファイルが無いというようなエラーを見つけたら、
①ファイルに対して実行権限+xが存在すること
②WindowsとLinuxの改行の問題（LRとかなんとか）
の確認をすること。