React 项目部署在 Nginx

背景：

假如我要部署到 bbs_system_h5_dev 这个网站下，

期望网址是：http://192.168.135.89/bbs_system_h5_dev

这里的子网站名称是：/bbs_system_h5_dev

image.png

1. 指定网站基础地址

作用：在构建时，需要帮助构建工具关联资源文件的路径

<link href="/bbs_system_h5_dev/static/css/1.dbb56e42.chunk.css" rel="stylesheet">

当在本地file:// 方式时（比如本机双击index.html打开），可以指定为：./

当在远程地址时，指定为：/子站名

方式1：修改 package.json

"homepage": "http://192.168.135.89/bbs_system_h5_dev",

方式2：在构建是的指令传入参数：

PUBLIC_URL=/bbs_system_h5_dev yarn build

2. 配置 react 路由的 basename

作用：Router 的 basename 帮助路由跳转时定位网址，默认是 /

当使用了react路由 后，要指定子站点的名称，方式如下：

修改 主路由的 basename 等于你的网站名称

<Router basename='/bbs_system_h5_dev'>

<div className="App">

<Switch>

<Route exact path="/" component={Login} />

<Route path="/index" component={Main} />

<Route path="/main" component={Main} />

<Route path="/login" component={Login} />

<Route component={Login} />

</Switch>

</div>

</Router>

===================

image.png

或者代码控制： 通过环境变量 在构建时传入参数 到打包环境，比如 process.env.REACT_APP_ROUTER_BASE_NAME，示例如下

console.log(process.env.REACT_APP_ROUTER_BASE_NAME is ${process.env.REACT_APP_ROUTER_BASE_NAME});

const routerConfig = !process.env.REACT_APP_ROUTER_BASE_NAME?{}:{

basename:process.env.REACT_APP_ROUTER_BASE_NAME

};

class App extends Component {

constructor(props){

super(props);

}

render() {

return (

<Router {...routerConfig}>

<div className="App">

<Switch >

<Route exact path="/" component={Login} />

<Route path="/index" component={Main} />

<Route path="/main" component={Main} />

<Route path="/login" component={Login} />

<Route component={Login} />

</Switch>

</div>

</Router>

);

}

}

export default App;

在 jenkins时 或者 命令行构建使用指令：

PUBLIC_URL=/bbs_system_h5_dev REACT_APP_ROUTER_BASE_NAME=/bbs_system_h5_dev yarn build

备注：以上的指令出入了参数到构建环境中。

3） 执行构建 yarn build ,拷贝 输出的文件到 nginx下。注意处理 build文件名。

4. 修改 Nginx 配置文件 nginx.cnf

注意下面 try_files 引导 $uri 到index.html，

$uri指代 http://192.168.135.89/bbs_system_h5_dev/main/account_manager

中的 /main/account_manager 的部分

示例如下:

信息采集系统 h5

location /bbs_system_h5_dev {

try_files $uri /bbs_system_h5_dev/index.html;

root /usr/local/nginx/html;

autoindex on;

autoindex_exact_size off;

}

5）重启 nginx

Jenkins 构建示例：

http://192.168.135.84:8080/view/%E5%85%B6%E4%BB%96/job/bbs_system_h5/

部署后示例：

http://192.168.135.89/bbs_system_h5_dev/

参考：

https://www.jianshu.com/p/51ba2bec00c7

https://blog.csdn.net/weixin_38267121/article/details/80333642

image.png

====================
Send files over SSH 的配置脚本如下：
SSH Publishers

配置项, 请修改WEB_DIR_NAME

WEB_DIR_NAME=bbs_system_h5_dev

############################
NGINX_DIR=/usr/local/nginx/html
############################

先确认 build.tar 的path

REMOTE_DIR=REMOTE_DIR/build.tar

确认 web 网站地址

WEB_PATH=WEB_DIR_NAME

echo "即将部署的文件位于：{WEB_PATH}"

############################

清理部署目标文件夹,并再次创建文件夹

cd WEB_DIR_NAME
mkdir $WEB_DIR_NAME

定位到部署介质，清理临时区，准备解压

cd $REMOTE_DIR
rm -rf build

解压

tar -xvf build.tar

移动解压后的所有文件

mv build/* $WEB_PATH

############################

移除build文件夹

rm -rf build

移除

rm -rf build.tar

记录日志文件

cd BUILD_TAG" > log.html
echo ", BUILD_NUMBER=API_HOST_URL" >> log.html

echo "部署到远程服务器 完毕"
echo "******************************************"