react+nodejs+mysql全栈部署服务器初体验！

         踏入职场已经一年多了，每天工作任务也就是写写页面、改改bug，其实收获的东西少之又少，毕竟一个页面中大部分组件都是调用的现有的公共组件。

        今天，自己准备了很久的事情终于实现了，那就是自己实现一个全栈的项目并部署到服务器。对于资深程序员来说这都是小儿科，但对于一个非科班出身、自学、入职一年的小白来说还是很有难度的，期间也是遇到各种问题让人快要崩溃。

        不过结果总是好的，最后还是成功了。个人认为，把前端+后端+数据库串起来是能力提升的一个跨越点，因为只有把这一条路走通了，才能开辟后续自己做各种项目的道路（试问哪个小白程序员没幻想过自己独自写一些页面、部署到服务器让外人也能访问，反正我觉得很自豪哈哈哈哈哈）。

        话不多说，上硬菜！（文末有福利噢！）

1.买服务器

        服务器有国内、国外的，国内的像阿里云、腾讯云，国外的一大堆我用的racknerd。当时最卡死买的是阿里云的，优惠价一年82，结果到部署的时候才发现还需要备案（苍了天！）。一查才知道国内的好像都得备案，不然根本没法访问，而且阿里云可以七天无理由退，于是就转头买了国外的，哪怕慢了点。我当时是搜到了一些便宜的，毕竟第一次只是尝试，对这些性能啥的要求不高，有需要的可以看下便宜racknerd服务器（国外的好像都不能退，谨慎！）

（1）服务器配置

        买完之后它会给你发邮件，包括公网ip，控制面板的网址、用户名、密码（这个用来重启服务器什么的），ssh连接的用户名、密码、端口号（这个用来远程连接操作服务器）。

      （2）安装宝塔

        宝塔是一个可视化的平台，可以更方便的使用我们的服务器。这里需要下载一个xshell7来连接我们的服务器，下载后用上述的ssh的信息登录链接，然后执行命令下载宝塔

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

        执行后会自动安装宝塔，大概5-10分钟，出现宝塔面板的登录信息即为安装成功。（面板登录地址、用户名、密码），参考安装宝塔

（3）宝塔内部软件安装

根据需要在软件商店安装自己需要的软件，比如我安装了mysql、php自带的那些、pm2管理器、nodejs版本管理器、nginx。

2.前端部署

（1）打包前端项目

react项目yarn build生成build文件（打包前记得把自己请求接口的地址改为服务器地址），并压缩。

（2）上传前端项目

宝塔-文件，找到/www/wwwroot/目录新建一个文件夹存放前端代码，把build压缩包上传到此，然后解压

（3）创建网站

        宝塔-网站-添加站点，输入自己买的域名（没域名可以输入自己服务器公网ip），选择自己代码的目录。

        此时访问服务器地址即可成功访问前端页面。

3.后端部署

（1）把后端文件整个压缩，上传至宝塔-文件中，位置可选择与前端代码同级（记得把数据库的host改为服务器的而不是localhost）

（2）软件商店找到安装的pm2管理器、nodejs版本管理器，nodejs版本管理器选择下载node版本，并在pm2管理器中选择相同的node版本，添加项目按需填写。提交后如果没显示监听端口，需要手写。

4.数据库部署

        宝塔-数据库-添加数据库，用户名、密码、库名什么的可与本地开发时保持一致，不一致的话记得更改后端中数据库连接信息。最后把本地数据库导出并在服务器中执行即可，记得开一下服务器的数据库权限，默认为本地，可以改为指定ip。

        此时，全栈部署已完成，以下是一些细节：

        1.向接口地址、端口号、数据库连接信息这些字段在生产环境和开发环境是不同的，所以可以把这些内容存在环境变量中，就不需要每次改了。

        对于react，可在根目录新建两个文件，，代码中可从process.env.REACT_APP_API_URL等字段获取其中的信息，开发和生产环境会自动分辨。（这里字段命名必须是REACT_APP开头）

        对于nodejs，可引入，同样在根目录新建两个环境变量文件，只是这里需要手动判别在生产或者开发环境，，这个NODE_ENV的值是启动项目的时候塞进去的，这个在package.json中配置

        到此，一个全栈的部署就实现了，本次总结较为大概，一大半也是为了给自己做个记录，以防哪天给忘了。各位大佬有什么见解也欢迎评论区交流哈~便宜机场