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

本文详细指导如何在Linux服务器上部署SpringBoot与Vue项目,包括Nginx的安装、配置,以及Vue3打包与部署,涉及nginx.conf文件的定制和防火墙设置。

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

在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的部署。

### 部署前后端分离项目的准备 为了成功地将基于IDEA开发的Vue+Spring Boot前后端分离项目部署Linux服务器,需遵循一系列操作流程来确保应用能够稳定运行。这不仅涉及前端Vue项目的构建与传输,还包括后端Spring Boot服务的配置以及整个系统的优化设置。 ### 打包Vue前端项目 在本地环境中完成Vue项目的最终版本编译工作至关重要。通过执行`npm run build`命令可以生成用于生产环境的静态资源文件夹dist[^1]。此过程会依据vue.config.js中的设定自动生成适用于线上发布的HTML/CSS/JS等静态资产。 ```bash cd /path/to/vue/project npm install npm run build ``` 上述指令首先安装依赖项并随后触发构建任务,从而产出压缩后的静态网页资料供后续上传之用。 ### 处理Spring Boot后端工程 对于采用Maven作为构建工具管理的Java应用程序而言,在IDEA内利用内置功能简化了打包步骤。具体来说: - 清除现有目标目录下的残留数据以防止潜在冲突; - 调用package生命周期阶段自动下载所需库并将整个Web应用封装成可独立执行的JAR/WAR档案形式保存于target子路径之下[^3]。 ```xml <build> <plugins> <!-- 插入maven插件 --> ... </plugins> </build> ``` 以上XML片段展示了pom.xml中定义的一部分POM结构化描述符,其中包含了有关如何组装成品的信息。 ### 构建Shell自动化脚本 编写一段简单的shell script有助于提高效率,减少重复劳动带来的错误风险。该批处理文件应当具备如下特性: - 接受必要的参数输入(如远程主机地址、用户名密码组合)以便灵活适应不同场景需求; - 实现SCP协议传送方式把经过预处理过的webapp组件迁移到指定位置; - 设置SELinux安全上下文标签赋予适当读写权限给新加入的对象; ```sh #!/bin/bash # 定义变量存储登录凭证其他必要信息 HOST="your.server.ip" USER="root" PASSWORD="pass" # 使用scp复制文件到远端机器上的特定目录 sshpass -p $PASSWORD scp -r ./frontend/dist/* ${USER}@${HOST}:/var/www/html/ sshpass -p $PASSWORD ssh ${USER}@${HOST} "chmod -R 755 /var/www/html/" echo "Frontend deployment completed." ``` 这段代码实现了从当前计算机向另一台网络节点转移已打包好的前端页面素材,并调整其访问控制属性使之能被正常加载显示出来。 ### 文件传输与权限分配 借助SFTP客户端或者前述提到的方法之一实现跨平台间的数据交换之后,则有必要针对目的站点内的各个组成部分授予恰当的操作许可级别。通常情况下,可通过修改inode元数据里的mode字段达到这一目的——即运用`chmod`实用程序改变相应bitmask位模式表示法所对应的特权集合状态。 ```bash sudo chmod +x start.sh sudo chown www-data:www-data -R /opt/springboot-app/ ``` 这里的第一条语句使得名为start.sh的外壳程序获得被执行的能力;而第二条则指定了Apache/Nginx Web server进程的身份标识拥有者及其所属组别对位于/opt/springboot-app/内部的所有实体享有完全掌控权。 ### 开启防火墙端口映射 考虑到网络安全策略可能阻挡外部请求抵达内部监听的服务实例,因此务必确认相关联的通信信道畅通无阻。可以通过编辑iptables规则链表或是调用firewalld守护进程接口开放HTTP(S)/其他自定义业务逻辑交互所需的TCP端口号范围[^2]。 ```bash sudo firewall-cmd --zone=public --add-port=80/tcp --permanent sudo firewall-cmd --reload ``` 这两行命令分别指示永久性添加一条允许进入流量穿越公共区域到达第80号端点的新规例记录,紧接着刷新全局过滤器列表使更改即时生效。 ### 启动应用程序 最后一步就是激活已经就绪的应用容器。如果选择了jar包的形式分发的话,那么可以直接依靠java虚拟机解释执行入口类main()函数启动后台线程池提供RESTful API接口响应能力。 ```bash nohup java -jar spring-boot-demo.jar & tail -f nohup.out ``` 此处采用了nohup机制绕过终端挂起信号影响长期存活的任务进程,并且重定向标准输出流至日志文件方便日后排查故障原因所在之处。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值