本文详细指导如何在Linux服务器上部署SpringBoot与Vue项目，包括Nginx的安装、配置，以及Vue3打包与部署，涉及nginx.conf文件的定制和防火墙设置。
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的部署。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
