Vercelを使ってみた
Vercelというサービスが便利そうだったから試しに使ってみた。 読み方は「バーセル」らしい。
何が便利かって、GitHubにある記事をHTMLに変換した上で公開（ホスティング）してくれる！ SSR (Server Side Generation) + ホスティングが自動で済む。 GitHubと連携しておけばPushなどをトリガーに動作してくれるので、GitHubに記事を置く仕組みさえ用意してしまえば記事として公開できる。
しかも、カスタムドメインまで無料。 CNAMEの設定をするだけ。
サービス構成がどんな感じに変わったかというと…。
- Circle CI → GitHub Actions
- Firebase → Vercel
- エディタ → Contentful
試した構成
Contentfulのエディタで記事を書き、GitHub Actionsで記事を生成 (Markdown) し、VercelでHTMLに変換して公開するという流れ。
Contentful
Contentfulはデータタイプを自由に決められるので、Hugoで必要になる項目を用意した。
- 日付
- タイトル
- URL
- 本文
- アイキャッチ画像URL
- カテゴリ
- タグ
これで記事を書く要素は揃ったので、執筆後にGitHubに通知をするための設定をする。
設定はメニューの Settings → Webhooks から行う。
Webhooks
| 項目 | 設定値 |
|---|---|
| Name | 適当に命名する。 |
| URL | POST https://api.github.com/repos/${GITHUB_ID}/${REPOSITORY_NAME}/dispatches |
| Triggers | Select specific triggering events を選択し、適当に設定。 |
| Filters | 必要に応じて。今回は master だけにした。 |
| Headers | 後述。 |
| Content type | application/json |
| Payload | Customize the webhook payload |
Headers
| 名称 | 値 |
|---|---|
| Accept | |
| Authorization | token XXXXXX... |
| User-Agent | ${GITHUB_ID} |
token は GitHub で Personal Access Token を設定しておく。
権限は repo だけあればよい。
https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token
Payload
{
"event_type": "update contentful"
}
event_type の値はなんでもよい。
${GITHUB_ID} と ${REPOSITORY_NAME} はうまいこと置換してくれるわけではないので、自分で置き換える必要がある。
GitHub
GitHubに Hugo の基本構成を用意しておく。
Hugoの content ディレクトリにMarkdownを置いてHugoを実行するわけだけど、Markdownをどのように生成するか？
今回はContentful APIを叩いて、Markdownファイルを生成するように少し実装した。
GitHub Actionsで次の内容を実行している。
- Hugoの基本構成をチェックアウト (git clone)
- Markdown生成ツールをチェックアウト (git clone)
- ツールを実行してMarkdown生成 (git add)
- 記事をコミット (git push)
途中で git add しているので、記事に変更がないとここでエラーが発生する…が気にしない。
Vercel
VercelとGitHubを連携しておくことで、GitHubの git commit （前項4番） をトリガーにVercelが動作する。
余談
自分のマシンのエディタで記事を書き、 git push して、 Pull Request でマージして、あとはCIで Firebase に記事公開…という流れもよかったけど、もう少し楽をしたいので試してみた。
Headless CMSの感触を得るためにも。
GitHubにHugoの構成のままおいてあるので、いつでもこの構成をやめられるというのも気楽。