Mobile Factory Tech Blog

技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!

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

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

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

tech.mobilefactory.jp

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

github.com

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

モチベーション

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

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

課題

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

解決策

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

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

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 が投稿され、シュッと動作確認ができます。

f:id:odan3240:20200508044431p:plain

まとめ

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


  1. https://github.com/perl-users-jp/perl-users-jp.github.io/issues/24

  2. Perl に関する記事が集まっているサイトなので納得感がある

  3. 実は同時期に全く同じ Action を開発していたが完成が間に合わなかったのでクローズしこちらを利用した

社内勉強会を通じて DefinitelyTyped に新しいパッケージを追加した話

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

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

tech.mobilefactory.jp

様々な目的の社内勉強会が開催されていますが、その中に一つOSSへの貢献が目的の勉強会があります。この勉強会の紹介は別の機会として、この記事では、この勉強会を通じてDefinitelyTyped に新しいパッケージの型定義を追加したので、その紹介をします。

DefinitelyTyped とは

DefinitelyTyped とは TypeScript の型定義を集めたリポジトリです。
TypeScript を書いているときに、 npm パッケージと一緒に @types/xxx というパッケージをインストールしたことがある方もいるかも知れません。この @types から始まるパッケージを集約しているリポジトリが DefinitelyTyped です。 DefinitelyTyped には型定義のない JavaScript 製のパッケージに対する型定義 1 が大量にあります。

今回は、keccak - npm に対する型定義を追加しました。

手順

コントリビュートの手順については README の How can I contribute? に丁寧に紹介されています。今回は新しいパッケージの追加だったため、Create a new package にある手順に沿って作業をしました。

ボイラープレートの作成

README にある通り、dts-gen を用いてボイラープレートを生成しました。今回の対象のモジュールは keccak なので、以下のコマンドを実行しました。

$ npx dts-gen --dt --name keccak --template module

このコマンドにより、index.d.ts, keccak-test.ts, tsconfig.json, tslint.json の4つのファイルが生成されます。
index.d.ts に型定義を、keccak-test.ts に型定義に対するテストを書くのが今回のゴールです。

テスト

.d.ts ファイルの lint やテストには dtslint が使用されます。

テストでは以下のように、コメントで期待される型を書く形式になっています。

const keccak = create('keccak224'); // $ExpectType Keccak

実際のプルリク

実際に出したプルリクはこれです。

feat: add types of keccak by odanado · Pull Request #44016 · DefinitelyTyped/DefinitelyTyped

typescript-bot という bot が住んでいます。この bot はレビューが遅れていると、「もう少し待ってね」というコメントを付けるようです。個人的に放置されている感じが少なくて良いと思いました。

感想

keccak はブロックチェーンの Ethereum で使用されているハッシュ関数です。Ethereum に関するコードを書く時によく使用していましたが、型定義が存在しないのがいつも気になっていました。そんな中、 OSS への貢献を目的とした社内勉強会が開催されると聞いて良い機会と感じて keccak の型定義を追加するプルリクを作成しました。

DefinitelyTyped には世界中のエンジニアが協力して型定義のない npm パッケージに型定義を追加しています。仕事でも趣味でも TypeScript を書いている人間としては DefinitelyTyped には普段からお世話になっています。今回は、これに自分も協力できたという実感があり、感慨深いです。


  1. 元の npm パッケージに型定義が含まれている場合もある