关于打包部署React应用的一些记录

前言

在腾讯云上租了个服务器，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对应资源