NextでSSGアプリを作成し、CircleCIでS3に自動デプロイする方法

インフラ

SSGとは静的なHTMLを事前に生成し、配信する方法です。

SSGではファイルの配置をするだけでアプリケーションが公開できるためサーバの準備が不要です。
今回はNextで作成したSSGアプリケーションを、CircleCIを利用してS3に自動デプロイする方法について紹介します。

NextでSSGアプリケーションを作成する

SSGアプリケーションをNextで作成する手順について紹介します。

2021年10月現在、以下で紹介する『next export』による静的ファイル生成はnext/imageに対応しておりません。 1
next/imageを利用したSSGアプリケーションの起動には『next start』を利用します。

Nextアプリケーションのひな型作成

create-next-appコマンドでNextアプリケーションのひな型を作成します。

$ npx create-next-app [リポジトリ名]
# or
$ yarn create next-app [リポジトリ名]

静的HTMLのエクスポートをする

静的HTMLの作成はnext exportで行います。
Next『Static HTML Export#How to use it』の手順に従い、package.jsonを編集します。

package.json

{
  "scripts": {
-   "build": "next build",
+   "build": "next build && next export",

修正後、buildコマンドを実行します。

$ yarn build

# or

$ npm run build

コマンド実行後、outディレクトリが作成されていればOKです。

.
├── README.md
├── out ← このディレクトリが作成されていればOK
│   ├── 404.html
│   ├── _next
│   ├── favicon.ico
│   ├── index.html
│   └── vercel.svg
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

参考: SSGアプリケーションをローカルで確認する方法

next devコマンドでNextアプリケーションを起動するとSSRが有効になっているためSSGの確認ができません。

SSGはhttp-serverやserveをはじめとした簡易Webサーバを利用して確認します。

以下はhttp-serverを利用したSSGの確認方法です。

### npx経由でhttp-serverを実行。outディレクトリのファイルを配信
$ npx http-server ./out

Starting up http-server, serving ./out
Available on:
  http://127.0.0.1:8080
  http://172.16.100.98:8080

http://127.0.0.1:8080にアクセスし、Nextアプリケーションの画面が表示されればOKです。

静的WebサイトをS3でホスティングできるようにする

S3とはSimple Storage Serviceの略で、オンラインストレージ機能を提供するAWSのサービスです。

S3に用意されているホスティング機能を利用することで、S3にファイルをアップロードするだけでWebサイトとしてネット上に公開できます。

ここではS3でWebサイトをホスティングする手順について紹介します。

バケットを作成する

S3のダッシュボードの『バケットを作成する』を選択します。

必要項目を入力してバケットを作成します。
Webサイトを公開状態にするため、アクセス許可の設定で『パブリックアクセスをブロック』のチェックを外します。

一覧にS3バケットが表示されればOKです。

Webサイトのホスティング機能を有効にする

作成したS3バケットの『プロパティ』項目にある『Static website hosting』を選択します。
『このバケットを使用してウェブサイトをホストする』をチェックし、インデックスドキュメントを指定します。
今回はindex.htmlをインデックスドキュメントにしました。

パケットホスティングにチェックがついていればOKです。

CircleCIを利用してSSGアプリケーションをS3にデプロイする

『GitHubリポジトリへのpushをトリガにCircleCIが実行され、S3にSSGアプリケーションがデプロイされる』という環境を構築します。

GitHubリポジトリとCircleCIの連携

GitHubリポジトリとCircleCIの連携はCircleCIの設定画面で行います。
設定手順はCircleCIを始めるを参考にしてください。

AWSアクセスキーの作成

今回はAWS CLIを利用してS3へファイルをコピーします。
AWS CLIを利用するには事前にAWSアクセスキーとAWSシークレットキーが必要です。

アクセスキーとシークレットキーは、IAMダッシュボードの『ユーザー』→『認証情報』→『アクセスキーの作成』で作成します。

AWS CLIの設定をCircleCIのcontextに保存する

CircleCIで利用する環境変数はcontextに保存します。

今回はAWS CLIの設定をcontextに環境変数として保存しました。コンテキスト名はawsとしました。
環境変数名についてはAWS CLIをCircleCI上で実行するcircleci/aws-cli（後述）のsetup項目を参考に設定します。

AWS CLIに必要な設定情報
  • AWS_ACCESS_KEY_ID: AWSアクセスキー
  • AWS_SECRET_ACCESS_KEY: AWSシークレットキー
  • AWS_DEFAULT_REGION: デフォルトリージョン

CircleCIの設定ファイルを編集する

CircleCI 2.1からはCircleCI Orbsと呼ばれる共通パッケージが利用できます。Orbを利用することで記述が簡潔になります。

今回はcircleci/aws-cli@1.4.0Orbを利用して、CircleCI上にAWS CLIの実行環境を用意します。

設定は以下の通りです。

.circleci/config.yml

version: 2.1
jobs:
  copy-assets-to-s3: # copy-assets-to-s3というjobの詳細
    executor: aws-cli/default
    steps:
      - checkout # working_directoryへチェックアウト
      - aws-cli/setup # Orbのコマンド。AWS CLIの設定が行われる
      - run: yarn install
      - run: yarn build # NextのSSGアプリケーションのビルド実行
      - run:
          name: Copy to S3
          command: aws s3 cp ./out s3://deliciouslif.com --recursive --acl public-read
          ### --recursive: ディレクトリ内全てのファイルをコピー
          ### --acl public-read: S3のコンテンツを外部へ公開する

orbs:
  aws-cli: circleci/aws-cli@1.4.0
workflows:
  aws-cli:
    jobs:
      - copy-assets-to-s3: # copy-assets-to-s3というjobが実行される
          context: aws # （事前に作成した）awsという名前のcontextの環境変数を読み込む

CircleCI2系の記述方法の詳細はCircleCI『CircleCI を設定する』をご覧になってください。

参考: ローカルで設定ファイルのバリデーションチェックをする方法

macOSの場合、brewを利用してCircleCI CLIのインストールができます。以下のコマンドで設定ファイルのバリデーションをチェックできます。

### macOSの場合はbrewを使ってインストール
$ brew install circleci

### バリデーションチェック
$ circleci config validate -c .circleci/config.yml

CircleCIを利用してS3に静的ファイルを配置する

ソースコードをpushし、CircleCIを実行します。

$ git push origin HEAD

CircleCIが正常に終了すると以下のように『Sucess』と表示されます。
もし失敗した場合はエラーログをもとにCircleCIの設定ファイルを修正します。

S3に配置された静的ファイルを確認する

CircleCIの実行完了後、S3のWebサイトのエンドポイント（xxx.s3-website-xxx-amazonaws.com）にアクセスして画面が表示できればOKです。

エンドポイントは『Static website hosting』の詳細で確認できます。

参考: S3のコンテンツをCloudFront経由で配信する方法

ここまでで、S3のエンドポイントにアクセスするとWebサイトが表示される環境を用意できました。
しかし、独自ドメインやHTTPSでコンテンツを配信する場合はCloudFrontを利用する必要があります。

CloudFrontとはコンテンツ配信ネットワークサービスを提供するAWSの機能です。

https対応した独自ドメインでS3のコンテンツを、CloudFront経由で配信する方法についてはhttps対応した独自ドメインのWebサイトをS3 + CloudFrontで運用する手順で紹介しています。

https対応した独自ドメインのWebサイトをS3 + CloudFrontで運用する手順

まとめ

今回のまとめ
  • next exportで静的HTMLをoutディレクトリに作成できる
  • AWS CLIとCircleCIを活用することでS3への自動デプロイ環境が作成できる
  • ホスティング機能を有効にすることでS3で静的ファイルを配信できる

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

  1. Static HTML Export ↩
RECOMMEND