Gatsby.jsで作ったサイトをさくっとS3でホスティングする

静的サイト生成に特化したReactのフレームワークGatsby.jsですが、せっかくなら作ったサイトのホスティングまでさくっとやりたいなと。

ターミナルから簡単にビルド&S3へのデプロイができたので、その方法を紹介します。

前提

• Macのターミナル
• Node.jsがローカルにインスロール済み
• AWSのアカウントを持っている

1. Gatsbyアプリの立ち上げ

何はともあれGatsby.jsのスターターをローカルで立ち上げましょう。

Gatsby.jsが入っていない人はインストール。

$ npm install -g gatsby-cli

Gatsbyプロジェクトを新規で作成します。

$ gatsby new hello-world

これでカレントディレクトリ直下にhello-worldというフォルダが作られますので移動します。

$ cd hello-world

webサーバーを起動してみます。

$ gatsby develop

特にエラーがなければアプリが立ち上がっているので、http://localhost:8000/ にアクセスします。

成功しました！ ここまで爆速。

つぎにGatsbyアプリのルートディレクトリでS3プラグインをインストールします。

$ npm install gatsby-plugin-s3

その後、デプロイ設定を記述しましょう。

package.json

"scripts": {
...
"deploy": "gatsby-plugin-s3 deploy"
}

上記がS3へのデプロイコマンドなのですが、実際のプロジェクトでは.envで環境変数を管理するケースが多いと思います。 その場合、代わりに下記を記述します。

package.json

"scripts" : {
...
"deploy": "npm run -n \"-r dotenv/config\" && npm run build && gatsby-plugin-s3 deploy"
}

2. S3バケットの準備

ホストするS3バケットを準備します。

いつものやつなので詳細は割愛。下記ご覧ください。

S3 バケットを作成する方法 https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/create-bucket.html

ほとんどの設定はデフォルトでいいのですが、バケットのポリシーは下記を記載します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation",
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutBucketWebsite",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::{ここにバケット名}",
                "arn:aws:s3:::{ここにバケット名}/*"
            ]
        }
    ]
}

上記がないとデプロイ実行時にAccessDeniedで弾かれてしまいます。

その後ローカルのGatsbyアプリに戻り、接続先となるS3バケットの設定を書き込んでいきます。

gatsby-config.js

{
 resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: "my-example-bucket",
    protocol: "https",
    hostname: "www.example.com",
  },
}

ただS3に上げるだけならhostnameがマッチしていなくても問題ないはずなので、将来アプリURLとなるドメインでも書き込んでおいてください。

3. AWS CLI

ローカルにAWS CLIがまだインストールされていない方は、下記弊社の記事など参考に、インストールしてみてください。

[アップデート] リソース名の補完など強力な機能追加！AWS CLI v2 が GA されました！

下記コマンド実行して情報が表示されればインストール成功しています。

$ aws --version
aws-cli/2.0.46 Python/3.7.4 Darwin/19.6.0 exe/x86_64

4. いよいよデプロイ

もうこれで準備はできているので、デプロイコマンドを実行します。

$ npm run deploy

AWSアカウントを複数持っている方は、上記コマンドの代わりに、先ほど設定したバケットの持ち主のAWSプロファイルを指定して実行してください。

$ AWS_PROFILE=yourprofilename npm run deploy

上記デプロイコマンドを実行して成功すると、下記のようにターミナルにS3のアクセスURLが表示されます。

Your website is online at:
http://XXXXXXXX.s3-website.eu-central-1.amazonaws.com

ホスティング設定も完了しているので、アクセスしてみましょう。

成功！

最後に

EC2やAmplifyに比べて、サイトの規模感にフィットしたホスティングができますし、Cloudfrontも組み合わせて利用料もかなり節約することができます。

また今回の構成とContentfulを組み合わせれば、インフラはS3だけでブログくらいならできちゃいます。

参考記事

• https://www.gatsbyjs.com/docs/deploying-to-s3-cloudfront/
• https://xxbxxqxx.com/post/19837