読者です 読者をやめる 読者になる 読者になる

Goleiro

子育て / 読書 / 生き方 / デジモノ etc.

React.jsとcreate-react-appを使ってタダでAWS S3にイケてる動的サイトをサクッと作る方法(環境構築編)

AWS S3 ReactJS

 

f:id:HAGIZO:20170321005802p:plain

低コストでイケてるサイトを作りたい

AWSが流行り始めて久しいが、そろそろサクッとイケてるサイトを作りたくなってきたので環境整えてみた。ここではReact.jsを使ったサンプルページをAWSのS3からホスティングして公開するまでの流れを解説しよう。React開発環境はcreate-react-app,デプロイはAWS CLIで実現している。開発環境はOS X 10.11.6 (15G1004) - ELCapitan

create-react-appとは

create-react-appとはReact.js開発元のFacebookが提供するReact.jsの開発環境構築用コマンドラインツールだ。React.jsで「本格的な」アプリを作る際はWebpackやBabelなどの設定をいじる必要があり導入障壁が高かったのだが、このツールによりサクッとコマンド一発で環境構築ができるようになった。

使い方はこちらで詳しく解説されているので省略するが、現状はReactのコンテンツのひな形を一番手っ取り早く作るにはこれが一番良さそうだ。何よりReact.jsの提供元であるFacebookが作ってるってところが安心できる。

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita

上記の手順に従って作れば、30秒もかからないうちにReactコンテンツをローカル環境で起動させることができるだろう。なお、create-react-appを使いたいなら事前にNode.jsをインストールしておく必要がある。

GitHub - facebookincubator/create-react-app: Create React apps with no build configuration.
MacにNode.jsをインストールする - Qiita

AWS CLIとは

これはAWSをターミナルから操作するためのAWS公式ツール。AWSを使うなら必須だ。私の環境はbrewすら入ってなかったのでこれをインストールするのに相当手こずった。brewが入ってない場合は以下の手順で、環境構築する必要がある。

  1. homebrewインストール 
  2. gemだけ入れ直し(optional)
  3. pipのインストール
  4. pipでAWS CLIをインストール
  5. aws configureして初期設定完了

注意点

  • homebrew入れるとgem周りがバグってインストール完了しないので、gemだけ再度入れなす

  • pipのインストールはDL先を変更してからpythonをsudo付きで

  • AWS CLIのインストールはsixを無視するオプション付きで

AWS コマンドラインインターフェイス | AWS
MacにHomebrewをインストールする - Qiita
Permission denied - /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-14/2.0.0/bigdecimal-1.2.5 · Issue #7732 · caskroom/homebrew-cask · GitHub
Pythonの環境構築 - 万年素人からHackerへの道
【AWS】CLIの初期設定について(認証情報とコマンド補完) - TASK NOTES
Mac OS X への AWS CLI のセットアップ - Qiita
SixのエラーでAWS CLIをMacにインストールできない | // sakura note

 

create-react-appでつくったReactコンテンツをAWS CLIでS3にデプロイ

AWS CLIのインストールが完了したら、次はcreate-react-appでサクッと作られたひな形をS3にデプロイしよう。今回はとりあえずサンプルを動かしたいだけなのでsyncコマンドで実現。

デプロイ時のハマリポイント

  • S3のStatic website hostingを有効にして、設定画面に表示されたのURLをトップページとして使う。(index.htmlじゃない)
  • cssのcontent-typeがtext/cssでなれば設定必要
  • 全てのユーザーに対してRead属性を設定していないとデプロイするたびにindex.html,js,css,fabiconに対してallユーザのRead属性が外れ、permision deniedになる

Deploying create-react-app to S3 or CloudFront – Marc Garreau – Medium
ウェブサイトアクセスに必要なアクセス許可 - Amazon Simple Storage Service

おわりに

以上、少しハマったがなんとか1日で動かすことができた。
AWSはEC2を使ってサーバー起動してコンテンツ構築という方法もあるがlambdaなどでAPIを実装すれば、S3だけでも十分なサイト構築が可能になる。EC2に比べてランニングコストが格安のS3で構築ができるのはかなり魅力的だ。

今回のサンプルはこちら

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

 
Amazon Web Services実践入門 (WEB+DB PRESS plus)

Amazon Web Services実践入門 (WEB+DB PRESS plus)

 
サーバサイドJavaScript Node.js入門 (アスキー書籍)

サーバサイドJavaScript Node.js入門 (アスキー書籍)