AsaDesign

React：初期状態を公開する手順

Reactアプリのデプロイ方法について、最低限必要なものを把握したくて調べてみました。
下記の参考サイトをもとに、自分用のメモを記載しました。

参考サイト

Node.js(JavaScript実行環境)のインストール

https://nodejs.org/ja

Node.jsはサーバーサイドでJavaScriptを実行できる環境です。
npmはフロントエンド開発にパッケージの概念をもたらしました。

パッケージの何がいいのかというと、

  • アプリケーション側は使うライブラリとバージョン指定をpackage.jsonに書くだけでOK
    →JavaScriptのプログラムがモジュール単位で分割されるため、保守性や再利用性がUP
  • モジュールをimportでトランスパイル(変換)するためのビルドシステムが普及。
    ビルドツールにはwebpack, rollup.js, SWCというものがあるらしい。
  • ビルドというプロセスを通るので、JavaScript以外の言語で書けるAltJSという発想が誕生。TypeScriptやDartなどを使えるようになった。

Create React App(React開発ツール)のインストール

https://react.dev/learn/start-a-new-react-project

Create React AppはFaceBookが公開している、React向けの開発ツールです。

プロジェクトを作りたい場所へ移動して、下記コマンドを実行します。

npx create-react-app@latest portfolio --template typescript

TypeScriptで型がつけられたプロジェクトを作成するため、 –template typescript を指定します。

Reactの起動

cd portfolio
npm start

http://localhost:3000/にReactの初期ページが表示されたらOKです。

次は、このサイトをサーバーにアップするための手順となります。

ビルドの準備

package.jsonの編集

portfolioフォルダ直下のpackage.jsonに、実際にアップするURLを追記します。

	"homepage": "https://hoge.com/build/",　←追記
	"name": "test",
	"version": "0.1.0",
	"private": true,

.htaccessの編集

portfolioフォルダ内のpublicフォルダへ移動し、「.htaccess」フォルダを作ります。

下記のコードをコピペします。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

ビルド実行

npm run build

ビルドを実行すると、portfolio内にbuildフォルダが生成されます。この中に公開用のReactデータ一式入っているとのこと。

あとはこのbuildフォルダをサーバー(https://hoge.com/build/)にアップします。

URL入力して、React初期ページが表示されたら完了です。