Gatsbyで作ったWebページを公開してみる
プロジェクトを始める
今回は次のコマンドでプロジェクトを始めます。
npm init gatsby
この方法だとプロジェクト単位でGatsbyをインストールします。
一方でパッケージをグローバルにインストールして使うこともできます。
$ npm install -g gatsby-cli $ gatsby new
今回は入門ということで以下のように作成しました。 上のどちらの方法でも同じ選択肢がでてくるはずです。
$ npm init gatsby
npx: 1個のパッケージを2.144秒でインストールしました。
create-gatsby version 1.10.0
Welcome to Gatsby!
This command will generate a new Gatsby site for you in /XXXXXXXXXXX/XXXX/XXXX with the setup you select. Let's answer
some questions:
What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ gatsyby_s3/ my-gatsby-site
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)
✔ Would you like to install additional features with other plugins?No items were selected
Thanks! Here's what we'll now do:
? Create a new Gatsby site in the folder my-gatsby-site
✔ Shall we do this? (Y/n) · Yes
成功すると以下のようなファイルたちが生成されます。
my-gatsby-site/
├── README.md
├── gatsby-config.js
├── package-lock.json
├── package.json
└── src
├── images
│ └── icon.png
└── pages
├── 404.js
└── index.js
開発用サーバーを立てる
GatsbyCLIは開発用にWebページを配信するサーバーを立ててくれます。
npm run start
この状態でローカルホストの8000ポートにアクセスすればWebページがもらえます。
試しにアクセスしてみます。
公開する
せっかくなので公開してみましょう。 公開するために静的ファイルを生成します。
npm run build
実行後に確認するとpublicディレクトリができて、中にいろいろ生成されてます。
./
├── README.md
├── gatsby-config.js
├── package-lock.json
├── package.json
├── public
│ ├── 404
│ │ └── index.html
│ ├── 404.html
│ ├── app-275e65ff2acd4a981b52.js
│ ├── app-275e65ff2acd4a981b52.js.map
│ ├── chunk-map.json
│ ├── component---src-pages-404-js-8edb778200e3d9d6d5d3.js
│ ├── component---src-pages-404-js-8edb778200e3d9d6d5d3.js.map
│ ├── component---src-pages-index-js-8f2ab2a74220e07d3e48.js
│ ├── component---src-pages-index-js-8f2ab2a74220e07d3e48.js.map
│ ├── framework-bb0aa019ddf2a37ed856.js
│ ├── framework-bb0aa019ddf2a37ed856.js.LICENSE.txt
│ ├── framework-bb0aa019ddf2a37ed856.js.map
│ ├── index.html
│ ├── page-data
│ │ ├── 404
│ │ │ └── page-data.json
│ │ ├── 404.html
│ │ │ └── page-data.json
│ │ ├── app-data.json
│ │ └── index
│ │ └── page-data.json
│ ├── polyfill-241fc419c9a0bba156dc.js
│ ├── polyfill-241fc419c9a0bba156dc.js.map
│ ├── static
│ ├── webpack-runtime-11d17f326de72439f475.js
│ ├── webpack-runtime-11d17f326de72439f475.js.map
│ └── webpack.stats.json
└── src
├── images
│ └── icon.png
└── pages
├── 404.js
└── index.js
今回はこのままAWSのS3上でホスティングします。 Terraformでバケットを作成します。
terraform {
required_providers {
aws = {
source = "hashicorp/aws"
version = "~> 3.0"
}
}
}
provider "aws" {
region = "ap-northeast-1"
profile = "XXXXXXXXXXX"
}
resource "aws_s3_bucket" "web" {
bucket = "XXXXXXXXXXXX"
acl = "public-read"
website {
index_document = "index.html"
}
}
ポイントはACLをpublic-readにすることです。
これなら書き込みは防ぎつつ、読み込みだけを許可することができます。
以下のコマンドでバケットが作成できます。
terraform apply
GatsbyにはS3にアップロードするのに便利なプラグインがあるのでそれを使います。
npm i gatsby-plugin-s3
設定ファイルを以下のように書き換えましょう。
module.exports = {
siteMetadata: {
siteUrl: "http://XXXXXXXXXXX.s3-website-ap-northeast-1.amazonaws.com",
title: "My Gatsby Site",
},
plugins: [
{
resolve: `gatsby-plugin-s3`,
options: {
bucketName: "XXXXXXXXXXX",
},
},
],
};
最後にS3バケットに送信したら完了です。
$ AWS_PROFILE=XXXXXXXXXXX npx gatsby-plugin-s3 deploy
Please review the following: (pass -y next time to skip this)
Deploying to bucket: XXXXXXXXXXX
In region: ap-northeast-1
Gatsby will: UPDATE (any existing website configuration will be overwritten!)
? OK? Yes
✔ Synced.
Your website is online at:
http://XXXXXXXXXXX.s3-website-ap-northeast-1.amazonaws.com
この際プロファイルは書き込み権限があるものを使います。 また、このコマンドはpackage.jsonに書いてもいいかもしれません。
最後にWebブラウザからアクセスしてみます。 先ほどの実行結果に含まれているURLにアクセスしてみます。
無事にデプロイできました。
最後に
今回は簡略化のために省きましたがCloud Frontを用いてS3にアクセスするような仕組みを作ればより高速にページを配信できます。 S3にホスティングしましたがNetlifyなどの別のホスティングサービス用のプラグインも存在します。 また、Gatsbyを使用すればリハイドレーションもお手軽に実装できるみたいなのでそちらも試してみたいです。
