Linux中nginx配置Vue+spring boot

1.在linux中创建一个目录存放打包好的Vue文件,这里我是在根目录 / 下创建一个html文件夹。

sudo mkdir html

2.在linux中安装nginx，这里用的是 yum 安装。

#先将nginx添加到yum源中
rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
#安装nginx
yum install -y nginx
#查看nginx目录
whereis nginx
#启动nginx，可以先配置nginx后启动，也可以先启动，配好之后用 service nginx reload 加载配置文件
service nginx start

3.打包Vue 并把打包后的文件上传到html目录下。

#Vue的config目录下的prod.env.js,这里的配置看个人请求后台接口的方式，这样配置可以方便的切换后台接口地址
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  url: '"gj/"'
}

#Vue的config下的index.js中的build配置，按需修改
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    /**
     * 在build下的assetsPublicPath默认情况下是'/'，
     * 此时打包的index.html文件中的资源文件(js、css、img)默认情况都是以/开头的绝对路径，指向http服务器的根路径
     * 如果想修改为相对路径则需要将assetsPublicPath的值修改为'./'，
     * 这样就是指向index.html的相对路径了
     */
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    /**
     * Source Maps
     */
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

#打包Vue
npm run build

4.打包spring boot项目，并上传到linux上，我这里端口是8089  context-path是gj。

server:
  port: 8089
  servlet:
    context-path: /gj

#启动spring boot
nohup java -jar xxx.jar > springboot.log 2>&1 &

5.nginx配置http

#打开配置文件,我的配置文件在/etc/nginx/nginx.conf,可以用命令whereis nginx查看一下
sudo vim /etc/nginx/nginx.conf
#配置http模块
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    underscores_in_headers on;
    server {
        listen 80;
        #server_name配置域名，比如www.baidu.com
        server_name www.xxx.com;
        #前台Vue配置
        location / {
           #root配置静态文件存放位置，就是上面新建的目录html
           root /html;
           try_files $uri $uri/ @router;
           index index.html;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
        #后台接口配置
        location /gj/ {
            proxy_pass http://127.0.0.1:8089/gj/;
            proxy_redirect      off;
            proxy_set_header    Host    $host;
            proxy_set_header    X-Real-IP       $remote_addr;
            proxy_set_header    X-Forwarded_For $proxy_add_x_forwarded_for;
            proxy_connect_timeout       90;
            proxy_send_timeout          90;
            proxy_read_timeout          90;
            proxy_buffer_size           4k;
            proxy_buffers               4 32k;
            proxy_busy_buffers_size     64k;
            proxy_temp_file_write_size  64k;
            client_max_body_size        500m;
        }
    }

    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;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

nginx配置https

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    underscores_in_headers on;

    server{
        listen 80;
        #配置域名
        server_name www.xxx.com xxx.com;
        add_header Strict-Transport-Security max-age=15768000;
        #http全部转发成https
        return 301 https://$server_name$request_uri;
    }
    server{
        listen 443 ssl;
        #配置域名
        server_name www.xxx.com xxx.com;
        #配置ssl证书,证书存放目录随意
        ssl_certificate /usr/local/ssl/xxx.pem;
        ssl_certificate_key /usr/local/ssl/xxx.key;
        ssl_session_timeout 5m;
        ssl_session_cache shared:SSL:10m;
        ssl_prefer_server_ciphers on;
        #配置前端
        location / {
                root /html;
                try_files $uri $uri/ @router;
                index index.html;
        }

        location @router {
                rewrite ^.*$ /index.html last;
        }
        #配置后台接口
        location /gj/ {
                proxy_pass http://127.0.0.1:8089/gj/;
                proxy_redirect      off;
                proxy_set_header    Host    $host;
                proxy_set_header    X-Real-IP       $remote_addr;
                proxy_set_header    X-Forwarded_For $proxy_add_x_forwarded_for;
                proxy_connect_timeout       90;
                proxy_send_timeout          90;
                proxy_read_timeout          90;
                proxy_buffer_size           4k;
                proxy_buffers               4 32k;
                proxy_busy_buffers_size     64k;
                proxy_temp_file_write_size  64k;
                client_max_body_size        500m;
        }
    }
    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;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

 

6.启动nginx 或者重新加载配置文件

#启动nginx
service nginx start
#重新加载配置（已经启动nginx）
service nginx reload

7.遇到问题

Job for nginx.service failed because the control process exited with error code. Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journal

可能出现的错误 ：

                       1.nginx.conf配置错误，查看是否有多余空行，缺少分号，或者其他错误。

                       2.nginx的log文件没有权限。

                       3.端口被占用

可以用nginx -t 查看错误信息。