前后端分离|react项目部署到服务器

关键字：宝塔页面、域名

成果：输入xxxx.qqiuklele.cn网址就能访问我的项目。

经历的步骤：
1.首先，我也是第一次部署项目，所以我也是百度，谷歌。最终照着一篇教程来做：《React项目部署在阿里云服务器ECS》 虽然我购买的是阿里云的轻量级应用服务，其实都差不多。如果你购买了服务器，却什么都没做过的，比如购买域名并部署上了你的博客，很推荐您看这篇教程。
因为我就遇到了问题，我在xshell上输入了命令启动了nginx，但是输入域名后，只有以下页面：

因为我是购买了域名的，并且将其解析到我的ip地址上了，所以nginx会变得不认识我的ip地址，不知道这个ip地址是代表哪个域名。那我是怎么反应过来的呢，是我无意打开我的博客，我的博客竟然显示上了welcome nginx！

2.接下来我突然有思路了，我先去给我的项目弄个新域名。所以去到自己域名解析的页面，然后添加记录就好了。

3.进入宝塔页面，在站点选项页面里：添加站点，就是把刚刚弄好的xxxxx.qqiuklele.cn域名添加进去，顺便它会自动帮你创建一个文件夹，在www/wwwroot里。

4.然后把自己npm run build后的build文件夹的内容放进这个创建好的文件里，可以借助xftp将本地文件传到服务器上。

5.再找到文件夹，进入路径：/www/server/panel/vhost/nginx/*.conf

server {
    listen       80;                            
    server_name  xxxxx.qqiuklele.cn; //你的域名           
 
    location / {
        root   /www/wwwroot/xxxxx.qqiuklele.cn;      
        index  index.html;                      
    }
 
     
    location = 404.html {
        root   /www/wwwroot/xxxxx.qqiuklele.cn;  //刚刚那个文件的目录
    }
}

增添如上这个server记录

6.保存一下吧，在输入自己的域名，你就会发现，我们的项目成功在线上运行起来了！

参考：https://blog.csdn.net/qq_43319749/article/details/106335281