如果对你有帮助，就点个赞吧~

本文主要介绍了在拥有阿里云服务器后，如何将React项目部署到服务器上并供公网用户通过IP和域名访问

文章目录

• 1. 将代码从Github上克隆到服务器上
• 2. 安装Node，安装项目依赖包并Build React项目
• • 2. 1 更换npm下载源为国内镜像，加速下载
  • 2.2 安装项目依赖包
  • 2.3 build 你的React项目
• 3. 通过Nginx将端口开放出来
• • 3.1 找到Nginx配置文件位置
  • 3.2 新建项目Nginx配置
  • 3.3 重新加载Nginx配置，启动Nginx
• 4. 增加安全组规则
• 5. 访问验证

1. 将代码从Github上克隆到服务器上

关于如何在云服务器上安装新版本的Git，请参考：CentOS 7 安装新版本的Git
关于如何从Github克隆代码到云服务器，请参考：使用ssh的方式从Github克隆代码

2. 安装Node，安装项目依赖包并Build React项目

关于如何在云服务器上安装新版本的Node.js，请参考：CentOS 7 安装新版本的Node.js

2. 1 更换npm下载源为国内镜像，加速下载

为了避免使用默认源下载依赖包过于缓慢的情况，可以先运行以下命令将下载源更换为国内腾讯云镜像：
npm config set registry http://mirrors.cloud.tencent/npm/
检查镜像设置是否成功：
npm config get registry
如果设置成功，可以在返回结果中见到tencent（腾讯）关键字
（也可以选择替换成阿里云镜像npm config set registry https://registry.npmmirror）

2.2 安装项目依赖包

在react项目中运行以下命令安装运行react项目需要的包：
npm install

2.3 build 你的React项目

在项目根目录下运行以下build命令，生成供生产环境使用的项目文件
npm run build
运行完成之后，在项目根目录下会出现build文件夹。

3. 通过Nginx将端口开放出来

关于如何在云服务器上安装新版本的Nginx，请参考：CentOS 7 安装新版本的Nginx

3.1 找到Nginx配置文件位置

运行以下命令找到Nginx配置文件存放目录：
nginx -t
没有特殊改动的情况下，终端将输出如下信息：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

则，我们可以知道Nginx配置文件存放目录为：/etc/nginx/
运行命令进入服务器配置文件目录：cd /etc/nginx/conf.d

3.2 新建项目Nginx配置

在/etc/nginx/conf.d下新建配置文件：vim 自定义文件名称.conf
写入如下内容：

server {
    listen      80;
    server_name 你的服务器IPv4地址;

    location / {
        root    /usr/project/webbuilder/build;
        index   index.html index.htm;
    }
}

server {
    listen      80;
    server_name 你的网站域名（如果有的话）;

    location / {
        root    /usr/project/webbuilder/build;
        index   index.html index.htm;
    }
}

上述配置文件进行了允许使用域名访问和允许使用IP访问你的网站

3.3 重新加载Nginx配置，启动Nginx

依次运行以下命令，刷新Nginx配置，启停Nginx：

• nginx -s reload
• systemctl stop nginx
• systemctl start nginx

4. 增加安全组规则

我们还需要允许外网对云服务器80端口的访问才能通过外网访问网站
找到你的云服务器"网络与安全/安全组"，然后找到安全组添加/配置规则的选项，设置如下参数的新规则：

协议类型: 自定义TCP（或者HTTP）
端口范围：80/80
授权对象：0.0.0.0/0

5. 访问验证

现在可以在浏览器中输入你的云服务器IP或者网站域名访问你的React网站了！