nginx搭建部署前后端项目

nginx安装

下载依赖环境

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

安装

cd /usr/local
mkdir nginx
cd nginx
wget http://nginx.org/download/nginx-1.13.4.tar.gz
tar -xvf nginx-1.13.4.tar.gz
cd nginx-1.13.4
./configure --prefix=/usr/local/nginx （prefix=/usr/local/nginx 这个是设置软件安装目录路径，默认安装路径应该在/etc/nginx）
make && make install

启动及常用命令

配置测试： /usr/local/nginx/sbin/nginx -t 出现如下界面说明配置没问题

[root@localhost conf]#  /usr/local/nginx/sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

启动 ： /usr/local/nginx/sbin/nginx
重启 ： /usr/local/nginx/sbin/nginx -s reload
停止 : /usr/local/nginx/sbin/nginx -s stop

启动后访问服务器ip+端口号（nginx默认监听的是80端口）：192.168.10.208
出现如下内容则成功访问

Welcome to nginx!

If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

nginx部署springboot项目

三种打包方式

1. pom包：用在父级工程或聚合工程中，用来做jar包的版本控制
2. war包：一个war包可以理解成一个web项目，里面是项目的所有东西
3. jar包：用于压缩和发布，打成包利于管理，主要存放项目需要的工具类

war是一个web模块，其中需要包括web-inf,是可以直接运行的web模块，而jar一般只包括一些class文件，声明class后可以直接用Java命令运行的

父工程需要将打包形式改为pom，其余子模块打jar包，同时提供者和消费者两个服务需要在pom文件中加上插件,不然打出来的jar包无法运行，会提示没有主清单属性

!-- 这个插件，可以将应用打包成一个可执行的jar包  -->

    
        
            org.springframework.boot
            spring-boot-maven-plugin
            
                
                    
                        repackage
                    
                
            
        
    

打包

手动打包

1. idea右边的maven中
2. 选择root（也就是父工程）模块->Lifecycle
3. 先clean再package

命令行打包
mvn clean package
打包后会在target中生成jar包

部署至服务器

将jar包上传至服务器
启动：java -jar xx.jar
就可以通过服务器ip+代码中配置的端口请求：http://192.168.10.208:9112

nginx负载均衡

假设当前两台服务器192.168.10.208 192.168.10.206都安装了nginx、部署了java代码
则在两台机子上都修改nginx.conf

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    # 负载均衡，将请求分发给下面的两台服务器
    upstream xgd {
        server 192.168.10.206:9112;
        server 192.168.10.208:9112;
    }

    server {
    	listen       81;    # nginx默认是80端口，可以修改
    	server_name  localhost;
    }
}

通过nginx负载均衡，当一台服务器的java服务挂掉后另一台的java服务也可以运行。
也就是说当208的java服务宕机后，接口请求会被转发到206

nginx部署vue项目

打包vue项目

npm run build
打包后会在项目根目录生成dist文件夹

部署

将dist文件夹上传至服务器，假设上传至 /usr/xyouzi/html/xgd

修改nginx.conf

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    # 负载均衡，将请求分发给下面的两台服务器
    upstream xgd {
        server 192.168.10.206:9112;
        server 192.168.10.208:9112;
    }


    server {
     listen       81;    # nginx默认是80端口，可以修改
     server_name  localhost;
    
        location / {
         root /usr/xyouzi/html/xgd/dist;     # 指定打包后的dist文件夹路径
         index index.html index.htm;        
     }
     
     # 前端请求时添加了前缀api
     # 监听81端口请求到带有api前缀的接口时将请求转发至上面的upstream xgd
     location /api/ {   
         # 最后面添加斜杠是为了抵消/api，因为前端请求时添加了前缀，而后端的真实接口没有前缀api，所以需要抵消
            proxy_pass http://xgd/;             
        }
    }
}

访问

访问服务器ip + nginx中对应server监听的端口：http://192.168.10.208:81/

总结以上的请求流程

前置条件

前端配置的接口基准地址是 /api、接口完整地址是 __dirname/api/xxx

页面请求流程

1. 浏览器访问192.168.10.208:81
2. nginx接收到81端口的请求，目标地址默认为/。所以查找匹配规则，根据location /的规则，在 /usr/xyouzi/html/xgd/dist下查找主页文件，找到成功返回页面

接口请求流程

1. web页面点击按钮发送请求，请求的接口完整路径是 __dirname/api/xxx
2. 因为当前web页面的地址是192.168.10.208:81，所以发送的完整请求路径是192.168.10.208:81/api/xxx
3. nginx接收到81端口的请求，目标地址为 /api，查找匹配规则，根据location /api/的规则，代理转发给upstream的xgd组http://xgd/，此时的请求地址为http://xgd/xxx
4. nginx根据配置的负载均衡upstream，尝试将请求转发给192.168.10.206:9112，如果该服务器宕机则转发给192.168.10.208:9112。
5. 此时假设转发给了206，则nginx转发后的请求地址为192.168.10.206:9112/xxx
6. 服务器192.168.10.206接收到请求，监听9112的java服务做出响应