使用阿里云服务器部署React项目流程

1.前言

本文主要分享如何使用阿里云服务器部署React前端代码，并分享一些坑点。实际上使用服务器部署前端代码非常简单，只要跑通一次即可掌握其大致方法。使用其他服务器部署项目的方法与本项目类似，一些具体服务器可能在防火墙等方面存在特殊要求，具体问题需要具体分析。

2.服务器Nginx环境配置

Nginx是一个流行的开源的Web服务器软件，也可以用作反向代理服务器、负载均衡器、HTTP缓存和虚拟主机等。Nginx以其高性能、稳定性、丰富的功能集和低资源消耗而闻名。它通常用于大型网站和Web应用程序，以处理高流量和高并发请求。本文使用Nginx来实现项目部署。

使用如下命令查看服务器是否配置Nginx环境

whereis nginx

若出现下图所示，给出nginx安装的相关目录，则证明服务器已安装nginx

若服务器未安装nginx，可以使用如下命令安装nginx

yum install -y nginx

使用如下命令启动nginx

nginx

若未报错证明启动成功

从浏览器访问公网IP，出现Welcome to nginx或centos主页等都证明运行成功

若出现无法访问此网站页面，可以参照下文进行排查（一般可能为服务器安全组未加入Nginx默认的80端口）

【Nginx】启动成功无法访问网页（完整的排除方案）_nginx启动成功但是无法访问-CSDN博客

使用如下命令可以停止nginx服务

nginx -s stop

3. 编辑项目软件包位置

进入Nginx配置文件所在目录

使用如下命令访问nginx.conf文件

vim nginx.conf

注意server中的root项，将其修改为home/projectname(你的项目名称)/dist，如下图

如果不会使用vim编辑，可以参考下文

Vim编辑器入门指南：安装、基本操作和高级技巧详解 | 适用于Linux系统_安装vim-CSDN博客

修改好后，/home/projectname/dist就是项目所在位置，此时重新启动nginx，会出现404，因为项目所在的文件夹还没有创建

使用

cd /home
mkdir projectname

创建项目的目录

4. 部署React项目

在本地React项目的根目录下，使用命令行：

npm run build

build出项目的可部署dist文件夹

这个步骤可能会出现报错，原因是build不容忍程序中可能存在的错误，需要根据其提示位置及内容修改程序

得到dist文件夹后，在根目录下的命令行中使用:

scp -r [你的dist文件夹位置，一般为dist/] root@[你的服务器公网ip]:/home/projectname  

命令成功后，进入服务器的/home/projectname目录，可看到dist文件夹

此时，重启nginx，访问服务器公网ip，即可看到项目的页面，项目成功部署

5. 一些易错点及修正

问题1：对于部署完的网页，前端刷新浏览器后会报错404

解决1：参考下述文章

解决nginx部署前端项目后刷新浏览器报错404的问题-CSDN博客