React+Netlifyで最小のアプリを作る

Reactで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。

準備するもの

今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。

• npmのインストール
• Yarn（好みで必要であれば）
• GitHubのユーザー登録
• Netlifyのユーザー登録

Node.jsはnvm等を使うと複数のバージョンをインストールできて便利です（が、慣れてからでも良いと思います）。

プロジェクトを新規作成

まずはReact.jsのプロジェクトを新規登録します。npmやYarnが入っていればコマンド一発で新規作成できます。下記のどちらかのコマンドです。

npx create-react-app my-app

yarn create react-app my-app

TypeScriptを使いたい場合はパラメータを指定するだけで可能です。

npx create-react-app my-app --template typescript

yarn create react-app my-app --template typescript

完了したらもうすぐに下記コマンドで実行できます。

cd my-app

で作成されたフォルダに入り、下記のどちらかのコマンドを実行します。

npm run start

yarn start

問題なければ下記のような画面が表示されます。

Gitにコミットする

とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。下記のコマンドで空のリポジトリを作って初期化します。

git init

あとはVSCode等を使っていればプラスボタンでファイルを git add と同じようにステージングできます。そしてコメントを入力してチェックボタンをクリックすると git commit がVSCode上で実行できます。

GitHubにリポジトリをpushする

さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。

設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。

新規作成できると、空のリポジトリが作成されます。この状態ではリポジトリの初期化方法が色々と書かれています。その中に既存のローカルリポジトリを使う方法が書かれていますので、それをローカルのプロジェクト上で実行します。

git remote add origin [email protected]:dala00/react-netlify-sample.git
git push -u origin master

問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。

Netlifyにデプロイする

続いてNetlifyで先程作成したGitHubのリポジトリを連携させて、簡単にデプロイできるようにします。まずは「New site from Git」ボタンを実行します。するとGitHub上のリポジトリ一覧が表示されます。

ただ、新規登録時やNetlify上でのアプリケーション作成時のGitHub連携方法によってはもしかしたら表示されていないかもしれません。すべてのリポジトリの連携を許可する設定であれば表示されていると思いますが、特定のリポジトリだけ許可する設定で連携した場合は作成したばかりのGitHubリポジトリは表示されていません。その場合は画面の下に

Can’t see your repo here? Configure the Netlify app on GitHub.

というメッセージのリンクがありますので、そちらでGitHubに移動して許可するリポジトリを追加する必要があります。下記のような感じで追加します。

問題なく選択できたらアプリケーションの新規登録画面に遷移します。最近は下記のようにビルドコマンドや公開フォルダも自動的に入力されていますので、本当に何もする必要がありません。そのまま登録を行います。

登録が完了するとデプロイ一覧に下記のようにデプロイ中である旨のステータスが表示されています。完了すると緑色のPublishedというステータスに変わるのでしばらく待ちましょう。

問題なければ上部にURLが表示され、アクセスできるようになります。下記が実際にデプロイしたURLです。

https://agitated-noyce-250fb9.netlify.com/

agitated-noyce-250fb9の部分はSite settingsのsite nameという項目で変更することもできます。独自ドメインを持っていればそれを利用することもできます。

アプリケーションを更新する

アプリケーションに機能を追加してそれをデプロイしたい場合は、追加分をコミットしてGitHubにpushすると自動的にNetlify側も更新してくれます。

例えば試しに下記のようなよくあるインクリメントのテスト機能を書いてみます。例えばTypeScriptの場合はApp.tsxを下記のように変更します。（useStateと、そこから生成したcount, setCountを使っているところを追記しています）

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

const App: React.FC = () => {
  const [count, setCount] = useState(1)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div>{count}</div>
        <div>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      </header>
    </div>
  )
}

export default App

問題なければ下記のようにボタンを押すと数値が増えていく機能が出来上がります。

あとはコミットしてpushすると再度Netlify上でデプロイが走りアプリケーション上に反映されます。

まとめ

このようにJavaScriptとGitHub、Netlifyを使うだけだと非常に簡単にアプリケーションを作ることができます。サンプルや、ずっと運用していくわけではない簡単なアプリケーションであればおすすめです。

今回作成したプロジェクトはGitHubで公開しています。

https://github.com/dala00/react-netlify-sample