服务器网站部署
第一步 后端项目打包
# 使用IDEA中的Maven工具将当前项目打包
# 届时你会获得一个jar包
# 在项目的target目录下
# 如下图
第二步 将vue项目进行打包
# 在vue项目目录下使用控制台输入如下命令
npm run build
# 如下图会生成以下目录
注意:nginx自动识别html文件,所以需要创建一个文件夹,存储vue打包后的文件,方便nginx调用,关系到你的网站是否能够成功访问到
第三步 配置Nginx
# 解压nginx
tar -zxvf [包名] -C [输出路径]
# 进入到输出路径
cd [输出路径]
# 一下需要对别自己的配置文件去改,主要是ip地址,端口的设置,添加字符集,添加基础的映射路径与文件格式和访问路径
# 配置开始
server {
listen 80;
server_name 192.168.3.111;
charset utf-8;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /server/vue/dist;
index index.html index.htm;
}
# 反向代理的跨域配置(解决前端跨域问题方法之一)
location ^~ /api/ {
rewrite ^/api(.*)$ $1 break;
proxy_pass http://192.168.3.111:8080;
}
# 配置结束
# 在进入nginx的输出路径
cd [输出路径]
# 创建一个nginx编译文件存储的文件夹
mkdir [编译文件名称] # 这里的路径自己要记住下面会用到
# 安装命令执行
./configure --prefix=[编译文件路径]
# 开始编译
make && make install
# 进入到编译好的路径中查看是否存在 sbin 文件夹
cd sbin
# 启动nginx
./nginx
# 开放nginx的80
# 方案网址 https://www.panziye.com/java/web/1450.html
# 执行如下指令查看所有已经开启的端口
firewall-cmd --list-ports
#如果什么也没有需要放开80端口
# 执行如下命令开启80端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
# 开启后需重启防火墙才生效,执行如下指令重启防火墙
firewall-cmd --reload
# 如果出现 80/tcp说明成功了
第四步 测试
# 在游览你其中使用自己的IP访问网页
192.168.3.111:80