React项目快速部署到服务器上（完整版，避坑必备）

从选购服务器到上线第一个React项目流程

1.购买服务器、域名以及配置服务器

我个人选用的是阿里云的域名和服务器。

下面步骤是购买域名和服务器之后的操作；

1. 打开域名的页面，点击解析，进行配置，讲服务器的地址复制过来，进行与域名进行绑定。

2.如果提示你进行修改DNS，点击域名列表中，需要修改域名后面的管理[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AgVi9EF2-1637164293025)(/Users/bytedance/Desktop/截屏2021-11-12 上午9.44.26.png)]

将上方提示的DNS进行复制进来，如果显示是绿色，那么上方的操作就不需要进行配置。⚠️ 修改DNS后，可以要等一段时间才会生效。

3.域名配置完成，这时候就需要配置服务器。第一步要进行重启并重新设置一个新密码。

找到安全组进行开发接口，按照下面的配置就可以了。

4.进行校验，看看通过域名是否可以访问我们的服务器。

首先需要在服务器上安装一个nginx用来测试

// 1.更新包
sudo apt-get update
// 2.下载nginx
sudo apt-get install nginx
// 3.测试
sudo nginx -t

这个时候输入我们的配置好的域名。可以看到

⚠️ 使用阿里云需要对网站进行备案，域名才可以进行生效。备案的服务器不能是按流量计算的，好像必须是包年或者包月。备案完毕后会在一日之内进行处理。

2.再ubuntu中安装node和npm环境

2.1 安装node

sudo apt-get install nodejs
sudo apt-get install nodejs-legacy

这样就可以了

2.2 安装npm

如果你直接使用apt install npm，那么可能你就会报错

npm : Depends: node-gyp (>= 3.6.2~) but it is not going to be installed

解决的方案：

sudo apt install libssl1.1=1.1.1f-1ubuntu2
sudo apt install npm

这样就成功了。

为了防止npm过慢，我们可以换成淘宝镜像源

npm install -g cnpm --registry=https://registry.npmmirror.com

2.3 安装yarn

sudo apt install --no-install-recommends yarn

3. 在github上创建一个仓库进行存储代码

怎样创建仓库，和再本地上传就不讲了，其他的博客也有涉及到这几点。

下面讲一下，如果我们购买服务器。将代码拉到从github上拉取到服务器上时，速度可能太慢了，我们可以给github进行替换域名，相当于国内做的一个镜像网站。

直接讲

原先git源：git clone https://github.com/xxxx 
替换成： git clone https://hub.fastgit.org/xxxx

这样的下载速度就

我们要存到服务器中一个我们知道目录，因为下面要拿到路径

>>> pwd

代码下载完成之后。

我们进行代码目录命令

cnpm install
npm run build  // 复制build文件下的路径

4.进行配置nginx

在之前我查看别人家的博客的时候，竟然有人是自己定义了react.conf我也这样做了，结果没啥用。所以就要找nginx本身的conf文件

后来在我在自己查看目录结构的时候，发现在cd /etc/nginx/下就有一个nginx.conf。所以我们也要灵活的去找这个文件，下面我们就讲里面的内容进行删除，然后换成我们的自定义的

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;

    server {
        listen   80;
        server_name  localhost;

        location / {
            root   /home/ease/build;    # 这是我们打包好React的目录放在这里
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

按照上面修改好之后。

sudo service nginx restart

这样在浏览器上刷新我们的ip地址就可以看到

5.小结

按照上面的步骤可以很快的部署自己的React项目。如果不明白的地方也可以给我留言。