React+S3+CloudFrontでWebサイトを構築（導入検討編)

Reactで作成したアプリケーションをS3上に保存して、CloudFrontでWebページを公開するという方法であれば、サーバーをレンタルしなくてもWebサイトを構築することができます。今回の記事はまず、本記事を作成しているWordpressとの違いなどを中心にまとめてみました。

はじめに用語解説

Reactとは

ReactはJSXという記法でwebページを作成するフレームワークで、Facebookが開発していて、オープンソースなので誰でも無料で利用することができます。Reactで作成されたWebページはデータとしては単一ページになり、ブラウザ上で動的にURLに応じたコンテンツを生成していきます。このようなシステムはSPA(Single Page Application)とも呼ばれて、Googleが開発したAngularや、Vue.jsというフレームワークもあります。

S3とは

AWS(Amazon Web Service)のディスクサービスです。一般ユーザが登録して無料で○GBまで使用できるという、DropboxやGoogle driveのようなサービスほど敷居は低くないのですが、それらと同じサービスです。

CloudFrontとは

CloudFrontはS3に保存したデータをWebページとして公開することができる仕組みです。

ReactとWordpressを無理やり比較してみる

この記事が掲載されているページはWordpressで構築したWebサイトです。せっかく両方を利用してサイトを作成しているので、個人的な見解でWordpressとReactで作るWebサイトの違いをまとめました。

	WordPress	React
概要	Webサイトのテンプレート	Webサイトを構築するためのフレームワーク
AWSでWebサイトを構築するための一般的な方法	サーバー(EC2)をレンタルしてWordpressをインストールする。	ディスクサービス(S3)にファイルをおいて、CloudFrontでWebサイトを公開する
料金体型	サーバーの仕様に応じた利用料	アクセス数に応じた利用料
おすすめするWebサイト	記事が主体のサイト	表示方法が定型化された会員サイト
ページ作成方法	WordPress上でテーマ、プラグインを入れて、後はひたすら頑張る。	JSXという記法(JavaScriptの拡張)でプログラムを開発するイメージで作成していく。
メリット	・簡単、プログラムの知識が無くてもサイトをなんとなく作れる。 （思ったように色、デザイン、システムを作り込むには、CSS、Wordpress、PHP、JavaScriptの知識が必要です）	・サーバーをレンタルする必要がない（激安） ・PHPを知らなくて良い ・HTMLやJavaScriptでページを作成するより爆速
デメリット	・URLのリクエストがある度にサーバー上でプログラムが走り、サーバー上で動的に表示するデータを作成する。 ・Wordpressに導入したテーマやプラグインの癖を把握する必要がある。	・サイトを自分でイチから構築していく必要がある（JavaScriptを拡張したJSXの知識が必須）

実体験として、Wordpressの場合は予め作り込まれている部分が多く、思ったとおりに動かない時に原因究明や対策に時間がかかってしまいます。Reactの場合はすべてを自作する必要がありまる。それでも、HTMLやJavaScriptでページを作成するよりも爆速で作業ができる上に、運用コストがやすいというメリットがあると感じています。

まとめ

Reactは会員サービスを提供するポータルサイトや、大規模なサイトに向いているように思います。一方で小規模で、記事を中心としたサイトはWordpressが向いているように思います。

ちなみに、当社ではIoTによるビックデータの可視化サービスを提供していますので、提供しているサービスに利用するのはReactの方が向いています。一方で、会社のサイトや本ブログはブラウザ上でサクッと記事を書いて公開したいですし、その記事を書く仕組みを作るところまで開発するのは面倒なのでWordpressのまま利用していくつもりです。

なお 提供中のサービスは現時点ではReactを使用しておらず、HTMLとJavaScriptによるフルスクラッチで作成しましたが、今後はReactにしていきたいと思っています。