S3
GitLab
GitLab-CI
iRidgeDay 20

GitLab CIで始める静的コンテンツの運用

背景

「このページの文言を変更してほしい」という依頼があり、めんどい「エンジニアじゃなくてもよくない?」と思ってしまう時があります。なのでエンジニアでなくても静的コンテンツを修正・デプロイできる環境を整備しました。エンジニアがボトルネックとなることが減り、業務効率化が図れそうです。

前提条件

  • S3上で静的コンテンツを公開する。
  • 環境毎にS3バケットが存在する。
  • GitLabで静的コンテンツのバージョン管理を行なう。
  • 検証ブランチ: master、本番ブランチ: productionとする。 (gitlab-flow)
  • GitLab CIを使ってCI/CDを行なう。
  • 非エンジニアでもできるように文言の修正はGitlab上で行います。
  • (登場人物全部オレ状態ですみません。)

フロー

  1. issueを立てる
  2. 静的コンテンツの文言を修正
  3. マージリクエスト作成
  4. レビュー
  5. 検証環境ブランチへマージ
    • マージと同時にGitLab CIS3バケット(検証)に静的コンテンツがPUTされる
  6. 本番環境ブランチへマージ
    • マージと同時にGitLab CIS3バケット(本番)に静的コンテンツがPUTされる

構成

スクリーンショット 2017-12-19 20.30.24_censored.jpg

静的コンテンツ

スクリーンショット 2017-12-19 20.45.10.png

index.html
<html lang="ja">

<head>
  <link href="//fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
</head>

<body>
  5000兆円欲しい
</body>

.gitlab-ci.yml

gitlab-ci.yml
image: python:alpine

stg_deploy:
  script:
  - pip install awscli
  - aws s3 sync ./ s3://$STG_S3_BUCKET_NAME/$PREFIX
    --exclude "*"
    --include "*.html" --include "*.css" --include "*.png" --include "*.js"
    --delete
    --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
    --exact-timestamps
  only:
  - master

prod_deploy:
  script:
  - pip install awscli
  - aws s3 sync ./ s3://$PROD_S3_BUCKET_NAME/$PREFIX
    --exclude "*"
    --include "*.html" --include "*.css" --include "*.png" --include "*.js"
    --delete
    --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
    --exact-timestamps
  only:
  - production

Gitlab-CI設定

.gitlab-ci.ymlで使用する環境変数を設定します。

スクリーンショット 2017-12-19 21.00.53.png

  • AWS_ACCESS_KEY
    • S3にPUTする際に必要なクレデンシャル(AWS IAMから作成することができます。)
  • AWS_DEFAULT_REGION
    • AWSで使用しているリージョン。
  • AWS_SECRET_ACESS_KEY
    • S3にPUTする際に必要なクレデンシャル(AWS_ACCESS_KEYとニコイチ。)
  • PREFIX
  • PROD_S3_BUCKET_NAME
    • 本番環境のS3バケット名
  • STG_S3_BUCKET_NAME
    • 検証環境のS3バケット名

やってみる

まずissueを立てます。

スクリーンショット 2017-12-19 21.15.04.png

作成したissueからブランチを作ります。Create a branchボタンを押下。

スクリーンショット 2017-12-19 21.17.38.png

ブランチできました。Create merge requestボタンを押下。

スクリーンショット 2017-12-19 21.17.59.png

作成したブランチ上でindex.htmlの修正を行います。下記でEditを押下。

スクリーンショット 2017-12-19 21.18.14.png

修正後コミットメッセージを書いてコミットします。

スクリーンショット 2017-12-19 21.19.21.png

マージリクエストを作成。

スクリーンショット 2017-12-19 21.25.43.png

するとだいたい入力されているので、
* Assignee(レビューをお願いする人)を選択
* Source branch(1-ブランチ)の確認
* Target branch(masterブランチ)の確認
Remove source branch when merge request is accepted.(マージ後に1-ブランチを削除してくれる)のチェックを行なう。

スクリーンショット 2017-12-19 21.27.26.png

スクリーンショット 2017-12-19 21.27.49.png

コメントして問題なければマージします。

スクリーンショット 2017-12-19 21.35.14.png

(マージ後)
スクリーンショット 2017-12-19 21.41.52.png

Pipelineを確認します。良さそうです。

スクリーンショット 2017-12-19 21.42.14.png

検証環境のS3バケットにPUTできたのでブラウザで動作確認をします。良さそうです。

スクリーンショット 2017-12-19 21.44.11.png

続いて、productionブランチにマージリクエストを出します。

スクリーンショット 2017-12-19 21.47.51.png

(マージ後)
スクリーンショット 2017-12-19 21.48.57.png

Pipelineを確認します。良さそうです。

スクリーンショット 2017-12-19 21.49.31.png

本番環境のS3バケットにPUTできたのでブラウザで動作確認をします。良さそうです。

スクリーンショット 2017-12-19 21.44.11.png

まとめ

これでエンジニアが楽できる誰でも文言変更対応ができる環境が整いました。

参考文献