专栏首页写代码和思考React 项目部署在 Nginx

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

  1. 配置 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文件名。

  1. 修改 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 "******************************************"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android开发 - 汉字转拼音首字母

    工作中经常会遇到的一些排序问题,比如 按汉字的拼音首字母排序,比如人名排序等,就要用到下面的方法了,思路:

    zhangyunfeiVir
  • Android开发(28) 绘制无限加载的温度曲线

    实现一个温度变化曲线 该曲线的数据时不断加载的,如下图。 支持手势,当不断向左拖动时,图形曲线要随着拖动移动,并在拖动到边界时需要加载更多数据。

    zhangyunfeiVir
  • Go 学习笔记4 - Go Module 模块及依赖管理

    在写代码过程中,总要引用其他的库而产生功能模块的依赖。Go 在 版本1.1 开始提供 Module 模块化的支持。在1.4 版本后 鼓励所有用户从其他依赖性管理...

    zhangyunfeiVir
  • 关于立即调用的函数表达式(IIFE)

    在 JavaScript 中,圆括号 () 是一种运算符,跟在函数名之后,表示调用该函数。比如,print() 就表示调用 print 函数

    Leophen
  • pl/sql developer连接ORACLE数据库(64位)

    PL/SQL不提供直连oracle(64位)的工具,在没有安装oracle(64位)客户端的情况下,必须下载instantclient-basic-win32工...

    用户5640963
  • 剑指offer--栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈...

    AI那点小事
  • DNSPod用户满意度调查

    ? 感谢您对DNSPod长期的关注和支持 ? 追求用户满意是我们的一贯宗旨 ? 为了给您提供更优质的产品和服务 ? 敬请把您宝贵的意见反馈给我们吧 ? (点击...

    腾讯云DNSPod团队
  • MySQL架构组成、逻辑模块组成

    Mysql逻辑结构可以看成是二层架构,第一层通常叫做SQL Layer,在mysql数据库系统处理底层数据之前的所有工作都在这一层完成的,包括权...

    L宝宝聊IT
  • hdu 3948 Portal (kusral+离线)

    Portal Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja...

    Gxjun
  • SAP Spartacus默认的货币列表currency是从源代码什么地方读取的

    答案是在这个文件里配置:C:\Code\SPA\spartacus\projects\core\src\site-context\config\default-...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券