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 --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だけでブログくらいならできちゃいます。
