The Nu Html CheckerをAWS App Runnerで実行させる

WebサイトやWebアプリケーションが、HTML、CSS、SVGの仕様に沿って実装されているかを確認できるThe Nu Html Checkerを、AWS App Runnerで実行するための手順を、AWS CLI v2を使ってご説明しています。
2021.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

HTMLやCSS、SVGには仕様があり、Webアプリケーション開発などでは、それらの仕様に沿って画面が実装されることになります。

実装中の画面が、それらの仕様に沿ってマークアップされているのかどうか? を確認できるツールの1つがWorld Wide Web Consortium (W3C)で公開されているNu Html Checkerです。

ソースコードがGitHubでMITライセンスで公開されており、Dockerイメージもありますので、手軽にローカルの環境を構築することができます。

今回は、AWS CLI v2を使ってNu Html Checker をAWS App Runnerで動作させる手順をご紹介したいと思います。

手順の概要

  1. Docker Hubからイメージを取得
  2. 取得したイメージをAmazon Elastic Container Registry(ECR)に登録
  3. 登録したイメージを指定してAWS App Runnerサービスを作成

1. Docker Hubからイメージを取得

Nu Html CheckerのDockerイメージのURLを指定します。

$ docker pull validator/validator:latest

pull が完了したら確認します。

$ docker images
REPOSITORY            TAG       IMAGE ID       CREATED        SIZE
validator/validator   latest    0d2eef07d029   3 days ago     96.6MB

問題なさそうです。

2. Amazon ECRにイメージを登録

ここからAWS CLI v2を使いますが、適切な権限を持ったIAMユーザーが実行環境に登録され、リージョンが指定され、output には json が指定されていることを前提とします。

まず、今回のイメージを登録するリポジトリがAmazon ECRにない場合は、以下の手順で作成します。

2.1 Amazon ECRにリポジトリを作成

ここでは、リポジトリ名 validator を作成します。

$ aws ecr create-repository --repository-name validator

作成されると結果が表示されます。

{
    "repository": {
        "repositoryArn": "arn:aws:ecr:<region>:xxxxxxxxxxxx:repository/validator",
        "registryId": "xxxxxxxxxxxx",
        "repositoryName": "validator",
        "repositoryUri": "xxxxxxxxxxxx.dkr.ecr.<region>.amazonaws.com/validator",
        "createdAt": "2021-07-07T00:00:00+09:00",
        "imageTagMutability": "MUTABLE",
        "imageScanningConfiguration": {
            "scanOnPush": false
        },
        "encryptionConfiguration": {
            "encryptionType": "AES256"
        }
    }
}

念の為、describe-repositories サブコマンドでも確認しておきます。

$ aws ecr describe-repositories

実行すると、先ほどと同様の結果が表示されます。

{
    "repositories": [
        {
            "repositoryArn": "arn:aws:ecr:<region>:xxxxxxxxxxxx:repository/validator",
            "registryId": "xxxxxxxxxxxx",
            "repositoryName": "validator",
            "repositoryUri": "xxxxxxxxxxxx.dkr.ecr.<region>.amazonaws.com/validator",
            "createdAt": "2021-07-07T00:00:00+09:00",
            "imageTagMutability": "MUTABLE",
            "imageScanningConfiguration": {
                "scanOnPush": false
            },
            "encryptionConfiguration": {
                "encryptionType": "AES256"
            }
        }
    ]
}

2.2 レジストリにログインする

Dockerイメージを登録するレジストリに docker コマンドでログインする必要があります。以下のコマンドで一度に実行できますが、 <aws_account_id><region> などは、describe-repositories サブコマンドの実行結果から読み替えて実行してください。

$ aws ecr get-login-password \
| docker login \
    --username AWS \
    --password-stdin <aws_account_id>.dkr.ecr.<region>.amazonaws.com

問題なくログインできれば Login Succeeded と表示されます。

2.3 ローカルのDockerイメージにtagをつける

ローカルのDockerイメージにtagをつけます。形式は ドキュメントを参照してください。ここでは、タグは latest とします。<IMAGE ID>はローカルのIMAGE IDです。

$ docker tag <IMAGE ID> <aws_account_id>.dkr.ecr.<region>.amazonaws.com/validator

2.4 イメージをpushする

ECRのレジストリにイメージをpushします。

$ docker push <aws_account_id>.dkr.ecr.<region>.amazonaws.com/validator

成功するとdigest値などが表示されます。

2.5 イメージの確認

list-imagesサブコマンドで、登録したイメージを確認します。

$ aws ecr list-images --repository-name validator

結果が表示されます。

{
    "imageIds": [
        {
            "imageDigest": "sha256:xxxxxxx......",
            "imageTag": "v1.0"
        }
    ]
}

3. App Runnerのサービスを作成

登録したイメージを指定してAWS App Runnerのサービスを作成します。

create-serviceサブコマンドのリファレンスを読む限り、なかなかパラメータが複雑そうです。

JSON形式のパラメータは改行をつけていますが、実際には1行で入力する必要があります。

aws apprunner create-service \
    --service-name validator \
    --source-configuration '{"ImageRepository":
        {
            "ImageIdentifier": "<aws_account_id>.dkr.ecr.<region>.amazonaws.com/validator",
            "ImageConfiguration": {"Port": "8888"},
            "ImageRepositoryType": "ECR"
        },
            "AuthenticationConfiguration": {
                "AccessRoleArn": "arn:aws:iam::xxxxxxxxxxxx:role/aws-service-role/apprunner.amazonaws.com/AWSServiceRoleForAppRunner"
            }
        }'

実行すると、実行結果がざっと表示されますが、"Status": "OPERATION_IN_PROGRESS" になっています。

サービスの作成には数分かかります。

しばらく経ったら、 list-services サブコマンドで確認します。

$ aws apprunner list-services

結果が返ってきます。

{
    "ServiceSummaryList": [
        {
            "ServiceName": "validator",
            "ServiceId": "xxxxxxxxxxxx",
            "ServiceArn": "arn:aws:apprunner:<region>:<aws_account_id>:service/validator/xxxxxxxxxxxx
            "ServiceUrl": "xxxxxxxxxxxx.<region>.awsapprunner.com",
            "CreatedAt": "2021-07-07T00:00:00+09:00",
            "UpdatedAt": "2021-07-07T00:00:00+09:00",
            "Status": "RUNNING"
        }
    ]
}

"Status": "RUNNING" であれば、サービスが正常に作成されています。 ServiceUrlhttps:// スキームでアクセスすると、W3Cと同じような画面が表示されます。