create-react-appを使ってReactコンポーネントの素振り、GitHub Pagesへのデプロイまで

今年の7月にcreate-react-appがリリースされ、僕の観測範囲内ではかなり話題となりました。

昨晩、Reactコンポーネントの素振りを目的として初めて使ってみたのですが、なかなか便利だったので、素振り+GitHub Pagesへデプロイするまでの作業メモです。

前提

あくまでcreate-react-appをWebアプリの開発用途としてではなく、Reactコンポーネントの素振りを目的として使います。そのため、詳しい使い方については触れません。

詳しい使い方については以下が参考になるかなと思います。

また、公式のドキュメントにはGitHub Pagesへのデプロイの他にHerokuなんかも記載されてますが、極々簡単に使いたいだけなので今回は特に触れません。

ざっくりと概要

  1. create-react-appをインストール
  2. create-react-appコマンドで環境構築
  3. Reactコンポーネントの素振り
  4. package.jsonhomepageにデプロイ先のURLを設定
  5. gh-pagesのインストール
  6. npm scriptsdeployを設定
  7. GitHubでgh-pagesの設定

create-react-appをインストール

create-react-appコマンドとして使いたいので、グローバルにインストールしちゃいます。

$ npm i -g create-react-app

インストールが終わって、以下のコマンドでバージョンが出力されるか確認しておきます。

$ create-react-app --version

素振り環境の構築

create-react-appコマンドが使えるようになったので、早速素振り環境を作ります。

# my-app という名前で作成
$ create-react-app my-app

# インストールが完了したらディレクトリへ移動
$ cd my-app

ここで既に諸々の準備が出来ているので、startでブラウザが開いて動作が確認できます。
設定いらずで簡単にReactを試せる環境構築が出来て良い感じです。

$ npm start

あとはいつもどおり、$ npm installで必要なコンポーネントをインストールして、src/App.js辺りにコードを書くだけです。

ちなみに以下実行すると、buildディレクトリに最適化済みの静的ファイルが生成されます。

$ npm run build

デプロイ

素振りに満足したらGitHub Pagesで動かしてみたいので、デプロイの設定をしていきます。
もし、まだGitHub上にリポジトリがなければ作っておく必要があります。

前準備

これは必須ではありませんが、やっておくと良いかもしれません。

  1. public/index.html<title>タグ変更
  2. TODO

package.jsonの編集

GitHub Pagesとして公開するURLをpackage.jsonhomepageに設定します。

{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "https://[username].github.io/[your-repository-name]",
  // ...
}

上記[]の中身は適当に変える必要があります。

npm scriptsの編集

GitHub上のリポジトリへ、gh-pagesブランチを作りそれをGitHub Pagesとして動作させます。
そこらへんをコマンド一発でやるためにgh-pagesを使うのでインストールしておきます。

$ npm i -D gh-pages

インストールが終わったら、scriptsdeployを追加します。

{
  // ...
  "scripts": {
    // ...
    "deploy": "npm run build && gh-pages -d build"
  }
}

これで$ npm run deployを実行すると、buildが実行された後、gh-pagesブランチへbuildディレクトリ以下のファイルがpushされるので、先にhomepageへ指定したURLで動作確認ができるようになります。

GitHub上でgh-pagesをGitHub Pagesへと登録

リポジトリ > Settings > GitHub Pages を開き、Sourceからgh-pagesを選択してSaveすれば完了です。

まとめ

ほとんど公式のドキュメントに記載されている内容ですが、上記で簡単にReactコンポーネントの素振りができました。

昨晩触ったきっかけですが、趣味リポジトリのnode_modulesをインストールしなおしている間(これがめっちゃ長い…)にさくっと触ったレベルですが、かなり短時間で気になっていたライブラリを触ってみることが出来ました。

素振りの他にも自作ライブラリのDEMOや動作確認なんかにも重宝しそうですね。

ただ、個人的にガッツリ開発するぞっとなった場合は、やっぱり一から設定していきたので、あくまで素振り+サンプルなんかに使っていきたいなという感じでした。

Newer Post SlackとVimとメモ管理と私 Older Post PinterestなレイアウトのためのReactコンポーネントを作った