前提nginx安装
安装依赖（如果已经安装了可以跳过）在线下载nginx的稳定版本1.18.0（后续如果出了其他的稳定版本也可以下载其他的版本）解压并安装nginx查看nginx安装目录启动nginx并测试关于nginx.conf文件（重点） vue3项目的打包和部署
在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存放可执行脚本。这三个都是后面需要用到的。
#进入/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
vue3项目的打包和部署
打开vue3项目，对于vue3项目，需要自己编写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，这样子就完成了前端的部署。在（下）中将进行后端的部署。
（后续：后端springboot的部署）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）