如何充分利用自己的一个域名部署多个网站 + 部署react单页面服务

以王之名

这一篇帖子解决的问题有两个
（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项目了
然后现在如果你有第二个需要部署的网站你可以重复上面部署的步骤，只要把端口号修改一下即可      
我的网站地址为 www.wly.red，这个就是使用这个方式部署大家可以看看
如果觉得我这边文章对你有帮助请帮我点赞
看到有人问我的博客是否用的模板，我把github地址放出来，这个都是我自己写的，只是总是懒得写~
https://github.com/wlydhub/my-blogs

chenmg

楼主你的博客用的别人模板还是自己敲的？

含笑阁

chenmg 发表于 2019-3-1 10:18
楼主你的博客用的别人模板还是自己敲的？

看着像自己写的，因为功能还不是很完善的样子

以王之名

chenmg 发表于 2019-3-1 10:18
楼主你的博客用的别人模板还是自己敲的？

照着简书样式抄的，然后就写了一个主页其他没咋写

以王之名

含笑阁 发表于 2019-3-1 10:38
看着像自己写的，因为功能还不是很完善的样子

这个都是自己遇到的问题，然后自己研究解决的，网上要不就是直接Nginx反向代{过}{滤}理啥的，才学代码的都不是很能看懂

念夕空

谢谢大佬分享啊。。。感觉很有用