前后端分离项目部署腾讯云轻量级服务器

前后端分离项目部署腾讯云轻量级服务器

摘要：前端为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