はじめに

今後プロジェクトで使用するであろうReactとChakra UIを素振りする。

インストール

CRAで始める

$ npx create-react-app chakra-ui-example --template typescript --use-npm
$ cd chakra-ui-example
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
+     <ChakraProvider> 
           <App />
+      </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

起動

npm run start

wattanx

Storybookを導入する

プロジェクトのルートにいるのを確認したのち、コマンドを入力。

$ cd .\chakra-ui-example
$ npx -p @storybook/cli sb init

めっちゃ時間がかかります。

.envに下記を追加

.env

SKIP_PREFLIGHT_CHECK=true

下記コマンドでstorybookを起動。

$ npm run storybook

wattanx

IIS上にデプロイできるか試す。

前提

Windows Serverの環境を用意する。(検証時はWindows Server 2019)
IISをインストールしている。

npm run build でビルドする。
buildフォルダをzipファイルにして、検証用サーバーにコピーする。
検証用サーバーで②のzipファイルを解凍する。(C:\inetpubとかに移動させておく)
検証用サーバーにて、IISマネージャーを開く。
サイトを右クリックして、Webサイトを追加を選択。
サイト名：react-app、物理パス：C:\inetpub\buildとする。(3で移動させている)
ポート番号は3000にする。(FWで穴はあけておく)

検証用サーバーのポート番号：3000にアクセスすると、配置したサイトが見れる。

URL Reriteの設定

SPAのため、下記のようなURL Rewrite設定が必要である。

Web.config

<system.webServer>
     <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*"/>
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
          </conditions>
          <action type="Rewrite" url="/index.html"/>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

wattanx

React-Iconsを入れてみる

fontawesomeのiconを利用したいので、react-iconsを導入してみる。

バンドル後のファイルサイズ
全体: 473.9KB

10個iconをimportして使った場合
全体: 483.43KB

wattanx

サブディレクトリを指定してデプロイできるか

https://myweb.com/Chakra
みたいな感じにしたい

package.jsonにhomepage: "/Chakra"を追加する
React-Routerのbasenameを設定

App.tsx

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { Login } from './pages/Login';
function App() {
  return (
    <Router basename="/Chakra">
      <Header />
      <Route exact path="/">
        <Redirect to="/login" />
      </Route>
      <Route path="/login">
        <Login />
      </Route>
    </Router>
  );
}

export default App;

URL Rewriteの設定が他と被らないようにしておく。

Web.config

<system.webServer>
     <rewrite>
      <rules>
        <rule name="Chakra" stopProcessing="true">
          <match url=".*"/>
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
          </conditions>
          <action type="Rewrite" url="/index.html"/>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

wattanx

ビルド時にサブディレクトリのパスを変える

上記の方法でサブディレクトリの指定方法はわかった。
環境ごとに分けたい場合は、どうするか。

package.jsonのhomepage: "/Chakra"を削除
環境変数を分けるため、env-cmdをインストール

$ npm install env-cmd --save

Routerのbasenameを<Router basename={process.env.PUBLIC_URL}>に変更
staging環境用の設定をする。
.env.stagingファイルを作成し、下記の設定をする。

.env.staging

PUBLIC_URL="/Staging"

package.jsonのscriptsに"build:staging": "env-cmd -f .env.staging npm run build"を追加
npm run build:stagingでパスが/Stagingになったファイルが生成される。

このスクラップは2021/10/30にクローズされました