LoginSignup
4
2

More than 3 years have passed since last update.

CodePipelineで誰でもお手軽自動デプロイ(静的webページ編)

Posted at

今回作るやつ概要

GitHub × CodePipelineで自動デプロイ :rocket:

◯おすすめな人

■ フロント系の方、web制作系の方
■ SPA公開したい方
■ CI/CDで挫折した方

準備しておくもの

■ GitHubアカウント
■ AWSアカウント
■ 静的webホスティングの設定をしたS3バケット

下記が個人的にわかりやすかったです!
【参考】AWS S3で静的Webページをホスティングする
【参考】独自ドメインを使ってAmazon S3で静的Webサイトをホストする

CodePipeline構築

CodePipelineを開きパイプラインの作成を選択。

【Step1】パイプライン設定を選択する

■パイプライン名
▫️わかりやすいものならなんでもOK
■サービスロール
▫️新しいサービスロール
■ロール名
▫️自動で入る

【Step2】ソースステージを追加する

■ソースプロバイダー
▫️GitHub
■検出オプションを変更する
▫️GitHubウェブフック(推奨)

GitHubに接続するを選択


■GitHubへSign inします。

■接続完了!!

■リポジトリ
▫️自動デプロイの対象としたいリポジトリを選択

■ブランチ
▫️対象のブランチを選択(masterでpushしたら発火的な)

【Step3】ビルドステージを追加する

今回は使用しないのでビルドステージをスキップを選択

【Step4】デプロイステージを追加する

■デプロイプロバイダー
▫️Amazon S3
■リージョン&バケット
▫️静的webホスティングの設定をしたS3バケット
■デプロイする前にファイルを抽出する
▫️チェック

【Step5】レビュー

■設定内容の確認をして下さい!

完成!!

デプロイステージに設定したバケットを見てみると、ちゃんと反映されてる!

もちろん対象のブランチでpushしたら変更が反映されます!

感想

静的webということもありましたが意外と簡単に実装できたと思います!
今回は説明しませんでしたがCloudFrontを前段に置くことで独自ドメインを使用することも出来ます!

4
2
0

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
4
2