iis에서 리액트앱 배포하기(2)

react-router-dom : v6

 

배포까지 성공하고 성공적으로 개발중에 문제가 발생했는데, 그건 바로 react-router-dom을 설치하여 페이지 이동할때 문제다.

npm i react-router-dom

을 설치한뒤에 테스트를 해보고자

import React from "react";
import {
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/about" element={<About />}></Route>
          <Route path="/users" element={<Users />}></Route>
          <Route path="/" element={<Home />}></Route>
        </Routes>
      </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

정삭적으로 적용하고, Home라우터와 About Users 라우터로 이동하는건 잘되는데 

여기서 Users라우터나 About 라우터로 이동하여 http://내도메인/users로 되어 있는 상태에서 새로고침을 하면, 

404에러를 보게 된다 ㅠㅠ. 개빡쳐서 방법을 이것저것 찾아보니까 

 

먼저, iis에 웹 플랫폼 설치 관리자로 들어가서 URL 재작성 모듈을 먼저 설치한다

 

그런뒤에 내 앱 즉, 프로젝트의 루트 폴더경로 build파일로 간뒤에

web.config파일 생성

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <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="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

mach url이 들어오는 모든 조건을 / 절대경로로 rewrite해준다는것 같다. 

그런뒤에 다시 들어가면 성공!!

새로고침 해도 잘됩니다 방긋 ^^

 

npm run build하면 web.config가 없어지네...? ㄷㄷ 이거 할때마다 추가 해줘야하나 ...

:: 방법은 public폴더에 web.config파일 만들어서 build하면 됨.