Gatsby.jsで作ったサイトをs3にデプロイ

みなさんこんにちは、中野です。 gatsbyでの運用方法について考えているのですが、gatsby-plugin-s3によるs3のデプロイが直観的で素晴らしかったので、その方法を紹介しようと思います。

前提条件

• Gatsby.jsによる静的サイトを制作している。
• awsのアカウントを持っている
• aws cliの設定が完了している。
• デプロイ先のバケットを作成している ex:) example-bucket

インストール

yarn add gatsby-plugin-s3

[package.json]

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

[gatsby-config.js]

{
 resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: "example-bucket",
  },
}

デプロイ

yarn deploy

Your website is online at:
http://XXXXXXXX.s3-website-ap-northeast-1.amazonaws.com

困るポイント

AccessControlListNotSupported: The bucket does not allow ACLs

解決策

s3のバケットの設定をACL無効から有効に変更してください。

最後に

Gatsby単体でのデプロイに成功しました。非常に少ない作業で成功したのがすばらしいですね。

strapiのデータも繁栄した状態でのデプロイにも成功しましたので、あとはstrapiを任意のタイミングでyarn deployを動かすことができれば、運用可能なレベルになる気がしますね。