Reactで作成したWebアプリケーションは、それなりのものを構築するとサーバーにNode.jsをインストールして、環境をしっかり整えて…などとスタートするのに手間がかかります。そんな手順の解説の記事も多いですね。
でも、簡単なアプリをお試しにレンタルサーバーで動かせないか？ 初心者（かつ、手間になることはやりたく無い人）にとっては気になるところ。
そこでReact のチュートリアルにあるアプリを作って、エックスサーバーで動くかどうかやってみました。
Reatのチュートリアルに従ってアプリを作る
Reactを利用するには、Node.jsがMac（PC）にインストールされている必要があります。
Node.jsのインストール方法はこちらからどうぞ。
React のチュートリアルに三目並べのwebアプリを作成する練習があります。
チュートリアルでは、ブラウザ環境を利用するパターンがありますが、ここはローカル開発環境で頑張って写経してみましょう。
適当なデイレクトりでターミナルから次のコマンドを実行します。
npx create-react-app my-app
cd my-app
npm startアプリの雛形を作って、そのディレクトリに移動し、ローカルサーバーを起動するという流れです。
http://localhost:3000/ にアクセスすると、React のwebアプリが立ち上がります。
ここから、チュートリアルの指示に従って、アプリを完成させてみましょう。ここでは詳しく扱いません。
チュートリアルと同じようにローカルサーバーで動くものができたら完成です。これをレンタルサーバーにアップロードして動かしたいわけです。
ReactアプリをXSERVERにアップロード
出来上がったwebアプリをエックスサーバーにデプロイする。デプロイって気取った言葉ですが、ここでやりたいのは単なるアップロードだけです。
まず、ターミナルで開発していたディレクトリから次のコマンドを実行します。
npm run buildしばらくすると、同じディレクトリの中に 「build」という名前のディレクトリが作成されWebアプリがビルドされます。
これを丸ごと、エックスサーバーに放り込みます。
まず、FTPソフトなどでエックスサーバーに接続します。(account).xsrv.jp/example.com/public_html の中に、先ほどの「build」フォルダを丸々アップロードします。ここでは「build」のフォルダ名を「tic-tac-toe」にしてみます。
アップロードが終了したら、https://example.com/tic-tac-toe/ にアクセスしてみましょう。
成功していたら、こんな感じで表示されるはずです。
ちなみに、このブログのドメインに同じようにファイルをアップロードしたら、同じようにこう表示されます。=> 三目並べ
簡単なアプリなら、レンタルサーバーの環境でもすぐに動かせますね。
最後に
Reactで作った簡単なwebアプリなら、レンタルサーバー（XSERVER）にアップロードするだけでも動作します。
初心者の時点でのアプリの動きの確認には有用だと思います。
ただ、データベースを利用したり、公開後の保守性などいろいろ絡んでくると、しっかりした環境構築をサーバー側でできるようになる方がいいですね。
Reactについては、また別の機会を作ってじっくりやろうかなと思います。
