Code PipelineでJekyllをビルドしてS3+CloudFrontで静的配信する

# はじめに
## 概要
Civichat([https://civichat.jp](https://civichat.jp))をJekyllに変更し、S3+CloudFrontで配信するために調べていた時に記事が昔すぎ(2016年とか...）or英語だったのでせっかくだしCodePipelineやり方をまとめようと思った次第です

---------------------
>Civichatとは：あなたにぴったりの助成金などの公共制度がLINEでわかるサービスです。
https://civichat.jp/

-----------------------

## Jekyllってなに？
>Jekyllは、個人、プロジェクト、または組織のサイト向けの、シンプルなブログ対応の静的サイトジェネレーターです。 GitHubの共同創設者であるTom Preston-WernerによってRubyで書かれ、オープンソースのMITライセンスで配布されています。 (by [Wikipedia](https://en.wikipedia.org/wiki/Jekyll_(software)))

要するにRubyでできた静的サイト生成ツールですね（Markdownで記事が書ける）
最近だと[@Nuxt/Content](https://content.nuxtjs.org) とか [Gatsby.js](https://www.gatsbyjs.com) みたいな感じですね。

## なぜAWS? なぜCode Pipeline? なぜCode Build?
多分 Netlify とか Vercel とかでもできるはず....
今回はAWSに請求まとめたりしたいのと、AWSを使いたかったのでAWSです。

# 手順
すでにGitHub上にJekyllのコード自体が存在して、ローカルで`jekyll build`で `_site`に出力されることを確認しているものとして書きます

## S3のバケットを用意する
普通にバケットを作りますが、パブリックアクセスのブロックは外しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/d051855e-b464-36c6-bc20-a0fe0ca22c95.png)

## Code Pipelineでパイプラインを作る

### パイプラインの設定
ここではパイプライン名を設定します
（このパイプライン名は変えられなくなるので注意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/461bc23b-5abf-ef97-85da-3e3252e98eb8.png)

### GitHubとの接続
今回はGithubのコミットをトリガーにするのでソースプロバイダーに `GitHub(バージョン2)`を選択します。
GitHubに接続するをクリックし接続名を入力し、GitHubに`AWS Connector`をインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/c40af2aa-1960-3860-f710-d4ee1794b27e.png)

その後、インストールしたGitHubからリポジトリが取得できるようになるので、リポジトリ名とブランチ名を設定します。
（ねんのため塗りつぶしています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/ee266911-b3a1-f1c5-9310-6f4831171ea2.png)

### CodeBuildの設定
プロバイダにAWS CodeBuildを指定するとプロジェクトを作成するというボタンが出るのでクリック
するとCodeBuildの設定ページが表示されるので、以下のように設定します。
#### プロジェクトの設定
プロジェクト名は適当に...

#### 環境
せっかくなのでAmazon Linux 2を使いましょう
特権付与のチェックは今回は必要ないので外しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/1c234e54-4b14-c448-0e84-7ac2e768257b.png)

#### Buildspec
もしBuildspec.ymlをルートディレクトリに置けない場合にはその場所を指定してあげてください

#### バッチ設定・ログ設定
基本的にはそのままでよいはず

すべて設定が終わったらCodePipelineに戻るをクリックして戻ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/f2f0fb21-4a87-6f2c-cde1-9275a703c6ef.png)

戻るとAWSが自動的にプロジェクト名を入れてくれています（素敵！！）

### デプロイの設定
デプロイプロバイダにAmazon S3を選択するとバケットの選択ができるようになるので、初めに作成したバケットを選択します。
また、この時 `デプロイする前にファイルを抽出する` にチェックをつけ忘れるとS3にビルドされたファイルがZipで出てしまうのでつけ忘れないようにしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/039b1693-16ff-ba4c-53dc-13f9f86ce475.png)

### 作成前の確認
いろいろまずそうなのは塗りつぶしてますが....
大事なのは`FullRepositoryId`が正しいこと・`Extract`が`True`であることなのでそれを確認しましょう
確認したらパイプラインを作成するをクリックしてパイプラインを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/d95df051-95e5-c583-114c-cd3f0e9516e2.png)

## buildspec.ymlを作成する
今のままだとなんの処理をすればいいかをCodeBuildに伝えていないので、接続したリポジトリのルートディレクトリにbuildspec.ymlというのを作成し、以下の内容を記述します

```buildspec.yml
version: 0.2

phases:
  pre_build:
    commands:
      - export LC_ALL="en_US.utf8"
      - bundle install
  build:
    commands:
      - bundle exec jekyll build

artifacts:
  base-directory: '_site'
  files:
    - '**/*'
```

普通に`bundle install`して`jekyll build`しているだけですが、
`export LC_ALL="en_US.utf8`でUTF-8に固定してあげないとjekyllがエラーを吐いてしまうのでお気をつけください。

これらをCommit & Pushすると自動でPipelineが走って

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/0a5a4058-36a2-1d76-a82b-b9376a231552.png)

このようになれば成功です！

## 成果物を確認する
最初に確認したバケットを見ると以下のようにいろいろとファイルがあるはずです！
これでCDについては完成です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/545b5329-7028-e524-9ba6-27e6c9c64848.png)

## CloudFront + S3の設定
Create Distributionをクリックし、WebのGet Startedを選択します
#### Origin Settings
- Origin Domain Name : 最初に作成したS3のを選択
- Restrict Bucket Access : Yes
- Origin Access Identity : Create a New Identity
- Grant Read Permissions on Bucket : Yes, Update Bucket Policy
↑でS3バケットへのアクセス設定を変更しています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/b252ea5c-a99a-927b-f0a8-6d7a54f07ad9.png)

#### Default Cache Behavior Settings
お好みで （私はいつも`Viewer Protocol Policy`を`Redirect HTTP to HTTPS`にしています）

#### Distribution Settings
- Price Class : お好み（Use U.S., Canada, Europe, Asia, Middle East and Africaで十分な気が）
- Alternate Domain Names(CNAMEs) : 必要なら
- SSL Certificate : 必要なら
- Default Root Object : index.html
- Standard Logging : 必要なら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275457/a7990325-c07a-69cc-d877-93cdc7286d2c.png)

設定後 Create Distribution をクリックして完了
Statusが`In Progress` から `Deployed`になったらDomain Nameに書いてある xxxxxxxxxxxxxxxx.cloudfront.netにアクセスしてみて、接続できれば全設定完了です。

# お疲れさまでした:clap:
この方法でbuildspec.ymlを変えてあげればNuxtだったり、Gatsbyでもできますが、その話はまた今度...機会があれば...ということで。

皆さんもぜひやってみてください！！
ではではー