Next.js(SSG)+WP RESTAPI+AmazonS3の静的配信サイトを作ってみよう②デプロイ環境構築
Next.js+WP REST API + Amazon S3 の静的配信でWebメディアを作ってみたい
Next.js＋WP REST API + Amazon S3で静的配信サイトを作るための環境構築についてご紹介しました。
第二回の本記事では、Amazon S3 で静的配信を行うための準備をしていきたいと思います。
第一回記事の振り返り
第一回記事では、Next.js の開発環境構築手順（といっても、node.js の環境があればそこまで難しくもないですが…）や、WP REST API で記事情報を取得するための準備を行いました。また、なぜこの環境で制作を試行錯誤してみるか、について解説しました。この点は大事なポイントなので改めて述べておきますと、WordPressのシェアが大きい中で、WordPressで蓄積したコンテンツは活かしつつ静的サイト配信によるセキュリティ向上施策が今後価値に繋がるのでは、という点があります。
AWSのアカウントを作って、Amazon S3にデプロイする準備を行う
Amazon S3 で静的ウェブサイトをホスティングする場合のチュートリアルが公開されています。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html
こちらのStep1～7（クリーンアップは不要ですね）を実施して、index.html が謎の長ったらしいURL文字列で表示されることを確認しましょう。独自ドメインで作成したindex.html を表示するには、他にも色々と設定が必要となるため、まずはhtml表示まで実施できることを確認しましょう。
※index.html のサンプルも上記チュートリアルに記載されています
Github Actions でNext.jsでSSG静的配信サイトをAmazon S3にデプロイ
Next.js でSSG（Static Site Generation）で生成したサイトをAmazon S3でデプロイする方式を実現したいと思います。まずは、Next.js の設定をSSGにするため、next.config.mjs で output の設定に’export’を追記します。
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
};
export default nextConfig;
これにより、next build するとSSGでの静的サイト生成モードとなります。なおこちらの記法はNext.js v13.3以降での環境となっています。デフォルトで”out”フォルダが作られ、その中に静的ウェブページ一式がビルドされて生成されます。
これらのoutフォルダの中身を、Github Actions でブランチにコミットされた時にAmazon S3へデプロイするymlファイルを生成します。参考までに、簡単なymlのサンプルを下記に紹介します。GithubやAWSの仕様変更などで、この内容がそのまま利用できるとは限りませんのでその点はご了承ください。
name: Deploy to S3
on:
push:
branches:
- main # main ブランチにプッシュされたときに実行するという定義例
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@main
- name: Install dependencies
run: npm install
- name: Build the project
run: npm run build
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Sync S3 bucket
run: |
aws s3 sync ./out s3://[Amazon S3のバケット] --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}aws s3 sync を利用することで、./out ディレクトリとS3のバケットを同期させることができます。これにより、都度生成されたファイルの過去のものは削除されるため、バケット内のファイルが増え続けることが回避できます。
なお、ACCESSKEY については、それぞれAWS側で作成してくださいね。IAMでgithub actions 用のユーザーを登録し、S3へのアクセス権限を付与するといいでしょう。
github action 実施後に、Amazon S3 へ各種ファイルがデプロイされていれば、設定完了です。
まとめ
今回の記事では、Github Actions を使ってAmazon S3へのデプロイの自動化部分を実施しました。引き続き、サイト公開やサイトのブラッシュアップについて記事を作成していきたいと思います。
弊社ではホームページの制作について、ご要望に応じた最適な制作方式・運用管理方式をご提案いたします。お困りごとがありましたら、お気軽にお問い合わせください。
