前端独立部署

本文说明前端独立部署的适用场景、操作步骤和关键配置，帮助用户完成环境部署与验证。

至轻云支持前后端分离部署

1. 本地安装NGINX

参考NGINX官方安装手册

2. 修改NGINX配置文件并启动NGINX

vim nginx/conf.d/default.conf

自定义配置root路径：/user/ispong/share/NGINX/html

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
   
    location / {
        root   /user/ispong/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /user/ispong/share/nginx/html;
    }
}

3. 下载源码

git clone https://github.com/isxcode/spark-yun.git

4. 修改前端访问地址

修改.env文件

cd spark-yun/frontend
vim spark-yun/frontend/.env

将${backend_url}替换成后端访问地址，例如 https://zhiqingyun-saas.isxcode.com

VITE_VUE_APP_BASE_DOMAIN=${backend_url}

20250428184230

5. 前端源码本地打包

前端包输出路径：spark-yun/frontend/dist

cd spark-yun/frontend
npm install pnpm@9.0.6 -g
pnpm install --force
pnpm run build

20250428185056

6. 上传dist文件夹

上传dist目录的文件到NGINX的html目录下

cp -rf dist/* /user/ispong/share/nginx/html

7. 刷新NGINX并访问系统

nginx -s reload