Perl 製の静的サイトジェネレータでも Netlify の Deploy Preview で動作確認がしたい

こんにちは、ブロックチェーンチームでソフトウェアエンジニアをしている id:odan3240 です。

モバファクには毎日1時間社内勉強会の制度があります。

tech.mobilefactory.jp

様々な目的の社内勉強会が開催されていますが、その中に一つ OSS への貢献が目的の勉強会があります。この貢献先の一つとして、perl-users.jp を GitHub Pages へ移管しているプロジェクトがあります。

今回はこのプロジェクトでプルリクが作られるたびにレビュー用の環境がデプロイされる仕組みを作ったので紹介します。

モチベーション

Netlify の Deploy Preview 機能はプルリクが作られるたびに、プルリクの内容のウェブサイト(以下プレビューサイト)を構築する機能のことです。この機能により、動作確認のためにローカルでサーバを立ち上げる必要がなくなり、レビューの効率化に繋がります。

perl-users-jp.github.io では mixed contents 対応の確認のために https でホスティングされた動作確認用の環境が必要になりました¹。このプレビューサイトは https でホスティングされているため、Deploy Preview 機能を使えば目的を達成できそうです。

課題

perl-users-jp.github.io の静的サイトジェネレータは Perl によって実装されています²。しかし、Netlify が CI/CD を行うマシンに事前にインストールされているソフトウェアには Perl がありません。 Perl はディストリビューションに含まれている可能性はありますが、静的サイトジェネレータは carton というパッケージマネージャによって管理されており、周辺のツールチェインは別途インストールする必要があります。

解決策

perl-users-jp.github.io へのデプロイについては既に GitHub Actions を用いた CI/CD パイプラインが構築されていました。これを流用して、GitHub Actions 上で生成された静的ファイルを Netlify のプレビューサイトにデプロイする方法があれば、上記の課題をクリアできるのではないかと考えました。

今回は GitHub Actions から Netlify にデプロイする Action が公開されていたので、これを利用しました³。

github.com

以下が GitHub Actions の設定ファイルです。

name: Build and Deploy to Netlify
on:
  pull_request:
    types: [opened, synchronize]
jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Perl
        uses: shogo82148/actions-setup-perl@v1
        with:
          perl-version: '5.30'

      - name: Build
        run: make build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.0
        with:
          publish-dir: './public'
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

make build で静的ファイルを ./public ディレクトリに生成されます。このディレクトリの内容を Netlify にデプロイしています。

動作の様子

動作確認したプルリクの様子です。

コメントにプレビューサイトの URL が投稿され、シュッと動作確認ができます。

まとめ

Netlify の Deploy Preview は https で動作確認用のサイトが作成されるので便利です。しかし Netlify は Perl に対応しておらず、Perl 製の静的サイトジェネレータを用いたサイトでは利用できないという問題がありました。そこで、GitHub Actions 上で静的ファイルを生成し、これを Netlify のプレビューサイトにデプロイすることで、この問題を解決する方法を紹介しました。