序章

由于本人金钱有限，只能购买的起一台VPS，在已经部署了hexo 博客后，想要使用这台再配置下自己做的项目，通过搜索，发现貌似有两种方法。

  1. 同一个server{} 下配置多个location / {} ，类似于以下这种：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    server{
    	listen 80;
    	server_name www.example.com;
    	
    	location / {
    		alias /root/www;
    		index index.html;
    	}
    	
    	location /demo1{
    		alias /root/demo1;
    		index index.html;
    	}
    	location /demo2{
    		alias /root/demo2;
    		index index.html;
    	}
    }

    这样的话，不同的项目就会在www.example.com/demo1 www.example.com/demo2 下面了，可以通过这样的形式访问。

  2. 通过二级域名配置不同的server 来监听80端口，这样直接可以使用二级域名访问，不用加/ 。这种是我采用的，因为我已经申请了一个域名，再用二级域名做A记录指向服务器ip就可以了。但是在过程中遇到了一个小坑，费了很长时间。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    server {
    	listen 80;
    	server_name www.example1.com;
    	
    	location / {
    		proxy_pass http://localhost:81;
    		#或者静态资源目录
    		#alias /root/demo1/;
    	}
    }
    server {
    	listen 80;
    	server_name www.example2.com;
    	
    	location / {	
    	proxy_pass http://localhost:82;
    	#或者静态资源目录
    	#alias /root/demo2/;
    	}
    }

过程

我首先将VPS部署了hexo 静态博客，然后使用这台VPS部署 SpringBoot+Vue3 的项目，由于是前后端分离的项目，还需要把服务端做一下反向代理。

如果把按照以上第二种方法，把配置都写在nginx.conf 中的话，会很乱，emmm我的还出现了部署失败访问不到的情况，所以打算将不同域名的conf 分开写，放到一个文件夹中。

nginx.conf 分开的方法：

首先将默认的.conf 文件的http 下面加上include /etc/nginx/conf.d/*.conf;

这句话的意思是在/etc/nginx/conf.d 目录下所有的.conf 文件都被访问到，建议这里使用绝对路径。

然后就可以在conf.d 目录下写.conf 文件了，我写了两个一个是前端资源的配置文件，一个是后端接口的反向代理。

需要注意的是，在配置前端资源的静态资源目录时，要把目录写在server{} 下用root 声明，如果写在location{} 下使用alias 声明时，会报403错误。

终曲

最后项目就愉快的run 起来啦！

使用chrome调试一定要勾选(F12)中network的Disable cache 和 Preserver log