最近ブログを始めようと思って、触れてこなかったReactで作成しようと思い、Gatsbyに辿り着いた上でサーバー公開するにあたり、どこで公開するかまでの紆余曲折をメモしておきます。
Gatsby
GatsbyはReactで作られた静的サイトジェネレーターです。
以前kusanagiを使用してWardPressを高速に表示する事で管理していましたが、それなりのスペックを要求されるので、こんな一個人のブログに関してはサーバー費自体がバカにならなかったので出来る限りコストがかからないようにしたかった。
なので最低限、脱Wordpressで且つ、自分にプラスになる(未開拓)技術に触れたいというものが構想段階で前提条件のMustでした。
パッケージ選定
公式のgatsby-starter-blogをカスタマイズしても良かったのですが、 色々調べていく内に見やすさとか、ある程度自分でカスタマイズできそうなものである事とReact初心者でもある程度解説されながら公開されていて、デザインが好みなものをチョイスさせて頂きました。
調整した部分
GitHubでも公開されていましたので、少しカスタマイズさせて頂きました。本当にこういう形で公開されているのはありがたいです。自分もこうなっていきたい。 まずは少しバージョンが古かったのっでGatsbyバージョンアップをしました。
package.json
"dependencies": {
"disqus-react": "^1.1.2",
"gatsby": "^4.4.0",
"gatsby-image": "^3.11.0",
"gatsby-plugin-canonical-urls": "^4.4.0",
"gatsby-plugin-feed": "^4.4.0",
"gatsby-plugin-google-analytics": "^4.4.0",
"gatsby-plugin-image": "^2.4.0",
"gatsby-plugin-manifest": "^4.4.0",
"gatsby-plugin-offline": "^5.4.0",
"gatsby-plugin-react-helmet": "^5.4.0",
"gatsby-plugin-sharp": "^4.4.0",
"gatsby-plugin-sitemap": "^5.4.0",
"gatsby-plugin-slug": "^2.0.0",
"gatsby-plugin-styled-components": "^5.4.0",
"gatsby-remark-autolink-headers": "^5.4.0",
"gatsby-remark-copy-linked-files": "^5.4.0",
"gatsby-remark-emojis": "^0.4.3",
"gatsby-remark-external-links": "^0.0.4",
"gatsby-remark-images": "^6.4.0",
"gatsby-remark-prismjs": "^6.4.0",
"gatsby-remark-responsive-iframe": "^5.4.0",
"gatsby-remark-smartypants": "^5.4.0",
"gatsby-source-filesystem": "^4.4.0",
"gatsby-transformer-remark": "^5.4.0",
"gatsby-transformer-sharp": "^4.4.0",
"polished": "^4.1.3",
"postcss": "^8.4.5",
"postcss-import": "^14.0.2",
"prismjs": "^1.25.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"styled-components": "^5.3.3"
},
"devDependencies": {
"prettier": "^2.5.1"
}node.jsのバージョンは16.13.0でコンパイル
コンパイルにおけるトラブル
いくつかあったので紹介。
- GraphQLの取得でエラーが出まくる
→gatsby-plugin-disqusが悪さをしてコンパイルは通るがGraphQLの取得部分がでエラーが出まくる。
→disqus-reactに変更して対応
- warning潰し
・Visible, non-interactive elements with click handlers must have at least one keyboard listener
→指定要素(spanやdiv)をbutton等に変更。
・Static HTML elements with event handlers require a role
→単純にrole要素を付与
サーバー選定
条件としてはこんな感じ
- サーバー費が基本的に無料or限りなく低コスト
- ドメイン費は許容する
- 勉強がてらに触れた事の無い技術
- GitHubとかでコミットしたらデプロイして公開出来る仕組みをとれるもの
そんな中候補としたのは下記
- GitHub Pages
- Netilify
- Oracle Cloud
- CloudFlare Pages
参考にさせて頂いた記事
GitHub Pages
無料プランではpublicにしないと無理で商用利用も不可。
- ストレージ: 1GB
- 転送量: 100GB/月
の制限もあるので、記事数が多くなると怖い。
Netilify
最後まで候補に残ったが、
- 転送量: 100GB/月
- ストレージ: 100GB
転送量がどう将来的に影響するかの目安が分からなかったので却下。 Netilify
Oracle Cloud
デプロイの仕組みを組み立てるのが面倒。
でもスペックが非常に魅力的だったので頑張ろうとしたんですが、容量不足でコンテナ作成出来なかったので保留して他のものを探す事に。
CloudFlare Pages
ドメインを持っていたら最強に見えた。無料プランでもこれ。
- ビルド回数: 500回/月
- 転送量: 無制限
- 帯域: 無制限
- ストレージ: 無制限?
デプロイの種類にもGatsby指定可能だったのでGitHub連携してみたら一発で通った。 月に500pushもしないので問題無し。
※NODE_VERSION指定の必要あり。
ドメインの登録関係も結構簡単にできたのでCloudFlare Pagesでいこうかなという事で
→採用！
欠点を挙げるとしたらビルドが1記事しか無い状態で、3分程度かかる事かな？ 比較した事が無いのでこれが遅いのか早いのかわからないのでひとまずこれでいこうと思います。
おわり🎉
Gatsbyの仕組みを学ぶ事が一番時間かかり、graphQLも初めて触ったのでかなり手間取りましたが、
git push→デプロイ→公開
の流れを実現する事が出来たので満足です。
まだまだ足りない部分もあるかもしれませんが、これからもっと精進していこうと思います。
