React 项目部署在 Nginx
背景：
假如我要部署到 bbs_system_h5_dev 这个网站下，
期望网址是：http://192.168.135.89/bbs_system_h5_dev
这里的子网站名称是：/bbs_system_h5_dev
image.png
- 指定网站基础地址
作用：在构建时，需要帮助构建工具关联资源文件的路径
<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
- 配置 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文件名。
- 修改 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 "******************************************"