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

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

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

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


構成
---
![スクリーンショット 2017-12-19 20.30.24_censored.jpg](https://qiita-image-store.s3.amazonaws.com/0/27525/b4c1fd3c-1959-0c31-0e91-729033c33bef.jpeg)


静的コンテンツ
---
<img width="1440" alt="スクリーンショット 2017-12-19 20.45.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/1872f636-2c7b-40de-8d09-b041e5a3072b.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`で使用する環境変数を設定します。

<img width="1436" alt="スクリーンショット 2017-12-19 21.00.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/668457e4-dc04-85a9-767f-ee17b65becf7.png">

 * `AWS_ACCESS_KEY`
     * S3にPUTする際に必要なクレデンシャル(`AWS IAM`から作成することができます。)
 * `AWS_DEFAULT_REGION`
     * AWSで使用しているリージョン。
 * `AWS_SECRET_ACESS_KEY`
     * S3にPUTする際に必要なクレデンシャル(AWS_ACCESS_KEYとニコイチ。)
 * `PREFIX`
     * バケット以下のパス
     * https://s3-ap-northeast-1.amazonaws.com/[bucket_name]/[prefix]/index.html
 * `PROD_S3_BUCKET_NAME`
     * 本番環境のS3バケット名
 * `STG_S3_BUCKET_NAME`
     * 検証環境のS3バケット名

やってみる
---
まずissueを立てます。

<img width="1432" alt="スクリーンショット 2017-12-19 21.15.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/61046a43-000f-e2d0-6dd9-039b766f1036.png">

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

<img width="1436" alt="スクリーンショット 2017-12-19 21.17.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/2b27091c-ff8e-258d-e16d-32d087d7e0db.png">

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

<img width="934" alt="スクリーンショット 2017-12-19 21.17.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/35b91160-a401-c6cf-56b6-73e59eb2c57a.png">


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

<img width="1225" alt="スクリーンショット 2017-12-19 21.18.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/6689a602-2081-4fe8-d7a3-b46690857289.png">

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

<img width="1213" alt="スクリーンショット 2017-12-19 21.19.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/1d5acdad-2da8-6e6c-5a67-bb96e9b12790.png">

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

<img width="960" alt="スクリーンショット 2017-12-19 21.25.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/fa6654fa-1255-13fa-8a13-ecbf8b063c48.png">

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

<img width="1200" alt="スクリーンショット 2017-12-19 21.27.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/a7231683-4016-3ab7-829c-20ca865f75cd.png">

<img width="1200" alt="スクリーンショット 2017-12-19 21.27.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/3234044f-76a1-b401-4b75-6d947a9345b5.png">

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

<img width="1208" alt="スクリーンショット 2017-12-19 21.35.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/e12f38cb-de9a-82b6-f8b9-f4e2bc2f0115.png">

(マージ後)
<img width="1202" alt="スクリーンショット 2017-12-19 21.41.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/ea80a24d-08e0-536e-63e8-a26326e8ae5c.png">

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

<img width="1422" alt="スクリーンショット 2017-12-19 21.42.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/3e967944-f396-b2f6-fa6c-69da6b44c910.png">

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

<img width="1433" alt="スクリーンショット 2017-12-19 21.44.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/fb312974-c8c2-a646-19ba-7fec6e1aa8e4.png">

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

<img width="1211" alt="スクリーンショット 2017-12-19 21.47.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/f800f30b-c34e-8ee9-c300-f508ad6504d4.png">

(マージ後)
<img width="1208" alt="スクリーンショット 2017-12-19 21.48.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/d0434a00-554a-9509-453c-e905c38949ca.png">

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

<img width="1420" alt="スクリーンショット 2017-12-19 21.49.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/4c1e6696-ef49-2ed0-63d7-ef6e23026984.png">

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

<img width="1433" alt="スクリーンショット 2017-12-19 21.44.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/27525/fb312974-c8c2-a646-19ba-7fec6e1aa8e4.png">

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

参考文献
---
 * https://about.gitlab.com/2014/09/29/gitlab-flow/
 * https://dev.classmethod.jp/server-side/ansible/refactoring_ansible_yaml_using_alias_and_anchor/