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

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/