ひとつ前の記事で、特定の Web ページの Web アクセシビリティ状況を監視するような用途で使える 「Pa11y Dashboard」 をクラウドサービス 「DigitalOcean」 を利用して短時間でとりあえず立ち上げる方法について書きました。
で、上記の記事でも書いてるんですが、少し改造してダッシュボード画面にベーシック認証機能を付けたりとか 「Pa11y Dashboard」 のソースコードに手を入れたりして遊んでたんですが、その流れで UI を日本語化してみようかなと思い立ちまして、とりあえず可能な範囲で対応してみたので公開します。
日本語化した Pa11y Dashboard は下記のような感じになります。デザインはいじってないので （日本語に合わせて少しフォントサイズを調整したりくらいはしましたが） 英語だった部分がそのまま日本語になったというだけですが。
上記がダッシュボード画面、下記が実際のテスト結果画面ですね。
レポート自体も日本語で出力されるようにカスタマイズして Build した HTML_CodeSniffer を同梱していますので、基本的にほぼすべて日本語で利用できるようになっています。
下記の GitHub リポジトリにソースコードは上げています。使い方わかる方は README.md を確認していただいてセットアップしていただければ。
Ubuntu 20.04 + nginx で立ち上げる場合
Node.js や MongoDB のセットアップみたいな動作環境の構築に関しては冒頭で紹介したひとつ前の記事を参照していただければ。
上記の記事だと IP アドレスでとりあえずアクセスできればいいっていう状態までの解説でしたが、所有しているドメインでアクセスできるようにしたいという場合は nginx を使用するのが楽だと思いますので、その辺の方法を下記に簡単にまとめておきます。
まず、nginx をインストールしますね。
apt install nginx次に ufw （Uncomplicated Firewall） で nginx に対してポート 80 とポート 443 の使用を許可しますが、
ufw app listnginx をインストールすると ufw app list に nginx が登録されていることがわかります。
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
下記のコマンドでポート 80 とポート 443、両方の使用を許可します。
ufw allow 'Nginx Full'状態を確認してみましょう。
ufw status下記のように Nginx Full が Allow になっていれば許可されています。
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Nginx Full ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx Full (v6) ALLOW Anywhere (v6)
nginx はデフォルトで /var/www/html がドキュメントルートになると思いますが、今回は Pa11y Dashboard 用に pa11y.example.com というドメインを使う前提でディレクトリを切ってみましょう。
mkdir -p /var/www/pa11y.example.com/html新しく作ったディレクトリに対する権限などは適時設定します。
chown -R $USER:$USER /var/www/pa11y.example.com/html
chmod -R 755 /var/www/pa11y.example.com次に今回使用する pa11y.example.com 用の設定ファイルを作成し、
vim /etc/nginx/sites-available/pa11y.example.com下記のように、リバースプロキシの設定を書いて Node.js アプリを公開可能にします。
server {
listen 80;
listen [::]:80;
root /var/www/pa11y.example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name pa11y.example.com;
location / {
proxy_pass http://localhost:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
作成した設定ファイルのシンボリックリンクを nginx が起動時に読み取る sites-enabled ディレクトリに作成することで設定が有効になります。
ln -s /etc/nginx/sites-available/pa11y.example.com /etc/nginx/sites-enabled/あと、nginx.conf を編集して、
vim /etc/nginx/nginx.conf下記の server_names_hash_bucket_size 設定項目のコメントアウトを外しておきましょう。
- # server_names_hash_bucket_size 64;
+ server_names_hash_bucket_size 64;nginx 設定ファイルの書式にエラーがないかを一応確認して、
nginx -tnginx を再起動します。
systemctl reload nginxLet's Encrypt でサーバ証明書を取得
ついでに HTTPS でもアクセスできるようにしましょう。certbot をインストール。
apt install certbot python3-certbot-nginx証明書を取得します。チュートリアルに従っていくだけ。先ほど作った pa11y.example.com 用の設定ファイルにポート 443 関連の設定も自動で追記されます。
certbot --nginx -d pa11y.example.comcertbot の自動更新設定が有効になっているかを確認。
systemctl status certbot.timer動作していれば設定完了です。超簡単ですね。
● certbot.timer - Run certbot twice daily
Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
Active: active (waiting) since Sun 2021-12-12 01:49:50 UTC; 5min ago
Trigger: Sun 2021-12-12 15:41:46 UTC; 13h left
Triggers: ● certbot.service
Pa11y Dashboard 日本語版をインストール
ここまできたら Pa11y Dashboard をインストールします。まずは先ほど作った pa11y.example.com 用のドキュメントルートに移動します。
cd /var/www/pa11y.example.com/htmlPa11y Dashboard 日本語版を GitHub リポジトリから git clone してきて、パッケージをインストールします。
git clone https://github.com/burnworks/burnworks-pa11y-dashboard.git
cd burnworks-pa11y-dashboard
npm install
本番環境で使用するなら、本番環境用の設定ファイルを有効化。
cp config/production.sample.json config/production.json設定ファイルを編集します。
vim config/production.json設定ファイルの初期値は下記のようになっていますので、
{
"port": 4000,
"noindex": true,
"readonly": false,
"username": "user",
"password": "pass",
"webservice": {
"database": "mongodb://localhost/pa11y-webservice",
"host": "0.0.0.0",
"port": 3000,
"cron": "0 30 0 * * *",
"chromeLaunchConfig": { "args": [ "--no-sandbox" ] }
}
}下記の部分だけ書き換えてください。これがダッシュボード画面へのベーシック認証で使用するユーザー名とパスワードになります。
"username": "user",
"password": "pass",次に、同梱してある日本語化 （レポートの日本語訳も足りていなかった部分を追加しています） した HTMLCS.js を node_modules 内のファイルに上書きします。
cp ja/HTML_CodeSniffer/build/HTMLCS.js node_modules/html_codesniffer/build/HTMLCS.jsあとは依存関係のライブラリをインストールし、
apt install -y libnss3 libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgbm1 libcups2 libxkbcommon0 libxdamage1 libgtk-3-0Node.js アプリの実行状態を永続化したり、ログを管理したりするための PM2 をインストール。
npm install pm2 -gアプリ （Pa11y Dashboard） を起動します。
NODE_ENV=production pm2 start index.js
上記のようにきちんと Node.js アプリが立ち上がったら、ドメインにブラウザでアクセスすれば、Pa11y Dashboard の初期画面が表示されるはずです （ベーシック認証は先に設定したユーザー名とパスワードで認証しましょう）。
あとは URL を登録して、初回のテストを実行すれば運用開始です。
