前言:博主已经将自己的vue项目部署在nginx上边,服务器是阿里云服务器,今天是要部署springboot后台并实现前台请求转发到后台,踩了很多坑,记录一下。

一、服务器环境

  • 阿里云服务器
    • jdk1.8
    • docker(以下是容器)
      • Redis
      • Rabbitmq
      • mysql8.x

二、服务器配置jdk环境

该步骤请查看:服务器配置jdk1.8环境并永久性运行

三、部署springboot

在这里插入图片描述
双击package即可进行打包,博主设置的是jar
生成之后如下
在这里插入图片描述
然后我们直接将该jar包往服务器上一丢(随便找个文件夹,或者自己建一个)
cd 到jar包位置,执行以下命令

$ nohup java -jar 包名.jar >log.txt &

// 这种方法会把日志文件输入到你指定的文件中,没有则会自动创建。并且进程会在后台运行。
// 不要忘记后边的  &

我们查看一下端口情况,我的占用的是8001端口,执行netstat -anp |grep 8001,看到如下
在这里插入图片描述

此时,后台已经跑起来了,并且有一些tcp连接随时待命

四、修改Nginx配置

方案一

在没有设置代理的情况下,客户端请求到nginx,nginx服务器是不会进行转发的,接下来我们配置一下,vim /etc/nginx/nginx.conf或者拷贝到本地修改再上传
在这里插入图片描述

# 核心配置
 server {
        listen       8080;
        server_name  xxxxxxx;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	    root /dist;
	    index index.html;
	    try_files $uri $uri/ /index.html;
        }
        
		location /api {
			add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, DELETE, PUT, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
     				return 204;
   			}
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://xxxxxxx:8001;
		}
}
  • 修改完之后,重启nginx,nginx -s reload,如果启动失败,报.pid文件的错,比如:
nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory)

也就是没有改文件,我们找到报错目录,并在其下新建nginx.pid文件,然后nginx -s stop关闭服务,然后nginx -c /etc/nginx/nginx.conf直接以配置文件重启,注意,nginx.pid所在的路径必须和配置文件中配置的pid文件路径一样,我这里是/run/nginx.pid

  • 然后就可以访问了
  • 当浏览器发送ip+8080请求时,nginx响应前端资源,在页面内,我们点击按钮,或者提交表单等操作请求服务器时,nginx检测到api字样则进行转发处理,添加上请求头删除api字样,然后转发到后台接口进行处理

附:nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
	
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8080;
        server_name  xxxxxx;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	    root /dist;
	    index index.html;
	    try_files $uri $uri/ /index.html;
        }
		
		location /api {
			add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, DELETE, PUT, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
     				return 204;
   			}
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://xxxxxx:8001;
		}

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}


方案二

这个方案我没有使用过,只是理论上可行
具体思路是:

  • (前后端都在同一个服务器)添加一个server,监听一个端口比如8888端口,vue中axios的baseurl请求端口改成8888,然后添加代理,进行转发到8001端口

以上都为博主个人理解,如有不对,麻烦指出
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐