普段はサーバー系のプログラミング作業や、インフラ構築＆運用系の作業がメインなのですが、こちらの記事でも書きましたが現在Vue.jsとTypeScriptを使ったフロントエンドの作業も担当させてもらってまして、良い機会なのでついでにReactも勉強してしまおうということで週末にざっと取り組んでみました。

また、こちらの記事で知ったのですが、フロントエンドではここ数年静的サイトジェネレータというものが結構使われるようになってきているらしく、その中でもGatsbyというジェネレータが最近人気があり、それがReactを使って作られている＆それを使ってポートフォリオサイトを作ってる人が結構いるようなので、自分もちょっとその流れに乗ってReact+Gatsbyでプロフィールサイトを作ってみることにしました。

学習に使ったリソースと所要時間、引っかかった部分等を、これからReactやGatsbyを勉強しようとしている方たち向けの情報として残しておきたいと思います。

静的サイトジェネレータとは

私と同様に普段サーバーサイドがメインの方は「なにそれ？」という方も多いと思いますが、下記の記事を読めば大体のことは分かると思います。

static site generator のメリットとデメリット - 解き放たれしソフトウェア

Top Ten Static Site Generators of 2017 | Netlify

一番有名なのはjekyllというジェネレータで、Rubyで作られているそうです。

Gatsby

Reactを使用して作られている静的サイトジェネレータ。Reactのドキュメント自体もGatsbyで生成されているそうです。

GatsbyJS

Gatsby is a static site generator using React and GraphQL | React, etc. Tech Stack

GraphQL

Facebookの作ったAPI仕様というかSQL的なクエリ言語。下記等を参照すると大体の雰囲気は掴めると思われます。Gatsby内では、設定ファイルに記載されているjsonを読み込んだり、マークダウン形式で記述された記事を読み込む際に使われているようです。(私もまだあまり理解出来ていません)

アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた - WPJ

GraphQL入門 - 使いたくなるGraphQL - Qiita

Reactの学習

とりあえずReact公式サイトの「Quick Start」と「Tutorial」の2つだけやりました。ES6とかフロントエンド周りの最近の技術に関してはVue.jsの勉強で大体キャッチアップ出来ていた＆Vue.jsとReactで共通している箇所が結構ある感じなのでそんなに躓くところはなく、所要時間は両方合わせて1日〜1日半程度という感じでした。(ちなみにエディタはVSCodeを使っています)

Reactの学習ソースとしては他にも色々あると思いますが、英語ではあるものの公式サイトのQuick StartとTutorialは非常に分かりやすくて良く出来ているので、入門としてはこの2つだけやっておけば十分のような気がします。

じっくりやりたい方は「Advanced Guides」をやっておくのもの良いかと。

Quick Start - React

Tutorial: Intro To React - React

Gatsbyの学習

とりあえず「Getting Started」を読んでみたところ、Starterというテンプレートキット群の存在を知り、それを使えばブログサイトとかが簡単に作れるとのことだったので、座学よりもとりあえずコードをいじっちゃった方が早いなということでgatsby-starter-blogというスターターをローカルにインストールして、プロフィール写真をいじったりトップ画面の文言を変更したりしてみました。

GatsbyJS

gatsby-starter-blogをインストールするにあたっての注意点ですが、MacのPython3の環境だと、このstarterが依存しているsharpというnpmパッケージのインストールに失敗するようなので、pyenvとかvirtualenvとかで普段Python3の環境を使っている方は、gatsby-starter-blogのインストール後(インストール失敗後)に、node_modulesディレクトリを一旦削除して、Python2用の隔離環境を作ってからnpm installするようにしてみてください。(なにげにここで結構時間を浪費してしまいました・・・)

S3 + CloudFront環境へのアップロードとRoute53による独自ドメインの設定

ホスティングサービスとしてはNetlifyにも興味があったのですが、とりあえず自分が慣れてる環境でさくっとホストしたかったのでS3とCloudFront、そしてRoute53を使って独自ドメインでホストしてみました。

ここら辺に関しては下記の情報等が参考になると思います。

[CloudFront + S3]特定バケットに特定ディストリビューションのみからアクセスできるよう設定する｜ Developers.IO

Amazon Route 53のALIASレコード利用のススメ｜ Developers.IO

独自ドメインでZone Apexを使用する場合は、Route53でAliasレコードを使用する必要があるのでご注意ください。

また、実はここが一番引っかかった箇所なのですが、東京リージョンでS3にバケットを作成した後すぐにCloudFrontのディストリビューションを作成すると、307 REDIRECTが延々と返されるという現象が発生してしまう場合があります。下記に情報がありますが、デフォルトリージョンであるバージニア北部リージョン(us-east-1)でS3バケットを作成する場合はこの現象は発生しないらしいので、どうしても東京リージョンを使いたいという理由が無ければバージニア北部リージョンを使っておくのが無難かもしれません。

amazon web services - AWS Cloudfront redirecting to S3 bucket - Stack Overflow

AWS Developer Forums: Cloudfront domain redirects to S3 ...

リクエストのリダイレクトと REST API - Amazon Simple Storage Service

Amazon S3 が持つ分散型の特質により、リクエストが誤った施設に一時的にルーティングされる場合があります。このエラーは、大半の場合にバケットが作成または削除された直後に発生します。例えば、新しいバケットを作成し、ただちにバケットへのリクエストを実行する場合、バケットのロケーションの制約によっては一時的にリダイレクトされる可能性もあります。米国東部 (バージニア北部) リージョン (s3.amazonaws.com エンドポイント) にバケットを作成した場合は、リダイレクトされません。このリージョンがデフォルトのエンドポイントであるためです。これに対し、その他のリージョンにバケットを作成した場合、バケットに対するリクエストはこのデフォルトのエンドポイントに転送されますが、バケットの DNS エントリは伝播されます。デフォルトのエンドポイントは、HTTP 302 レスポンスを表示すると共に、リクエストを正しいエンドポイントにリダイレクトします。

成果物

とりあえず下記のようなトップ画面を表示するところまでは辿り着きました。

Polyglot Engineer's Playgrounds

振り返り

とりあえずReactに入門するという主目的は達成出来たのと、賛否両論あるJSXがどういう感じなのかはおおよそ把握出来たので、週末に取り組む個人プロジェクトとしては丁度良かったかなと。

今後は、こちらの記事を参考にして、GraphQLを使ってバックエンドにWordPress、フロントエンドにGatsbyという構成のサイトにしてみたりとか、デザインの勉強にも関心があるのでレイアウトやcssをいじったりとか、ReactとGatsbyを使って色々と遊んでみようと思っております。