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

原创 已于 2022-02-11 17:08:38 修改 · 5.4k 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #spring boot #vue.js #vue #前端

于 2022-02-04 18:00:22 首次发布
本文详细指导如何在Linux服务器上部署SpringBoot与Vue项目，包括Nginx的安装、配置，以及Vue3打包与部署，涉及nginx.conf文件的定制和防火墙设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

}

②再附上配置多个前端项目的完整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; 

        #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       9998;  # 第二个前端项目的监听端口
        server_name  localhost1;

        location / {
            root   html/dist2;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /chain-api/ {
            proxy_pass http://第二个前端项目要访问的后端服务器ip:后端port/;
        }

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

    }


    # 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

vue3项目的打包和部署

打开vue3项目，对于vue3项目，需要自己编写config.js文件，在这里附上我的vue.config.js文件，将配置文件命名为vue.config.js后放在vue项目的根目录下（不是src下）：

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/" : "/", 
    outputDir: "dist", //是打包后所生成的目录名，可以自己定义
    indexPath: "index.html",
};

在配置好vue.config.js文件之后，找到vue项目根目录下的package.json文件中的"bulid"所在的一行，点击左边的绿色箭头进行项目打包：
在这里插入图片描述
打包后，可以在vue的本地项目文件夹下看到一个dist文件夹。

再将该生成的dist文件夹发送到服务器的nginx/html目录下即可，此时服务器nginx/html结构为：
在这里插入图片描述
最后，再重启一次nginx，这样子就完成了前端vue的部署。
在springboot+vue部署到nginx服务器上（linux）——完整版（下）中进行后端springboot的部署。

ihghkb
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值