Vercelを使ってみた

thumbnail for this post

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に通知をするための設定をする。 設定はメニューの SettingsWebhooks から行う。

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で次の内容を実行している。

  1. Hugoの基本構成をチェックアウト (git clone)
  2. Markdown生成ツールをチェックアウト (git clone)
  3. ツールを実行してMarkdown生成 (git add)
  4. 記事をコミット (git push)

途中で git add しているので、記事に変更がないとここでエラーが発生する…が気にしない。

Vercel

VercelとGitHubを連携しておくことで、GitHubの git commit (前項4番) をトリガーにVercelが動作する。

余談

自分のマシンのエディタで記事を書き、 git push して、 Pull Request でマージして、あとはCIで Firebase に記事公開…という流れもよかったけど、もう少し楽をしたいので試してみた。 Headless CMSの感触を得るためにも。

GitHubにHugoの構成のままおいてあるので、いつでもこの構成をやめられるというのも気楽。

comments powered by Disqus