react项目上线配置流程

react项目、阿里云服务器、nginx代理、linux，xftp跟xshell工具，用来跟远程服务器交互，xftp上传本地文件到服务器，xshell服务端命令行

服务器端，我用的Linux、ubantu，没有图形化，只有命令。
首先你要有个react项目，这个很简单，npm install -g create-react-app、create-react-app your-app-name，项目创建完成后，cd your-app-name，npm run start启动，访问http://localhost:3000.你就可以直接使用这个项目了，来测试上线流程，或者加些自己的骚操作。
打包，npm run build，在你的根目录的会生成一个对应的build文件夹，里面就是你打包的内容，需要上传的服务器的代码。注意当你打包完，可以在浏览器访问下你的html文件看是否访问到，如果空白的话，需要修改下package.json文件，因为html的资源加载路径不对，找不到。
我前端用到了node跟mysql数据库，来写接口，要让项目跑起来就需要在服务端也有node跟你的sql，在服务器端安装mysql跟node。
node，将node代码上传到服务器端，cd 到你在服务器端的文件夹下，直接node index.js，node服务就会启动，但是这只是一次性的，它不会一直在后台运行，你放在服务器的目的就是为了随时访问，了解下 nodehub https://www.cnblogs.com/crazycode2/p/11279980.html，执行该命令服务就会一直运行在后台进程。
mysql，在服务器端安装了mysql后需要将本地的数据库同步到服务器。https://www.cnblogs.com/anthony-wang0228/p/11480213.html，本地连接远程到服务器的mysql，之后将本地的数据库传输到远程数据库。
xftp上传前端项目到服务器，

选中后选择传输就可以把本地的文件上传到远程。

现在远程服务器就存在react项目代码了，下一步要能访问到该项目。就需要nginx代理配置。当你访问某个url时候，就会返回给你对应的html文件。可以将 / 代理成你的入口。https://blog.csdn.net/qq_23832313/article/details/83578836，安装nginx，这是我的配置。注意server要放在http里面。当访问 / 时，就会找我的build目录下的index.html文件。我配置的时候碰到了个问题，不论我怎么修改配置但是配置的就是不生效，百度了好久发现有个配置需要注释，因为没有这个东西nginx找不到。# include /etc/nginx/sites-enabled/*;需要注释这行。
现在你访问的公网ip没错的话就是访问的你的react项目。
我相信大部分人都会用到react-router，你正常点击访问的时候都是没事的，但是当你在地址栏，回车或者直接输入你的路径会出现404，因为你只是代理了/，当访问xxx.xxx.xxx/login,nginx找不到/login，在location加点东西就能访问到。

https://www.cnblogs.com/boundless-sky/p/9459775.html
至此上线配置流程已经完成了，有碰到问题的可以一起探讨，这是我第一次上线尝试。

react项目上线配置流程相关推荐

在react项目中配置alias-[webpack配置]
alias是webpack中用来配置路径别名的,在路径嵌套特别深的项目中,对于路径的导入非常友好. webpack中的alias create-react-app搭建的react项目中配置alias ...
项目上线的流程 shell基础-进阶 mysql安装数据库基本操作 LAMP环境的部署 linux配置数据库远程连接
三,项目上线流程(必须掌握) 1,服务器选配购买项目上线服务器必须是外网服务器一般服务器有两种:购买真实服务器,购买虚拟服务器购买真实服务器一次性成本过高所以现在基本都是云服务器以后以阿里云 ...
软件项目上线完整流程
初入互联网行业的小伙伴可能对软件的发布流程很好奇, 今天我们就来了解一下软件项目上线的完整流程. 根据软件生命周期并结合当前企业的实际情况, 企业中的具体流程如下, 包括了各个环节所需要的交付及产出物 ...
项目上线简化流程介绍
最近上线因为高并发多线程定时任务引发了一次事故问题,当上线完成,且将事故处理完后回顾了下本次事故原因. 1.后半夜上线,人都比较困乏,极容易产生疏忽得情况. 2.上线业务较多,上线后测试点很多.与测试 ...
搭建react项目并配置路由
一条龙服务: 1.全局安装create-react-app npm install -g create-react-app 2.创建项目,安装依赖 create-react-app my-react- ...
了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处好处坏处使用模块化CSS实现JSS 安装插件在React项目中的tsconfig.json中添加配置 vscode项目中 ...
记一次完整的新浪云部署nodejs项目上线完整流程及填坑处理!
工欲善其事,必先利其器.在开始本次部署新浪云nodejs项目之前,请先做好以下准备工作: 1.注册一个新浪微博账号! 2.使用注册好的新浪微博账号,登录新浪云网站:http://www.sinaclo ...
react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决最近在写react项目,配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解.直到第二天豁然开朗,才发觉就这?? 问题描 ...
阿里云自动java和mysql数据库_阿里云服务器之基于Linux系统部署上线JavaWeb项目和连接MySQL数据库（从购买云服务器到发布JavaWeb项目全套详细流程）...
阿里云服务器之基于Linux系统部署上线JavaWeb项目和连接MySQL数据库(从购买云服务器到发布JavaWeb项目全套详细流程) (仅此纪念人生第一篇学习博客) 前阵子接了一个小小的JavaWe ...
前端项目搭建部署全流程（一）：搭建React项目
1.前言前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打 ...

react项目上线配置流程

react项目上线配置流程相关推荐

最新文章

热门文章

react项目 上线配置流程

react项目 上线配置流程相关推荐

最新文章

热门文章

react项目上线配置流程

react项目上线配置流程相关推荐