概要
CMS（管理画面）を作る際に、Reactを採用しようと思い、構築方法をメモっておく。
準備
最終的には、docker化しますが、ひとまずローカルでも実行できるように各種ライブラリを入れておく。
Nodeインストール
バージョンを変更できるように「nvm」でインストールすることにする。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
バージョンを切り替える場合は、インストールして変更する。
# インストール可能なバージョンを調べる
nvm ls-remote
# 指定のバージョンをインストールする
nvm install "指定バージョン"
# バージョンを切り替える
nvm use "指定バージョン"
# デフォルト設定を変更する
nvm alias default "指定バージョン"
# 現在のバージョンを確認する。
nvm current
nodeとnpmのバージョンを確認してみる。
node -v
v20.19.5
npm -v
10.8.2
Reactインストール
下記コマンドで、React+Typescriptのテンプレートをインストールする。
npm create vite@latest src -- --template react-ts
起動してみる。
cd src
npm install
npm run dev
> src@0.0.0 dev
> vite
VITE v7.1.12 ready in 110 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ビルドしてみる。
npm run build
distフォルダが作成されました。
SCSSを使えるようにする
「scss」フォルダを作成して、CSSのファイルを移動させ、リネームしてみます。
App.css → ./scss/App.scss
index.css → ./scss/index.scss
ファイル名を変更したので、読み込んでいる箇所も修正する。
// App.tsx
import './scss/App.scss'
// main.tsx
import './scss/index.scss'
ビルドしてみるとエラーになりました。
$ npm run build
[vite] Internal server error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.
指示にしたがって「sass-embedded」をインストールする。
npm install -D sass-embedded
ビルドしてみる。
$ npm run build
> src@0.0.0 build
> tsc -b && vite build
vite v7.1.12 building for production...
✓ 32 modules transformed.
dist/index.html 0.45 kB │ gzip: 0.29 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-BbbeoXQR.css 1.42 kB │ gzip: 0.72 kB
dist/assets/index-CTMh3xbC.js 195.25 kB │ gzip: 61.13 kB
✓ built in 440ms
問題ないようです。
_variables.scss
変数で共通定義できるように「./scss/_variables.scss」を配置する。
// サンプルです...
$page-max-width: 1200px;
$base-padding: 2rem;
$font-size-base: 1.0rem;
$line-height-base: 1.8;
$link-hover-color: #646cffaa;
$react-hover-color: #61dafbaa;
App.scssに上記ファイルを読み込んで、変数を使ってみる。
// Imports _variables.scss
@use 'variables';
#root {
max-width: variables.$page-max-width;
margin: 0 auto;
padding: variables.$base-padding;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
&:hover {
filter: drop-shadow(0 0 2em variables.$link-hover-color);
}
&.react {
&:hover {
filter: drop-shadow(0 0 2em variables.$react-hover-color);
}
}
}
...
react-router-dom
各ページごとにURLを変更してComponentも分けたいので「react-router-dom」をインストールする。
npm install react-router-dom
サンプルとして下記２ページを作成します。
./pages/HomePage.tsx
function HomePage() {
return (<>
<h1>Hello World.</h1>
</>);
}
export default HomePage
./pages/SamlePage.tsx
function SamplePage() {
return (<>
<h1>This is Sample Page.</h1>
</>);
}
export default SamplePage
main.tsxに「react-router-dom」を組み込む
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './scss/index.scss'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)
App.tsxにも「react-router-dom」を組み込み、ルーティングを定義する。
import { Routes, Route, Link, useLocation } from 'react-router-dom'
import './scss/App.scss'
import HomePage from './pages/HomePage'
import SamplePage from "./pages/SamplePage";
function App() {
const location = useLocation()
return (
<>
{/* ナビゲーションバー */}
<nav>
<Link
to="/"
style={{
color: '#999',
backgroundColor: location.pathname === '/' ? '#eee' : 'transparent',
fontWeight: location.pathname === '/' ? '600' : '400'
}}
>
ホーム
</Link> |
<Link
to="/sample"
style={{
color: '#999',
backgroundColor: location.pathname === '/sample' ? '#eee' : 'transparent',
fontWeight: location.pathname === '/sample' ? '600' : '400'
}}
>
サンプル
</Link>
</nav>
{/* ページコンテンツ */}
<main>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/sample" element={<SamplePage />} />
</Routes>
</main>
</>
)
}
export default App
サブフォルダへの配置について
サイト管理画面なら、別ドメインなどで、配置した方が良さそうですが...
どうしても同一サイトに配置してほしいなどの諸事情がある場合もあるかも？
サブフォルダ（/cms）にSPAを設置するなら、「main.tsx」ファイルの「BrowserRouter」に「basename」属性を追加すると対応できそうです。
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter basename="/cms/">
<App />
</BrowserRouter>
</StrictMode>,
)
また、「vite.config.ts」ファイルにも設定の追加が必要なようです。
// https://vite.dev/config/
export default defineConfig({
base: '/cms/', // ← ここを追加する!!
plugins: [react()],
})
・TOPページ
・Sampleページ
http://localhost:5173/cms/sample
とりあえず、ベースとなる環境は整ったようです。
参考サイト
・サブディレクトリにビルドしたReactをアップする方法
https://zenn.dev/sa_tsuki/articles/5927098ca2328e
・Vite index.html を移動させて開発ディレクトリを作りたいときの Tips
https://chaika.hatenablog.com/entry/2022/12/08/083000
以上