Nuxt.jsとServerless Framework(AWS)でサーバーサイドレンダリングするサンプルです。
WordPressのREST APIから情報を非同期取ってきて、記事一覧と記事詳細ページを表示します。
- まずはnpm installしましょう!
# install dependencies
$ npm install
- aws-cliでAWSの設定を行ってください。
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-configure.html
$ aws configure
- nuxt.config.jsのsiteUrlに表示したいWordPressサイトのURL(/wp-json前まで)を入力してください。
env: {
siteUrl: 'https://example.your-wordpress-site.com/wp-json/wp/v2/'
}
- Route53にパブリックホストゾーンを作成してください
https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/CreatingHostedZone.html
所有中のドメインがある場合は、Route53に移管 or ネームサーバーを向ける等してください。
ドメインがない場合は、Route53のコンソールから「登録済みドメイン」を選択し、ドメインを購入してください。
- Certificate Manager(ACM)でパブリック証明書を発行してください
ACMのコンソールの「証明書のリクエスト」から「パブリック証明書のリクエスト」を選択し、ドメイン名(Route53に登録したもの)を入力して発行してください。
- serverless.ymlにデプロイ先のドメインと名前を入力してください.
custom:
name: 'nuxt-sls-ssr'
customDomain:
domainName: '${self:provider.stage}.yourdomain.com'
certificateName: '*.yourdomain.com'
- serverless.ymlに記入した名前とリージョン名でS3にバケットを作ります。
# Nuxt.js開発モード
$ npm run dev
# Nuxt.jsビルド
$ npm run build
# AWSデプロイ後シミュレーション
$ npm run sls:offline
# AWSデプロイ
$ npm run sls:deploy
# デプロイしたものを削除
$ npm run sls:remove