GridsomeをCodePipeLine + CodeBuild でDeployするServerlessなBlog

この記事はServerless Advent Calendar 2018の20日目の記事になります

昨日は@sirukoさんのAWS AppSync をシンプルなJavaScriptで試してみるでした

やっぱりGraphQLは標準になってきそうな勢いですね
私の記事でも多少触れます

本日の内容はこのBlogを作った話です

2018/12/25 追記

その後、同じ静的ジェネレーターのGatsbyに切り替えてみました
理由はやってみたかったからです
使用感に応じて、Gridsomeとどちらにするか選択しようと思います

弊社Fusicでは技術Blogを運用しているのですが、
いわゆるJAMStackなサイトにしたいねと話しています

Frontend Conference Fukuoka 2018で個人的にハマったセッションだった
@mottox2さんのCMSとFrontnedを聞いた後だったので
やるしか無いなと思ってましたが私自身に知見がなく、
〇〇駆動開発で手をつけなきゃなと考えているところでした

運用中サイトの構成変更は調整事項もあり(弊社はエイヤ！でやりそうですが)
個人の裁量で好き放題する為にも(弊社は個人の裁量でエイヤ！出来ますが)
はてなブログに頼りきりなのをやめ、ブログサイト運用してみることにしました

というわけで Advent Calendar 駆動開発で、もちろんServerlessに行います

S3 + CloudFrontにGithubからよしなにDeployする方法について書いていきます

アーキテクチャ

Static HTML Generator
- Gridsome
HTML配信
- S3 + CloudFront
Deploy
- Github + CodePipeLine + CodeBuild

Architecture

Gridsome

GridsomeはVue製の静的HTMLジェネレーターです

動的な要素を静的なHTMLによしなに落とし込んでくれるVueのツールです

公式のリンクを参考にしてインストールを進めます

$ yarn global add @gridsome/cli
$ gridsome create blog.seike460.com
❯ Clone https://github.com/gridsome/gridsome-starter-default.git 1.77s
❯ Update project package.json 0.01s
❯ Install dependencies 147.36s

  - Enter directory cd blog.seike460.com
  - Run gridsome develop to start local development
  - Run gridsome build to build for production

$ cd blog.seike460.com
$ gridsome develop
  Site running at:          http://localhost:8080/
  Explore GraphQL data at:  http://localhost:8080/___explore

localhostで動いてる感を出して来るので確認します

HelloGridsome

簡単過ぎませんかね…
こういうインストールや利用が簡単な為の仕組みって重要だとしみじみ感じました

僕はMarkdownにてブログ記事が書ける様にしたのですが、
以下記事を参考にするといい感じに出来ました

本筋ではないので僕の方では割愛します

Gridsomeに少しだけ触れると Vue + GraphQLを使えるので柔軟にサイト構築ができそうです

正月はブログサイトへの機能追加 + はてなブログの記事移行をしたいなぁと考えています

S3

まずはS3 + CloudFrontにて配信する設定を行いますが、
S3に関してはやったことある方が多いと思いますので
公式ドキュメントを貼り付けて終わりにします

ウェブサイトホスティング用のバケットの設定

CloudFront

次はCloudFrontの設定を進めます

私がCloudFrontを利用しているのはSSL化の為ですので、不必要な方は読み飛ばして構いません

CloudFront Distributionsの画面でdelivery methodをWebにして進めます

CloudFront1

CloudFront2

Origin Settings

OriginにはS3Bucketを指定します

Origin Domain Name
- S3で設定した公開バケットのStatic website hosting エンドポイントを指定します
  例) hoge-fuga.s3-website-ap-northeast-1.amazonaws.com
Origin Path
- Bucket直下にindex.htmlを配置するため空にします
Origin ID
- Origin Domain Nameを入力すると自動入力されます
Restrict Bucket Access
- S3へのアクセスをCloudFrontに制限する設定です
  そんなにアクセス来るとは思えないし、単純化の為Noを選択します

CloudFront3

Default Cache Behavior Settings

Cacheの設定で細かい説明は省きます
私は基本デフォルトにしてますが変更点と気になりそうな箇所をピックアップして

Viewer Protocol Policy
- Redirect HTTP to HTTPS
Allowed HTTP Methods
- 最終的に静的なHTMLに対するリクエストなのでGET, HEADにしています

CloudFront4

Distribution Settings

基本デフォルトですが、Domainの設定とSSL証明書は独自のものにします

Alternate Domain Names
- blog.seike460.com
SSL Certificate
- Custom SSL Certificate (example.com):
  - SSL証明書はACMにて証明書をリクエスト後、
    DNSに支持されたTXTレコードを設定すれば発行できます

CloudFront5

後は適切にDNSを設定すればサイトが閲覧出来ます

buildspec.ymlをGithubに配置

まずは下準備の為に buildspec.ymlをGithubに配置します
デフォルトイメージである Ubuntuにyarnを入れるための設定を書いています
（毎回インストールが走ると思うとモヤモヤしますが…

流れとしては

yarn自体のインストール
- Ubuntuにyarnをいれます
yarn install
- Gridsomeのインストールを行います
yarn run build
- Gridsomeのbuildを行います
aws s3 sync
- GridsomeのファイルをS3にSyncします
aws cloudfront create-invalidation
- cloudfrontのキャッシュをクリアします

version: 0.2
phases:
  install:
    commands:
      - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
      - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
      - sudo apt-get update && sudo apt-get install yarn
      - yarn install
  build:
    commands:
      - yarn run build
    finally:
      - aws s3 sync --exact-timestamps --delete dist s3://blog.seike460.com
  post_build:
    commands:
      - aws cloudfront create-invalidation --distribution-id E3LSKZQ8F7X40H --paths '/*'