springboot+vue部署到nginx服务器上（linux）——完整版（上）

• • 前提
  • nginx安装
  • • • 安装依赖（如果已经安装了可以跳过）
      • 在线下载nginx的稳定版本1.18.0（后续如果出了其他的稳定版本也可以下载其他的版本）
      • 解压并安装nginx
      • 查看nginx安装目录
      • 启动nginx并测试
      • 关于nginx.conf文件（重点）
  • vue项目的打包和部署

在springboot+vue的前后端分离开发中，在项目开发完毕之后，怎么将项目发布到centos（或其他linux版本）系统的服务器上？由于网上缺少比较完整的资料，所以特别写此篇博客，以记录近日来自己的部署历程。

前提

将springboot和vue统一安装在一台服务器上，这台服务器已经安装了数据库服务以及jdk。

nginx安装

安装依赖（如果已经安装了可以跳过）

#gcc安装
yum install gcc-c++
 
#pcre-devel 安装
yum install -y pcre pcre-devel
 
#zlib安装
yum install -y zlib zlib-devel
 
#OpenSSL 安装
yum install -y openssl openssl-devel

在线下载nginx的稳定版本1.18.0（后续如果出了其他的稳定版本也可以下载其他的版本）

wget -c https://nginx.org/download/nginx-1.18.0.tar.gz  

解压并安装nginx

#解压下载nginx压缩包
tar -zxvf nginx-1.18.0.tar.gz
#进入解压目录
cd nginx-1.18.0
#安装
./configure
#编译安装
make
make install

查看nginx安装目录

一般来说，nginx被默认安装在/usr/local/nginx下，可以打开该目录查看文件结构如下：

其中，html目录存放我们后面要部署的vue打包项目，conf存放nginx的配置文件，sbin存放可执行脚本。这三个都是后面需要用到的。

启动nginx并测试

#进入/usr/local/nginx/sbin
cd /usr/local/nginx/sbin
#启动nginx
./nginx
启动之后，可以在浏览器中，输入http://localhost:80，就可以访问到nginx的首页，如果可以见到如下的首页，那么nginx安装成功。

关于nginx.conf文件（重点）

进入/usr/local/nginx/conf，修改其中的nginx.conf文件，文件中有一个http元素，在http元素中有若干个个server元素，每一个server元素就是一个前端项目：

server {  #一个前端项目，所有需要配置的都在这个元素内
    listen       80;  #该项目的监听端口，可以修改
    server_name  localhost;  # 该项目的服务器名字，不必修改

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html; # 该项目以nginx/html为根目录的相对路径，如果是在html目录下的dist文件夹，就修改为html/dist即可。
        index  index.html index.htm; #首页的索引，不必修改
        try_files $uri $uri/ /index.html; # 要加上这句，否则只能显示主页，无法显示其他页面
    }
  location /chain-api/ {
        proxy_pass http://后端服务器公网ip:后端服务器的端口/; #要加上这一句，进行跨域设置
    }

    #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   html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

上面给出的是一个前端项目的配置，如果需要添加多个前端项目，就需要在父元素http中添加多个server子元素。每一个server中：需要有唯一的listen（监听端口），其他的模仿上方的server设置即可。下面附上我的nginx.conf文件：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {  #第一个前端项目对应的server元素
        listen       9999; #前端监听端口
        server_name  localhost; #这里填写对应的域名或ip地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    
        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /chain-api/ {
            proxy_pass http://后端公网ip:后端port/;
        }
   
        #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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
   # server { #第二个前端项目对应的server元素（此处未配置）
     #   listen       80;
    #    server_name  chain-trace-web;

    #    location / {
   #         root   chain-trace-web/dist;
   #         index  index.html index.htm;
 #       }

    #}


    # HTTPS server 
    #
    #server {  
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

【注意】在修改server的listen设置监听某一个端口的时候，需要顺便修改服务器的防火墙设置和修改云服务器的安全组规则才能生效。
（1）打开服务器的防火墙：

firewall-cmd --zone=public --add-port=端口号/tcp --permanent
firewall-cmd --reload

（2）修改安全组规则
进入云服务器的控制台，就可以修改安全组规则，放行对应的端口。

将nginx.conf文件配置修改好之后，重启nginx服务器：

cd usr/local/nginx/sbin
#重新加载配置
./nginx -s reload
#杀掉nginx的进程
killall -9 nginx 
#重启nginx
./nginx

vue项目的打包和部署

打开vue项目，找到package.json文件中的"bulid"所在的一行，点击左边的绿色箭头进行项目打包：

打包后，可以在vue的本地项目文件夹下看到一个dist文件夹。

再将该生成的dist文件夹发送到服务器的nginx/html目录下即可，服务器nginx/html结构为：

最后，再重启一次nginx，这样子就完成了前端的部署。在（下）中将进行后端的部署。

（后续：后端springboot的部署）