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
• 至此上线配置流程已经完成了，有碰到问题的可以一起探讨，这是我第一次上线尝试。