React项目快速部署到服务器上（完整版，避坑必备）_花想容~Bxy_react项目部署到服务器

未知 02-07 8112

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

文章目录从选购服务器到上线第一个React项目流程1.购买服务器、域名以及配置服务器2.再ubuntu中安装node和npm环境2.1 安装node2.2 安装npm2.3 安装yarn 3. 在github上创建一个仓库进行存储代码4.进行配置nginx 5.小结

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项目。如果不明白的地方也可以给我留言。