这一篇笔记解决的问题有两个
（1）如何在服务器上启动react这种单页面应用并且刷新不报错
（2）如果你只有一个服务器和一个域名而又有多个网站，那么这一篇笔记可以帮你，让你使用二级域名的方式，可以让你服务器上所有的网站都通过域名能后访问
1，安装Nginx（服务器为centOS）
// (1)首先先安装epel-release源
yum install epel-release
// (2)安装Nginx(笔记可能会过时如果出错可以参考官网：http://nginx.org/)
yum install nginx
// (3)运行nginx,nginx不会自动运行需要我们自行启动
systemctl start nginx
// (4)如果正在运行防火墙请允许http和https通信
firewall-cmd --permanent --zone=public --add-service=http
firewall-cmd --permanent --zone=public --add-service=https
firewall-cmd --reload
// (5)几个常用的nginx命令
①nginx -t检查nginx语法是否错误
②service nginx restart重启nginx
2,nginx启动react项目
// (1)从根目录cd etc/nginx/
// (2)在当前目录下新建文件夹 react, 并在react文件夹中新建blog-3000.conf文件,文件的内容为 (我使用了最简单的配置信息)
server {
listen 3000;
location / {
root /root/html/blog;
index index.html index.htm;
try_files $uri /index.html;
}
}
// (3)将react项目build后build文件夹中的内容上传到 root/html/blog目录下
// (4)修改nginx配置 cd .. 返回nginx目录下 vi 打开nginx.conf ,然后修改vi nginx.conf
// (5)这时你可以在浏览器输入你的服务器ip地址加:3000查看你的页面是否正确了
3.走完上面这一步如果你不需要反向代理可以将 你新增的 react目录下的 blog-3000.conf 中的 listen 3000;改为 listen 80；
这样直接输入网址就可以了，但是如果你想要在一个服务器部署多个网站，并且他们使用不同的二级域名，那么你可以使用反向代理。
// (1)cd /etc/nginx/ 进入nginx目录下 再cd 进入conf.d目录下，
// 新建文件blog.wly.red-3000.conf (这个文件名大家可以随便起，只要自己容易理解就好，我的命名规则就是域名加这个项目的端口号)
// 文件内容如下
upstream blog {
server 127.0.0.1:3000;
}
server {
listen 80;
server_name blog.wly.red;
location / {
proxy_pass http://blog;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
}
}
// upstream blog这一行写对应的域名
// server 127.0.0.1:3000; 这一行写对应的本服务内部的端口号
// proxy_pass http://blog; 这一行写对应的域名
// 保存后重启nginx
// (2）创建完成后再将域名解析
这是输入你对应的网址就可以打开看看你的网站了
如果要再加入第二个的话你可以重复上面部署react的步骤，域名解析时全部都写成一个服务器ip就可以完成多个
我的个人网站 www.wly.red就是使用这个方式部署的，大家可以简单看看，blog.wly.red是我仿照简书写的一个网站，但是一直没有写完···
网友评论