blog.seike460.com

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

date: 2018/12/20

tags: serverless 

この記事は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のキャッシュをクリアします

buildspec.yml
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 '/*'

CodePipeLine

続いて CodePipeLine + CodeBuildの設定に移ります

目標はGithubのMasterにマージされたらええ感じにDeploy事です

まずは CodePipeLineにてWorkflow構築を行います

パイプラインの作成

CodePipeLine1

  • パイプライン名とIAMロールを設定
  • アーティファクトストア

CodePipeLine2

  • ソースプロバイダをGithubに選択してOAuth認証
  • リポジトリとブランチを設定
  • 変更検出オプションはGithubウェブフックにします

CodePipeLine3

  • ビルドプロバイダに CodeBuildを設定するとプロジェクト名選択
  • 新しく作成する場合はCreate projectを選択

CodePipeLine4

CodeBuild

続いてCodeBuildの設定を行います

CodeBuild1

  • マネージド型イメージを利用
  • OSはUbuntu
  • ランタイムはNode.js
  • バージョンは最新を選択
  • 新しいサービスロールを作成

    • ※このサービスロールには以下権限が必要です

      • 公開バケットへのGET
      • 公開バケットへのPUT
      • CloudFrontキャッシュのクリア

CodeBuild2

  • buildspec.ymlを配置しているので、デフォルトのものを利用

CodeBuild3

設定後、CodePipeLineに進みます

再びCodePipeLine

  • 作成されたプロジェクトを選択します

CodePipeLine5

  • ビルドステージでデプロイしてしまっているのと、
    アプリケーションをデプロイする訳ではないのでスキップします

CodePipeLine6

動作確認

実際にGithubのMasterにMergeします

GithubMerge

すると Github -> CodePipeLine -> CodeBuild と連携されビルドが行われます

building

最終的に完了です

complete

これでひたすらMarkdownを書いてcommitするだけでええ感じにServerlessな配信が出来ます

MasterにMergeされたタイミングでのBuildなのでPRベースでレビューも行えますね

僕はおひとりさまですので、寂しくツラツラとブログを書きます

サイトデザインについて

だいぶ見にくいですね。。。
ちょっと頑張って見やすくします。。。

まとめ

JAMStackの入り口として、まずはGridsomeで作成したサイトをよしなにデプロイ出来るようにしました
ドッグフーディングしながら機能追加していこうと思います

明日は@keilleraさんの「何か書きます」です!
ALIS さんといえばブロックチェーンのイメージが強いですが、どんな記事が上がるか楽しみですね!


@seike460

Written by @seike460 Tech Slides: slide.seike460.com Tags: List