LoginSignup
10

More than 5 years have passed since last update.

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

Posted at

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の「カスタムドメイン名」で確認すると設定がされていることが確認できました。

API_Gateway.png

やったぜ。

注意点

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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10