本文主要介绍了在拥有阿里云服务器后，如何将React项目部署到服务器上并供公网用户通过IP和域名访问，同时在nginx中使用gzip配置优化用户访问加载速度


文章目录

  • 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. 访问验证
  • 6. 开启gzip，加速网站访问加载速度



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.com/npm/ 检查镜像设置是否成功：
npm config get registry 如果设置成功，可以在返回结果中见到tencent（腾讯）关键字
（也可以选择替换成阿里云镜像npm config set registry https://registry.npmmirror.com）

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访问你的网站

如果不同server_name使用同样的配置，可以直接在sever_name一行写多个，使用空格分隔，最后以分号结束，如下：

server {
    listen      80;
    server_name 你的服务器IPv4地址 你的网站域名（如果有的话）;

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

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网站了！

6. 开启gzip，加速网站访问加载速度

如果我们的网站项目文件过多过大，可能会导致build之后的js文件过大，用户在访问网站时加载会因为要网络请求大文件而速度巨慢体验巨差。

可以查看build之后项目/build/static/js目录下各个文件的大小来确认文件大小，或者用F12在chrome dev tools -> Network中查看请求的文件大小。

优化项目性能的方法有多种，因为我们是用nginx作为web服务器的，所以可以直接在nginx的配置中打开gzip压缩文件大小，提高加载速度。

需要增加的代码如下，添加到server的{}之中：

gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

添加完毕后我们完整的配置文件/etc/nginx/conf.d/自定义文件名称.conf内容如下：

server {
    listen      80;
    server_name 你的服务器IPv4地址 你的网站域名（如果有的话）;

	gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

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