React项目部署到阿里云ECS服务器教程

前言

以下流程都是博主本人2019/7月实际操作，React，Nginx均为最新版本，已成功部署，可放心食用。

要注意的一点是我的阿里云服务器是Centos 7，不是Ubuntu·

1. 买服务器

花钱买阿里云服务器。。。

2. 使用putty连接上服务器

这一步看官网的教程：https://help.aliyun.com/document_detail/25434.html?spm=a2c4g.11186623.6.669.49da7394AzkLLR

注意putty在输入密码的时候是不会显示密码的，继续输就行

3. 服务器环境配置

连接后，在putty依次输入以下命令

// 1. 下载ngin依赖
wget  http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 2. 安装依赖
rpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 3. 安装nginx
yum install nginx  
// 4. 启动并开机自启动
systemctl start nginx.service  
systemctl enable nginx.service

然后呢，需要去阿里云服务器里添加上80端口的安全规则

然后通过公网IP就可以直接看到Nginx的欢迎界面了

4. 将React项目上传到服务器上

把build后的文件传到服务器上

windows用户强力推荐winscp来进行操作，非常方便

用这个winscp，可以直接将文件拖到服务器上。。

我放在了usr/local/react/dianping下

4. 配置Nginx

传好了项目之后呢，就得配置nginx了

这一步是将React部署到Nginx上，于是要对Nginx进行配置

首先得找到nginx.conf的路径

可以通过这条命令

nginx -t

这里我的返回结果是

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

所以知晓了配置文件的目录后，进入该目录
有两个比较关键的文件/文件夹

• nginx.conf，这是一个主配置文件
• con.f，这是一个文件夹，里面包含着服务器的独立的配置文件

因此打开con.f，在里面创建服务器配置文件dianping.conf

server {
    listen      80;
    server_name 47.100.2.47;

    location /dianping {
        root    /usr/local/react;
        index   index.html;
        try_files   $uri /dianping/index.html;
    }

    location /mock {
        root    /usr/local/react/dianping;
    }
}

配置好之后，重载一下nginx配置

nginx -s reload

至此大功告成

访问http://47.100.2.47/dianping即可。

为自己的React项目打个小广告，Github地址

有详细的开发文档