React项目快速部署到服务器上(完整版,避坑必备)
从选购服务器到上线第一个React项目流程文章目录从选购服务器到上线第一个React项目流程1.购买服务器、域名以及配置服务器2.再ubuntu中安装node和npm环境2.1 安装node2.2 安装npm2.3 安装yarn3. 在github上创建一个仓库进行存储代码4.进行配置nginx5.小结1.购买服务器、域名以及配置服务器我个人选用的是阿里云的域名和服务器。下面步骤是购买域名和服务器
从选购服务器到上线第一个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项目。如果不明白的地方也可以给我留言。
更多推荐
所有评论(0)