AWSでドメイン取得してServerlessでAmazon API Gatewayにカスタムドメインを設定する方法

Nuxt.jsで作成したSSRなサービスをServerlessでAmazon API Gawaway(AWS Lambda)デプロイする際に、独自ドメインを設定する方法です。

デプロイするソースはGitHubにアップしているものを利用します。
https://github.com/kai-kou/nuxt-serverless/tree/feature/no-use-s3

基本的には下記を参考に設定をすすめました。

Serverless(node.js)で独自ドメインSSLの適用方法 - Qiita
https://qiita.com/koshilife/items/bb7edb12f0285a241294

ドメインの取得

下記を参考にドメインを取得します。.com ドメインだと千数百円/年で取得が可能です。

Amazon Route53 でドメインを取得する - Qiita
https://qiita.com/NaokiIshimura/items/89e104dd2d8dd950780e

httpsを利用するのにSSL/TLS証明書が必要になりますので、下記を参考に証明書を取得します。この際、リージョンはus-east-1 で取得します。ap-northeast-1 で取得しても、Serverlessで設定する際にus-east-1 をみにいくので、証明書がみつからないとエラーになります。

Certificate Manager (ACM) がDNSの検証をサポートしました ｜ DevelopersIO
https://dev.classmethod.jp/cloud/aws/certificate-manager-dns-validation-support/

serverless.ymlの設定

custom.customDomain でドメインの設定をします。

serverless.yml_一部抜粋

service: [サービス名]

provider:
  name: aws
  stage: ${opt:stage, 'dev'}
  region: ap-northeast-1
  runtime: nodejs8.10
  package:
    exclude:
      - src/**
      - .vscode/**
      - package.json
      - package-lock.json
      - tsconfig.json
      - tslint.json
      - yarn.lock
    include:
      - serverless.yml

  environment:
    NODE_ENV: production

custom:
  customDomain:
    domainName: "${self:provider.stage}.[ドメイン名]"
    stage: ${opt:stage, 'dev'}
    certificateName: "*.[ドメイン名]"
    createRoute53Record: true
  apigwBinary:
    types:
      - '*/*'

functions:
  nuxt-renderer:
    handler: handler.render
    memorySize: 512
    timeout: 30
    events:
      - http:
          path: /
          method: ANY
          cors: true
      - http:
          path: /{proxy+}
          method: ANY
          cors: true

plugins:
  - serverless-apigw-binary
  - serverless-domain-manager

デプロイする

Serverlessのプラグインserverless-domain-managerを利用しますので、インストールしてからserverless create_domain でドメインの設定をしてからserverless deploy します。
serverless create_domain 後、数十分待つと設定が完了してアクセスできるようになりました。

> npm install serverless-domain-manager --save-dev
> npm run build
> serverless create_domain

Serverless: 'dev.xxxxx.com' was created/updated. New domains may take up to 40 minutes to be initialized.

> serverless deploy

Amazon API Gatewayの「カスタムドメイン名」で確認すると設定がされていることが確認できました。

やったぜ。

注意点

Amazon API Gatewayでデプロイして、そのまま利用する場合、エンドポイントのURLがhttps://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/ となりdev が含まれるため、Nuxt.jsでベースURLの設定をする必要がありますが、カスタムドメインを利用する場合は不要になります。
なので、ベースURLを変更する必要があります。

参考

Serverless(node.js)で独自ドメインSSLの適用方法 - Qiita
https://qiita.com/koshilife/items/bb7edb12f0285a241294

Amazon Route53 でドメインを取得する - Qiita
https://qiita.com/NaokiIshimura/items/89e104dd2d8dd950780e

Certificate Manager (ACM) がDNSの検証をサポートしました ｜ DevelopersIO
https://dev.classmethod.jp/cloud/aws/certificate-manager-dns-validation-support/