Zenn
😸

【React】レンタルサーバーで公開する

2022/12/08に公開
React
tech

概要

Next.jsとか使わずにReactだけで何かアプリケーションを作成したとして、それをレンタルサーバーで公開するまでの手順をメモ。
自分が借りてるレンタルサーバーはさくらサーバーのスタンダードプランです。

手順

そんなに長い記事でもないのでサクッとメモ。

プロジェクトを作成

npx create-react-app test-app

作成したプロジェクトに移動して、確認

cd test-app
npm start

確認が出来たら公開作業。
package.jsonを編集。homepageという項目を追加して、公開するURLを入れる。
例としてreactというフォルダを作ってそこにファイルをアップするので、下記のURLとします。

{
　"homepage": "https://〇〇〇.sakura.ne.jp/react/",
  "name": "acctest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^7.6.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
  },
}

次はpublickフォルダに「.htaccess」のファイルを作成して下記を設定する。

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

実際の画像は下記。

そして下記のコマンドでビルドします。

npm run build

buildというフォルダが作成されるので、その中身をFTPでアップロードする。
buildというフォルダを上げる必要はない。

まとめ

ざっくりメモ。
Next.jsもできたっけかな。取り急ぎReactでの案件だったのでメモ。

Discussion