この記事は 「アクセシビリティ Advent Calendar 2021」 2日目の記事です。
Web アクセシビリティチェックツール 「Pa11y」 は過去この Blog でも何度か紹介していて、CI ツール版の 「Pa11y CI」 などはたくさんの Web ページに対して機械的なアクセシビリティチェックをさくっと実施したい場合なんかにとても便利でよく使っています。
で、この Pa11y には Web サービスとして動作し、特定の Web ページのアクセシビリティ状況を監視するような用途で使える 「Pa11y Dashboard」 というプロダクトが用意されていますが、長いこと Pa11y を使っていながら、この Pa11y Dashboard だけは使ったことがなかったので、今回試しに使ってみようということで、やってみた記録を簡単に。
目次
- DigitalOcean で Pa11y Dashboard を立ち上げる
DigitalOcean で Pa11y Dashboard を立ち上げる
ということで、なるべく簡単に立ち上げたかったのでサーバをどうするかなと考えたときに、これも一度使ってみたいと思っていた DigitalOcean を今回は選択してみました。
DigitalOcean は 「デベロッパー向けクラウドサービス」 と銘打ってサービスを提供していますが、その名の通り、とりあえず Web アプリケーションのテスト用にサーバを立てたいみたいなときにはコントロールパネルから数クリック操作するだけで Droplet （仮想サーバ） を数秒で立ち上げられるのと、今回私が利用した 「1 GB Memory / 1 AMD vCPU / 25 GB Disk」 という最も安価な構成なら 1時間当たり 0.009 ドル、月額 6 ドル程度で利用できるので非常に手軽で便利です。
Droplet の立ち上げ
DigitalOcean のアカウントは持っている前提で話を進めますが、ダッシュボードの 「Create」 メニューから 「Droplets」 に進み、利用したい OS イメージやプランなどを選択していきます。
今回は Ubuntu 20.04 x64 を最も安いプランで立ち上げます。データセンターの場所はお好みでいいですが、試しにシンガポールを選択してみました。
「Authentication」 はサーバへの接続方法ですが、普通に SSH を使用したい場合は 「SSH Key」 を選択します。今回はブラウザベースのコンソールが使用できる 「Password」 を選択しました （セキュリティ優先なら SSH を選択しましょう）。
コンソールに接続する際のパスワードを設定したら、「Create Droplet」 を押せば、サーバが立ち上がります。
サーバが立ち上がったら、「Access」 メニューなどからコンソール （Droplet Console） が立ち上げられますのでサーバに接続しましょう。必要なソフトウェアをインストールしていきます。
Node.js のインストール
まずはお決まりのやつ。
apt update apt upgrade次に
npmをインストールします。apt install npm次に、Node.js のバージョン管理に便利なので
nをインストール。npm install -g nPa11y Dashboard は Node.js 16 以降には対応していないため、今回は Node.js 14 の最新版をインストールします。
n v14.18これで、
14.18.2（記事執筆時点） がインストールされました。node -v v14.18.2apt でインストールした状態だと古いバージョン （v6.x.x） の npm が入っていると思いますので、
npm install -g npmして、最新の npm にしておきます。
もしこの時、
Error: Cannot find module 'semver'みたいな感じでエラーが帰ってきてうまく行かない場合は、下記を実行してパスを通すと多分うまく行きます。
PATH="$PATH"MongoDB のインストール
次に MongoDB をインストールします。Pa11y Dashboard は v4.4 以前の MongoDB のみサポートします。今回は Ubuntu 20.04 の標準リポジトリから普通にインストールしてしまいますが （v3.6 系が入ります）、より新しい 4.4 系をインストールする場合は 「MongoDB 4.4 系をインストールする場合」 セクションまで飛ばしてください。
apt install mongodbこれで、 v3.6.8 がインストールされました。
mongo -version MongoDB shell version v3.6.8systemctl コマンドで MongoDB のステータスを確認。
systemctl status mongodb立ち上がっていなかったら立ち上げて、さらにブート時に起動するように設定します。
systemctl start mongodb systemctl enable mongodb一応接続テストしてみましょう。
mongo --eval 'db.runCommand({ connectionStatus: 1 })'下記のように
"ok" : 1が帰ってくれば問題なし。MongoDB server version: 3.6.8 { "authInfo" : { "authenticatedUsers" : [ ], "authenticatedUserRoles" : [ ] }, "ok" : 1 }MongoDB 4.4 系をインストールする場合
MongoDB 4.4 系を使用したい場合は、まず下記のように公開 GPG キーをインポートします。
curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -正常にインポートされると 「OK」 というレスポンスが帰ってくると思いますので、下記のコマンドを実行して apt に v4.4 系のリポジトリ情報を追加します。
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.4.listあとはインストールして、
apt update apt install mongodb-org起動すれば完了です。
systemctl start mongod.service systemctl enable mongodPa11y Dashboard のインストール
Pa11y Dashboard の公式リポジトリは下記ですので、そちらをそのまま使用する場合は、
cd /opt/ git clone https://github.com/pa11y/pa11y-dashboard.git cd pa11y-dashboard npm installとし、あとは設定ファイルを本番用に変更します。例えば公開環境用の設定ファイルを使用する場合は、
cp config/production.sample.json config/production.jsonとした上で、
vim config/production.jsonポート番号だけとりあえず変更すればよいと思いますが、実際に稼働させると Puppeteer （Headless Chrome） に
--no-sandboxがないとエラーが帰ってくるので、その指定も入れてあげます （一番最後のchromeLaunchConfig部分です）。{ "port": 80, "noindex": true, "readonly": false, "webservice": { "database": "mongodb://localhost/pa11y-webservice", "host": "0.0.0.0", "port": 3000, "cron": "0 30 0 * * *", "chromeLaunchConfig": { "args": [ "--no-sandbox" ] } } }あと、ちょっと依存関係を解消しないといけないのと、Node.js アプリの実行状態を永続化したり、ログを管理したりするための PM2 をインストールしたりします。
apt install -y libnss3 libgconf-2-4 npm install pm2 -gここまで行ったらほぼ終わり。あとは Node.js アプリを立ち上げます。
cd /opt/pa11y-dashboard/ NODE_ENV=production pm2 start index.js
上記のようにきちんと Node.js アプリが立ち上がったら、サーバの IP アドレスにブラウザでアクセスすれば、Pa11y Dashboard の初期画面が表示されるはずです。
あとは URL を登録して、
「Run Pa11y」 を実行しましょう。
リザルトページが表示されると思います。
もし正しく動作しない場合は、PM2 のログを確認しましょう。例えば 「Run Pa11y」 を実行した時に HTTP 404 が帰ってくる場合は、Headless Chrome がうまく動作していない場合が多いです。
pm2 logpm2 のログに依存関係のエラーが出ている場合などは必要なパッケージをインストールしましょう。例えば下記のように。
apt install libatk1.0-0 libatk-bridge2.0-0 libgbm1 libcups2 libxkbcommon0 libxdamage1 libgtk-3-0URL の登録が終わったら、
production.jsonの設定を変更して新規 URL の登録ができないようにしておきましょうね。cd /opt/pa11y-dashboard/ vim config/production.json具体的には
readonlyをtrueにします。{ "port": 80, "noindex": true, "readonly": true, ...略... }Node.js アプリを再起動しましょう。
pm2 restart allPa11y Dashboard にベーシック認証を追加する
Pa11y Dashboard は URL さえ知っていればダッシュボードにアクセスできちゃいますので、公開サーバで運用するには注意が必要です。基本的には必要な場合を除いて readonly モードにしておくのがよいですが、より安心にするため、今回は少し Pa11y Dashboard をカスタマイズしてベーシック認証を追加してみました。
ベーシック認証の追加にあたっては下記の記事が参考になりました。
まず必要なパッケージを追加します。
cd /opt/pa11y-dashboard/ npm install http-auth http-auth-connect次に、
config.jsを編集します。vim config.js下記の行の下に、
module.exports = { port: Number(env('PORT', '4000')), noindex: env('NOINDEX', 'true') === 'true', readonly: env('READONLY', 'false') === 'true',下記の 2 行を追加します。
username: env('USERNAME', null), password: env('PASSWORD', null),次に、app.js を編集します。
vim app.js変更箇所は下記のような感じです。
最後に、
production.jsonにログイン用のユーザー名とパスワードを設定します。vim config/production.jsonサンプルのユーザー名とパスワードは適当なのできちんとしたものにしてくださいね。
{ "port": 80, "noindex": true, "readonly": true, "username": "user", "password": "pass", ...略... }Node.js アプリを再起動してダッシュボードにアクセスするとベーシック認証が有効になっているのがわかると思います。
で、今回カスタマイズした Pa11y Dashboard は下記のリポジトリに上げています。参考までにどうぞ。
ということで、とりあえず動作するところまでなら簡単にできました。あとは日本語化したり少し手を入れてみようかなと思います。
関連エントリー
上で少し触れましたけど、Pa11y Dashboard の日本語化を実際にやってみたので下記の記事で紹介しています。
