LoginSignup
1

More than 1 year has passed since last update.

CodeCommit と CodePipeline を使って S3 に自動デプロイしたい

Last updated at Posted at 2022-12-22

昨日は @Nyokki さんの SQL についての記事でした。
@Nyokki さんの記事は毎回丁寧で勉強になりますよね!!

今日は、 CodeCommit と CodePipeline を利用して、以前書いた S3 で静的ホスティングをおこなった環境を git のブランチに push をすることで、自動デプロイできるようにしてみたいと思います。

CodeCommit を作成

CodeCommit のコンソール画面へ移動

image.png

リポジトリの作成をクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f64366432636431612d393764362d323561392d623161382d3261353662346530376437342e706e67.png

リポジトリ名を入力して作成をクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37623033313938322d336666392d343335392d613630342d3361626330323135326636322e706e67.png

リポジトリが作成できる

image.png

CodeCommit にアクセス

ローカルから CodeCommit に push するための設定を行います。

IAM ユーザーを作成

IAM のコンソール画面へアクセスする

image.png

ユーザーをクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f34373630303664312d626433362d363731652d386633642d3031343430306364626462302e706e67.png

ユーザーを追加をクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f31336334343062322d643565662d383735392d633561652d3633666561373363383833342e706e67.png

ユーザー名を入力し、
アクセスキー - プログラムによるアクセス を選択

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37663063643066612d333532302d666238642d336539372d3331323564363237366566352e706e67.png

既存のポリシーを直接アタッチ を選択

image.png

AWSCodeCommitPowerUser をつけてユーザーを作成

image.png

image.png

ssh key を作成

 ssh-keygen -f ./codecommit-sample-key
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):今回は空白
Enter same passphrase again:今回は空白
Your identification has been saved in ./codecommit-sample-key
Your public key has been saved in ./codecommit-sample-key.pub

認証情報の追加

ユーザー画面からユーザー名をクリック。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f62353131383565302d613137382d633439622d366337622d6130656664373762396434392e706e67.png

先ほど作成した、codecommit-sample-key.pub の中身を貼り付け。
SSH パブリックキーのアップロード をクリック。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32316630663533312d373966382d353663332d616630382d6437313732376265643235352e706e67.png

SSH キーID をコピーしておく。

image.png

ssh config に設定

vim ~/.ssh/config

#  下記設定を追記
Host git-codecommit.*.amazonaws.com
    User              [SSHキーID]
    IdentityFile      [プライベートキーのパス (例)~/.ssh/test_repo]

git clone を試す

CodeCommit の SSH のクローンで接続情報こコピーしておく

image.png

 git clone ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example

前回作成したファイルをディレクトリ配下に移動させて、push してみる。

ls -l
total 8
drwxr-xr-x  3 kakiuchi  staff   96 11  6 17:03 css
-rw-r--r--@ 1 kakiuchi  staff  252 11  6 13:43 index.html
git push origin master
Warning: Permanently added 'git-codecommit.ap-northeast-1.amazonaws.com' (RSA) to the list of known hosts.
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (5/5), 515 bytes | 515.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
To ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example
 * [new branch]      master -> master

リポジトリにファイルが上がっているのがわかる。

image.png

CodePipeline でデプロイを行う

CodeCommit に push されたタイミングで自動デプロイされるように設定していきます。

CodePipeline のコンソールを開く。

image.png

パイプラインを作成する をクリック。

スクリーンショット 2022-12-21 19.58.28.png

パイプライン名を入力し、次に をクリック

スクリーンショット 2022-12-21 20.00.32.png

  • ソースプロバイダーAWS CodeCommit
  • リポジトリ名を先ほど作成したブランチ名
  • ブランチ名 をデプロイに使用したいブランチ名

に設定し、次にをクリック

スクリーンショット 2022-12-21 20.02.25.png

今回ビルドステージは必要ないので、ビルドステージをスキップをクリック

スクリーンショット 2022-12-21 20.06.25.png

上記の設定ができれば 次に をクリック

スクリーンショット 2022-12-21 20.16.44.png

パイプラインを作成する をクリック

image.png

パイプラインが生成され、初回のデプロイが走る

image.png

この時点ではコードに変更はないので当然画面もそのまま

image.png

編集したコードを push してデプロイしてみる

index.html を編集する

index.html
<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的 Web サイトホスティング</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      Hello!!<br>Hello!!<br>Hello!!
    </div>
  </div>
</body>
</html>

CodeCommit へ push

$ git add index.html

$ git commit -m "test commit"

$ git push origin master

CodeCommit

CodeCommit のリポジトリのコードが更新されている

image.png

CodePipeline

Deploy が成功している

image.png

サイト

ホスティングしているサイトも更新されている
(キャッシュが残っていたら反映まで少し時間がかかるかも)

image.png

おわり

明日は yukiの Next についての記事になります!
yuki は普段から Next を触っているので、どんな記事を書いてくれるのか楽しみです!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1