date: 2018/12/20
tags: serverless
この記事はServerless Advent Calendar 2018の20日目の記事になります
昨日は@sirukoさんのAWS AppSync をシンプルなJavaScriptで試してみるでした
やっぱりGraphQLは標準になってきそうな勢いですね
私の記事でも多少触れます
本日の内容はこのBlogを作った話です
その後、同じ静的ジェネレーターのGatsbyに切り替えてみました
理由はやってみたかったからです
使用感に応じて、Gridsomeとどちらにするか選択しようと思います
弊社Fusicでは技術Blogを運用しているのですが、
いわゆるJAMStackなサイトにしたいねと話しています
Frontend Conference Fukuoka 2018で個人的にハマったセッションだった
@mottox2さんのCMSとFrontnedを聞いた後だったので
やるしか無いなと思ってましたが私自身に知見がなく、
〇〇駆動開発で手をつけなきゃなと考えているところでした
運用中サイトの構成変更は調整事項もあり(弊社はエイヤ!でやりそうですが)
個人の裁量で好き放題する為にも(弊社は個人の裁量でエイヤ!出来ますが)
はてなブログに頼りきりなのをやめ、ブログサイト運用してみることにしました
というわけで Advent Calendar 駆動開発で、もちろんServerlessに行います
S3 + CloudFrontにGithubからよしなにDeployする方法について書いていきます
Static HTML Generator
HTML配信
Deploy
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で動いてる感を出して来るので確認します
簡単過ぎませんかね…
こういうインストールや利用が簡単な為の仕組みって重要だとしみじみ感じました
僕はMarkdownにてブログ記事が書ける様にしたのですが、
以下記事を参考にするといい感じに出来ました
本筋ではないので僕の方では割愛します
Gridsomeに少しだけ触れると Vue + GraphQLを使えるので柔軟にサイト構築ができそうです
正月はブログサイトへの機能追加 + はてなブログの記事移行をしたいなぁと考えています
まずはS3 + CloudFrontにて配信する設定を行いますが、
S3に関してはやったことある方が多いと思いますので
公式ドキュメントを貼り付けて終わりにします
次はCloudFrontの設定を進めます
私がCloudFrontを利用しているのはSSL化の為ですので、不必要な方は読み飛ばして構いません
CloudFront Distributionsの画面でdelivery methodをWebにして進めます
OriginにはS3Bucketを指定します
Origin Domain Name
Origin Path
Origin ID
Restrict Bucket Access
Cacheの設定で細かい説明は省きます
私は基本デフォルトにしてますが変更点と気になりそうな箇所をピックアップして
Viewer Protocol Policy
Allowed HTTP Methods
GET, HEAD
にしています基本デフォルトですが、Domainの設定とSSL証明書は独自のものにします
Alternate Domain Names
SSL Certificate
Custom SSL Certificate (example.com):
後は適切にDNSを設定すればサイトが閲覧出来ます
まずは下準備の為に buildspec.ymlをGithubに配置します
デフォルトイメージである Ubuntuにyarnを入れるための設定を書いています
(毎回インストールが走ると思うとモヤモヤしますが…
流れとしては
yarn自体のインストール
yarn install
yarn run build
aws s3 sync
aws cloudfront create-invalidation
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 + CodeBuildの設定に移ります
目標はGithubのMasterにマージされたらええ感じにDeploy事です
まずは CodePipeLineにてWorkflow構築を行います
アーティファクトストア
続いてCodeBuildの設定を行います
新しいサービスロールを作成
※このサービスロールには以下権限が必要です
設定後、CodePipeLineに進みます
実際にGithubのMasterにMergeします
すると Github -> CodePipeLine -> CodeBuild と連携されビルドが行われます
最終的に完了です
これでひたすらMarkdownを書いてcommitするだけでええ感じにServerlessな配信が出来ます
MasterにMergeされたタイミングでのBuildなのでPRベースでレビューも行えますね
僕はおひとりさまですので、寂しくツラツラとブログを書きます
だいぶ見にくいですね。。。
ちょっと頑張って見やすくします。。。
JAMStackの入り口として、まずはGridsomeで作成したサイトをよしなにデプロイ出来るようにしました
ドッグフーディングしながら機能追加していこうと思います
明日は@keilleraさんの「何か書きます」です!
ALIS さんといえばブロックチェーンのイメージが強いですが、どんな記事が上がるか楽しみですね!
Written by @seike460 Tech Slides: slide.seike460.com Tags: List