Reactアプリを作って、v17にダウングレードし、レンタルサーバーにデプロイするまで

追記

まあ、最新バージョンを使ってほしいですが。

まずは、Reactアプリ作る

アプリを作成し、動作確認する

npx create-react-app プロジェクト名
cd プロジェクト名
npm start

node.jsやyarn、npm、create-react-appのインストールはappendixに。

最新はv18になっているので、v17にダウングレード

package.jsonのdependenciesを修正

package.json

# 省略
"dependencies": {
  "@testing-library/jest-dom": "^5.16.2",
  "@testing-library/react": "^11.2.7",
  "@testing-library/user-event": "^12.8.3",
  "react": "^17.0.2",
  "react-beautiful-dnd": "^13.1.0",
  "react-dom": "^17.0.2",
  "react-scripts": "5.0.0",
  "web-vitals": "^0.2.4"
},
# 省略

package-lock.jsonとnode_modulesを削除し、再構築

rm package-lock.json
rm -r node_modules
yarn install

React17の記述に修正

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

レンタルサーバーで公開

package.jsonの該当箇所を以下のように修正

package.json

# 省略
“homepage”: “公開URL”,
“name”: “react-app”,
“version”: “0.1.0”,
“private”: true,
# 省略

publicフォルダ内に.htaccessファイルを作成

.htaccess

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

ビルドします

npm run build

buildフォルダ内のファイル全てを公開URL配下のディレクトリに移し、デプロイ完了！

Appendix

node.jsとyarnをインストール

For Mac

# nvm インストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# nvm 有効化 (このコマンドがエラーになる場合: ターミナル を閉じ、再度開いて次の手順へ)
source ~/.zshrc
# node(安定版)のインストール
nvm install --lts
# nodeのバージョンを確認(インストールされているかチェック)
node --version
# v16.16.0 みたいにバージョン情報が出力されたら成功！

# yarn を全体にインストール
npm i yarn -g
# yarnのバージョン情報を確認(インストールされているかチェック)
yarn --version
# 1.22.19 みたいにバージョン情報が出力されたら成功

For Windows10

Windows PowerShell（管理者として実行する）でWSL2をインストール

wsl --install

Windows Terminalを以下よりインストール

# コマンドからURLにアクセスできるようにする
sudo apt-get install curl
# パスワードはWSL2で設定したものを入力
# nvm インストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# nvm 有効化 (このコマンドがエラーになる場合: WindowsTerminal を閉じ、再度開いて次の手順へ)
source ~/.bashrc
# node(安定版)のインストール
nvm install --lts
# nodeのバージョンを確認(インストールされているかチェック)
node --version
# v16.16.0 みたいにバージョン情報が出力されたら成功！

# yarn を全体にインストール
npm i yarn -g
# yarnのバージョン情報を確認(インストールされているかチェック)
yarn --version
# 1.22.19 みたいにバージョン情報が出力されたら成功

念の為

npmのインストールとcreate-react-appのインストール

npm install -g npm
npm install -g create-react-app

参考サイト