前言
以下流程都是博主本人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地址
有详细的开发文档