本記事はCocone Advent Calendar 2022の22日目の記事になります。

はじめに

今回は全リヴリー大図鑑で導入した、静的サイトのOPG画像生成をNode.js、GitLab CI/CDで自動化した話をしたいと思います。

全リヴリー大図鑑はリヴリーアイランドの20周年記念のWEBコンテンツになります。2002年リリースから現在までに登場した全てのリヴリーを紹介しています。

サイトはAmazon S3 を使用した静的ウェブサイトになります。ビルド時にリヴリーデータを取得し、各リヴリーの詳細ページを生成後S3にデプロイしています。

そして、詳細ページは319ページあり（2022年12月現在）、OGP画像も詳細ページ数と同様に、319枚用意しています。

開発前に決めたこと

OGP画像生成ツールの開発にあたり、事前に決めたことは次の4点になります。

詳細ページは静的ページとしてAmazon S3に格納するため、AWS Lambdaの動的生成は利用しない。
Node.jsを利用し、リヴリーデータの取得から、OGP画像の生成までを行う（あわせて減色も行う）。
ヘッドレスブラウザのPuppeteerを利用し、テンプレートHTMLにデータをはめ込んだページをキャプチャ・OGP画像として保存する。
GitLab CI/CDを利用し、OGP画像の生成からAmazon S3へのデプロイを、一気通貫で実行できるようにする。

実際のコードとポイント

実際のコードから、主要となるコードとポイントをまとめてみました。

OGP画像の画像生成

Puppeteerを利用し、OGP画像の生成を行うコードになります。

generate.ts

puppeteer
.launch({
    ignoreDefaultArgs: ["--disable-extensions"],
    args: ["--no-sandbox", "--disable-setuid-sandbox"]
})
.then(async (browser) => {
    await Promise.all(
        items.map(async (item) => {
            return await browser.newPage().then(async (page) => {
                // リヴリー情報の取得
                const { name, scientific, imageUrl, imageName } = item;

                // リヴリー画像データの取得・Base64に変更
                const livlyImage = await fetchImage(imageUrl);
                const { headers, data } = livlyImage;
                const livlyImageBase64 = convertImageToBase64(
                    headers["content-type"],
                    data
                );

                // キャプチャサイズの設定
                await page.setViewport({ width: 1200, height: 630 });

                // 取得したリヴリー情報をはめ込んだHTMLコードの取得
                const html: string = templateHTML(
                    name,
                    scientific,
                    livlyImageBase64,
                    backgroundImageBase64
                );

                // HTMLをページに設定
                await page.setContent(html);

                // キャプチャ・保存
                const output = `${dist}/${imageName}`;
                await page.screenshot({ path: output });
            });
        })
    );

    // ブラウザを閉じる
    await browser.close();
});

OGP画像の画像生成コードについて

画像データはBase64に変換する必要があります。

Puppeteerは、次のメソッドを利用しました。

メソッド	機能
puppeteer.launch()	puppeteerを起動
browser.newPage()	新規ページを開く
page.setViewport()	ページのキャプチャサイズの設定（OPG画像の縦横幅になります）
page.setContent()	ページのHTMLを設定
page.screenshot()	スクリーンショットの撮影と保存（`{ path: test.png}` と指定すると、test.pngで保存）
browser.close()	ブラウザを閉じる

CI/CDワークフロー

GitLab CI/CDパイプラインの設定コードになります。

.gitlab-ci.yml

stages:
    - build
    - deploy

default:
    image: buildkite/puppeteer #Puppeteerイメージを指定
    cache:
        key:
            files:
                - package-lock.json
                - package.json
        paths:
            - .npm/
    before_script:
        - echo "checking node version"
        - node -v
        - apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 4EB27DB2A3B88B8B
        - apt-get update -yqq
        - apt-get install -yqq fonts-noto-cjk --no-install-recommends #日本語フォントのインストール
        - npm config set "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}"
        - npm ci --cache .npm/ --prefer-offline --no-audit
    interruptible: true

.build:
    stage: build
    script: API_BASE_URL=$API_BASE_URL npm run build #OPG画像生成プログラムの実行
    artifacts:
        paths:
            - ogp/
        expire_in: 1 day

build_staging:
    extends: .build
    rules:
        - if: $CI_COMMIT_BRANCH == "develop"
        - if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "master"
        - if: $CI_PIPELINE_SOURCE == "push" && $CI_COMMIT_BRANCH == "master"
    variables:
        API_BASE_URL: "(省略)"

build_prod:
    extends: .build
    rules:
        - if: $CI_PIPELINE_SOURCE == "web" && $CI_COMMIT_BRANCH == "master"
    variables:
        API_BASE_URL: "(省略)"

.deploy:
    stage: deploy
    image: registry.gitlab.com/gitlab-org/cloud-deploy/aws-base:latest
    variables:
        GIT_STRATEGY: none
    cache: {}
    before_script: []
    script: aws s3 sync "${DIST_DIR}" "${S3_URI}" --delete --acl bucket-owner-full-control
    interruptible: false

deploy_staging:
    extends: .deploy
    needs: [build_staging]
    rules:
        - if: $CI_COMMIT_BRANCH == "develop"
    variables:
        DIST_DIR: "./(OGP画像の格納ディレクトリ)"
        S3_URI: "(省略)"
    environment:
        name: staging
        url:  "(省略)"

deploy_prod:
    extends: .deploy
    needs: [build_prod]
    rules:
        - if: $CI_PIPELINE_SOURCE == "web" && $CI_COMMIT_BRANCH == "master"
    variables:
        DIST_DIR: "./(OGP画像の格納ディレクトリ)"
        S3_URI: "(省略)"
    environment:
        name: prod
        url: "https://www.livly.com/picturebook/"

CI/CDワークフローの設定コードについて

Dockerのイメージはbuildkite/puppeteerを利用しました。
OGP画像で日本語を動的に表示する場合、日本語フォントのインストールが必要です。

おわりに

プロジェクトのキックオフMTG時の話では、クオリティを配慮し、デザイン担当者が１枚１枚作成する予定でした。1枚30分で300枚作成した場合でも、大変な制作工数が想定できました。
OPG画像生成を自動化したことで、デザイン担当者の工数の大幅な削減が実現できました。

現在、運用フェーズですが、サイト更新時にパイプラインから Run pipeline を実行するだけで作業が終わるのも、大きなメリットです。

静的ウェブサイトでOGP画像生成を検討している場合、参考いただければ嬉しいです。