[리액트] basename (context root) 설정 방법 http://example.com/basename

프로젝트를 특정 사이트의 하부 사이트로 배포 할 경우 아래와 같은 주소를 갖도록 하려면, 서버에서만 설정하면 리엑트가 동작하지 않는다. 리액트에서는 css, js등을 루트 밑에 있는 것으로 알고 연결하기 때문이다. /something.css 

http://example.com/sub-site  와 같이 설정하는 방법은 

 

1. package.json 에 "homepage": "sub-site" 추가   (첫번째 섹션에 적당히 추가.. "name" 아래에 넣어 주면 된다.)

{
  "name": "react-sub-site",
  "homepage": "sub-site",
  "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",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

2. route.js 설정

<Router basename={'/demo'}>
  <Route path='/' component={Home} />
</Router>

3. 참고로 nginx에서는 /nginx.conf에 location 설정 추가한다. /path/of/sub-site/ 는 react 배포 위치

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location /sub-site/ {
                alias /path/of/sub-site/;
                index index.html index.htm;
        }