前后端分离项目部署腾讯云轻量级服务器
摘要：前端为Vue，利用nodejs打包(npm run build)出dist文件，然后利用nginx代理，并和后端建立关联，后端为SpringBoot项目，利用IDEA打包成jar包。
Xshell7 教育版
链接：https://pan.baidu.com/s/11xeSNWU7S4D8Tg_s71wKvg
提取码：zlls
Xftp7 教育版
链接：https://pan.baidu.com/s/1rHzjpj_lik1R-AFjEWaCrQ
提取码：gyi0
获取root权限
如遇到permission denied, mkdir，说明没有权限，输入下列命令后再执行上面打包操作
sudo npm i --unsafe-perm
https://blog.csdn.net/qq_31325079/article/details/102565223
Vue项目打包
为什么打包？
首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。
npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了https://www.cnblogs.com/ustc-anmin/p/10779130.html
linux上安装nodejs
https://blog.csdn.net/shenxianhui1995/article/details/103853632
Vue项目打包操作
在Vue项目根目录下
npm install --unsafe-perm --registry=https://registry.npm.taobao.org
npm run build
打包成功后
在根目录下多出dist文件夹
nginx常规命令
安装
https://www.cnblogs.com/xxoome/p/5866475.html
安装后的默认目录
/usr/local/nginx
查看nginx是否启动
ps -ef | grep nginx
nginx的配置路径
（注意：修改完conf目录下的nginx.conf一定要重启才能生效）
/usr/local/nginx/conf/nginx.conf
重启nginx
/usr/local/nginx/sbin/nginx -s reload
将打包得到的dist文件配置在nginx上，并映射后端
配置nginx的conf目录下nginx.conf文件，覆盖里面的server内容
server {
#端口号,一般不用改
listen 80;
#配置的域名，也不用改
server_name localhost;
location / {
#项目在服务器部署的位置，需要修改root下的目录，路径为打包的dist文件夹下(不包含dist文件夹)的两个文件的目录，即该目录下有index.html和static文件夹
root /data/dist;
index index.html index.htm;
client_max_body_size 300m;
}
#需要修改最后一条,改成自己后端部署的ip地址和端口
location /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xx.xx.xx.xx:xx/;
# 如proxy_pass http://192.168.001.100:8080/;
}
}
（注意：修改完conf目录下的nginx.conf一定要重启才能生效）
Vue项目打包后,部署在服务器,访问页面出现空白一片
将打包生成的dist文件夹, 放在服务器中, 浏览器访问, 发现访问成功,但是页面是空白的,怎么办呢?
解决办法：找到Vue项目目录config/index.js文件，将assetPublicPath的路径改为“./”即可，
https://blog.csdn.net/mawei7510/article/details/103781790
Vue项目部署成功后，请求不到后端api接口
在nginx的conf文件里的server添加
#需要修改第一条转发的路径/api/和最后一条转发后的路径,改成自己后端部署的ip地址和端口
location /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xx.xx.xx.xx:xx/;
# 如proxy_pass http://192.168.001.100:8080/;
}
原因：通过浏览器的检查工具查看前端请求后端的URL发现为
发现每次请求都有/api/的请求段，利用nginx进行转发
端口被占用
netstat -anp | grep 80
kill -9 进程id
后端启动
执行jar包
cd /data/app/exam/
启动java项目(jar包)以下任选一条
下面这条好处是退出后仍在后台挂着，适合后面调的差不多了变动不大的时候用
nohup java -jar ruoyi-admin.jar &
如果上面那条出现无法写入日志的情形，可选下面
nohup java -jar ruoyi-admin.jar > /dev/null 2> /dev/null
如果还需要调试可以直接用下面这条,直接就可以在窗口看输入的日志，启动后可以按ctrl+z退出
java -jar ruoyi-admin.jar
腾讯云开放端口
firewall-cmd --zone=public --add-port=需要开放的端口/tcp --permanent
firewall-cmd --reload
firewall-cmd --list-ports
Web防火墙也要开放
数据库MySQL
https://blog.csdn.net/qq_44037091/article/details/122507194?spm=1001.2014.3001.5502