前后端分离项目Nginx域名配置

一、项目背景

• 项目分前后端，前端使用vue，提供web访问；后端使用spring boot，提供数据接口。
• 服务器为Centos7

二、目的

• 实现前后端都可以通过域名去访问

三、配置方法

1.安装nginx

具体可以看这篇文章：
nginx安装教程

2.域名绑定IP

域名申请可以去阿里云申请，然后绑定你的服务器公网IP即可。申请过程此处不讲，绑定我简单截图如下。两个框，第一个红框填写你的域名，第二个填写你的公网IP：

image.png

3.Nginx配置

3.1.配置前端项目域名访问

• 我的前端项目是VUE，直接打包放在服务器的某个目录中，比如此处前端项目打包名字是demo，路径则为如下：

/root/server/vue/demo

• 进入到nginx的/etc/nginx/conf.d目录，新增一个文件，命名为demo.conf，然后编辑这个文件，加入如下内容：

server {

    listen       80;
    server_name  www.demoProject.com;    #该域名为阿里云绑定服务器的域名

    location / {
        proxy_set_header Host $host;
        root /root/server/vue/demo;             #项目路径
        index /index.html;                        
        try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 保存后，重启nginx

systemctl restart nginx

• 如果没有报错，此处应该可以在浏览器中通过域名www.demoProject.com直接访问你的前端项目了。

3.2.配置后端项目域名访问

• 此处我的后端项目是springboot，部署在tomcat中，tomcat端口号为8090
• 进入到nginx的/etc/nginx/conf.d目录，新增一个文件，命名为demo-api.conf，然后编辑这个文件，加入如下内容：

upstream api.demoProject.com{
    server 192.168.1.110:8090 weight=1;    #此处ip为服务器内网IP，端口号为tomcat端口号
}


server {

    listen       80;
    server_name  api.demoProject.com;

    location / {
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_pass http://api.demoProject.com;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 保存后，重启nginx

systemctl restart nginx

• 如果没有报错，此处应该可以在浏览器中通过域名http://api.demoProject.com直接访问你的后端项目了。