前言

在騰訊雲上租了個伺服器，centos7系統，搭建了nginx服務，
用來部署一些個人應用。所以希望多個服務在不同目錄下。
例如有兩個服務test1和test2，訪問時就以 http://{ip}/test1 和
http://{ip}/test1 作為專案根訪問路徑。但是react應用在編譯時以預設以/
作為根路徑，所以編寫程式碼時需要注意一些路徑問題，否則部署時極易出現404問題。

React 應用編寫與打包

React 目錄結構

├── public
│   ├── index.html
│   ├── favicon.ico
│   ├── img #圖片資源
├── src
│   ├── components #元件
│   ├── App.js
│   ├── index.js
├── package.json
├── package-lock.json
 

靜態資源訪問

靜態資源一般放在public目錄下，如圖片、第三方樣式庫（非元件方式）等

• index.html訪問這些資源時需要以%PUBLIC_URL%開頭，如引用favicon.ico
• src下元件訪問public中資源時，不要以 / 開頭，直接以目錄或者檔名訪問。
  如<img src="img/1.jpg"/> 或者 <img src="favicon.ico"/>

元件訪問

• src下的元件相互訪問時，用./相對路徑表示

配置路由

• 路由連結和正常專案一樣
• 但是需要給<BrowserRouter basename="/test1"><App/></BrowserRouter>
  
  路由元件一個basename屬性用來表示根目錄。
• 最後需要給package.json檔案新增一個"homepage": "/test1" 屬性

/*package.json*/
{
    "name": "test1",
    "version": "0.1.0",
    "private": true,
    "dependencies": ... ,
    "scripts": ... ,
    "eslintConfig": ... ,
    "browserslist": ... ,
    "homepage": "/test1"
}

/*index.js*/
//從package.json中獲取homepage
const {homepage} = require("../package.json")

ReactDOM.render(
    <BrowserRouter basename={homepage}><App/></BrowserRouter>,
    document.getElementById('root'));
 

如需要根目錄為/，則將homepage設定為/

nginx配置

server {
    location ^~/test1 {
        alias /usr/local/webserver/nginx/html/test1/;
        try_files $uri $uri/ /test1/index.html;
        index index.html;
    }
}

在原有配置中增加location配置，一個專案對應一個location。
此時404會自動重定向到對應目錄。例如訪問 http:{ip}/test1/hello，
沒有/test1/hello資源時則重定向到 /test1/，
就會訪問到/test1/index.html對應資源