发布后台管理UI

发布前需要安装所需依赖pnpm install

发布后台管理UI(Vue项目)

pnpm run build
bash

image.png
发布后将dist目录上传至服务器上,路径可以自定义。
image.png

配置Nginx

  1. 进入nginx的conf.d配置目录。
    image.png

  2. 创建blog_admin.conf文件

vi blog_admin.conf
bash

将以下配置复制到blog_admin.conf文件中

注意修改配置中的域名和API端口
如果你不需要域名访问,只需要使用IP+端口访问,可将listen修改为其他未占用的端口,但不能设置为80端口(80端口默认被nginx占用),同时修改server_namelocalhost

server {
        listen       80;
	# 将以下域名修改为你自己的域名
        server_name test.okay123.top;
	# 将以下路径修改为上文中`dist`所在路径
        root /home/www/backend/dist;
        location / {
             proxy_set_header Referer $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header Host $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            try_files $uri $uri/ /index.html;
        }
        location /api {
             proxy_set_header Referer $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header Host $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	     # 此端口为上一章部署的在Docker容器API开放的端口;如果你的API和前端不在同一服务器,需要将localhost修改为对应API的服务器IP或域名
             proxy_pass http://localhost:8001;
        }
}

json

重新加载Ngxin配置

nginx -s reload
bash

完成以上步骤就可以通过域名或IP访问后台管理界面了。

重新发布

下次修改代码后,重新发布只需要将dist重新上传到服务器替换现有的dist目录即可。

自动部署

以下是Linux下的基于docker的部署脚本,脚本执行前需要对脚本设置权限,比喻脚本名叫"blog.manage.sh",请执行:chmod 777 blog.manage.sh
使用此脚本需提前安装好Git工具

#!/bin/bash
# 判断文件夹是否存在
if [ -d "/home/code/" ];then
  echo "文件夹已经存在"
  cd /home/code
  echo "更新代码..."
  git pull
  else
   mkdir /home/code
  echo "拉取代码..."
# 请将https://gitee.com/miss_you/easy-admin.git替换为你自己的源代码地址
  git clone  https://gitee.com/miss_you/easy-admin.git /home/code/
fi

cd /home/code/src/frontend/admin/
echo "安装依赖..."
pnpm install
echo "打包站点..."
pnpm run build

if [ ! -d "/home/www/backend/" ];then
        mkdir /home/www/backend
fi

cp dist /home/www/backend/

bash