Netlifyで展開しているHugoのサイトでブログカードを利用できるようにする。

バイバイ、WordPress。ハロー Hugo

Netlify Functionsでブログカードを埋め込むHugoのshortcodeを実装しました - A1 Blog

ページが見つかりませんでした

                </div>
            </div>
        </div>
        <div class="embed-footer">
            <a href="https://wada.page" target="_blank">
                <img src="https://www.google.com/s2/favicons?domain=wada.page" alt="" title="ページが見つかりませんでした" class="favicon">
                https://wada.page
            </a>
        </div>
    </div>
</div>

実装

Netlify Functionsのセットアップ

NPMはNodeJS14系を利用することにした。

Netlifyの設定画面でも設定することは可能だが、できるだけ設定はソース管理したい。

そこでリポジトリルートに、.nvmrcファイルを作成してNetlifyに対してNodeのバージョンを指定する。

.nvmrcファイル

1

v14.17.4

このように設定することで、Netlifyが利用するNode JSを14.17.4に固定化できる。

Netlify Functionsを作成する

src/functions/にFunctionsのソースファイルを置き、 functions/ にビルドしたFunctionsファイルを置く設定にする。

1
2
3

mkdir -p src/functions functions
#名前はhoge.jsとしていますが、任意のもので構わない。
touch src/functions/hoge.js

ルートディレクトリにあるnetlify.tomlを編集する。

また、functionsのディレクトリ指定と、hugoコマンドの実行前netlify functionsのビルドを設定する。

1
2
3
4

[build]
publish = "public"
command = "npm run build && hugo --gc --minify --enableGitInfo"
functions = "functions"

ローカル環境のHUGO環境でNetlify Functionsをデバッグできるようにする

自分のローカル環境はDockerで構築しているため、netlify-lambdaや、今回のAPIで利用するためのnpmライブラリをインストールするようにする

1
2
3

FROM peaceiris/hugo:v0.87.0-full

RUN npm install --save-dev netlify-lambda open-graph-scraper

また、package.jsonにscriptsの記述を設定する

1
2
3
4

  "scripts": {
    "build": "netlify-lambda build src/functions/",
    "serve": "netlify-lambda serve src/functions/"
  }

npm run buildを実行すると、src/functions/ 内のファイルをビルドしてfunctions/hoge.jsが作成される。

npm run serveを実行すると、HUGOサーバとFunctions双方のローカルサーバが立ち上がる。

• Webサーバ: http://localhost:8888
• Functions: http://localhost:9000/functions/<Function名>

流れ通りにすると、Function名は hogeとなる。

Functionsを実装する

src/functions/hoge.js を以下のように実装する。

特にここの部分がポイントとなっているが、例えばKickstarterなどは、一定の範囲のUserAgent以外は403エラーが戻ってくる。おそらくはBot対策だろう。

AWS起点でアクセスしているということや、NPMライブラリ、open-graph-scraperでアクセスしていること、さらには、timeout設定をつけないことには不必要にダンマリとなってしまうことが想定される。

URLによってはリンク先が消失していることも考えられるため、200レスポンス以外の想定も入れたい考えているが、今のところ200か403、404以外のレスポンスを確認できていない。

他にもopen-graph-scraperのオプションパラメータがあると思うので、今後も必要に応じてアップデートしたいと思う。

ショートコードの作成を行う

Functionのエンドポイントを設定する。

HUGOは環境に応じて設定ファイルの読み替えをすることが可能なので以下のように設定する

1
2
3
4
5

config
├── _default
│   └── config.toml  ------- 基本設定
└── development
    └── config.toml  ------- ローカル環境専用設定

基本的な設定は_default/config.tomlに記載し、ローカル専用の設定はdevelopment/config.tomlの内容で上書きを行う

例えばそれぞれ以下のようにすると、Netlifyが利用する設定は、

1
2

[params]
  OgpApiEndpoint = "https://<netlifyのhost名>/.netlify/functions/hoge?url="

としておき、ローカルの環境は

1
2

[params]
  OgpApiEndpoint = "http://localhost:9000/.netlify/functions/hoge?url="

と設定しておけば良い。

次に自分のテンプレート内のshortcodesディレクトリにhtmlを増やす。ファイル名が{{}}で呼び出すショートコードの名前となる。

サイトによっては、OGPのimageメタタグがhttpのURLスキームを利用しているため、強制的にhttpsのURLスキームに変換するようにして、miedコンテンツではないようにしている。

対応するCSSは以下となった。

Netlify Functionsのデプロイを行う

Dockerを利用したローカル環境で何事もなく動作していたため、既存のWPサイトのブログカードをいくつかNetlify FunctionsにデプロイするAPIが利用できることを前提に記事の内容を修正して、初回のデプロイを試みたのが問題となった。

ローカル環境ではサイトがデプロイされているのに、Netlifyではデプロイされない。デプロイエラーになる。という現象が発生した。

原因としては、Netlifyのデプロイ中、hoge.jsのビルドが終わる前にショートコードが実行、JSONファイルの取得を試みた結果、JSON(API)のレスポンスがないために、ビルドエラーとなる、というものであった。

このことに気がつくまでに結構時間をかけてしまったので、試す際は、まずショートコードを利用しない状態でNetlifyにデプロイを行い、デプロイが成功したら、ショートコードを使う、という段階を踏んだデプロイをお勧めする。