使用xshell部署前端工程

169 阅读3分钟

说在前面的话:作为一名前端,本来我不应该去担心怎么部署项目的,但是介于有时候项目老发版,老麻烦后端同事将前端打包以后的dist项目部署到服务器上面,有时候频繁发版,不想求助后端同事,再加上选择这个就业行情,作为牛马程序员,似乎部署项目得会,毕竟我公司好多前端都会,,,,,,,,,

话不多说,上干料,一些xshell的使用方法和linux语句,在看这篇文章之前,最好去补一下,网上都有(只是网上没有一套稍微健全的部署项目的文章而已,可能有只是我没有找到)

一、下载安装xshell 我是直接用的安装包,问后端同事要的,安装之前如果电脑本来就有xshell请将之前的卸载,并且记得清除卸载的缓存

xshell安装包.png

xshell安装包_1.png

xshell安装包_2.png

安装完成以后,我都桌面出现了这两个图标:

xshell安装成功以后电脑桌面图标.png

二、登录堡垒机(通过堡垒机使用xshell操作服务器部署前端项目,有的时候不需要这一步,但一般为了项目安全,会有客户专门提供的堡垒机)

堡垒机.png

堡垒机_2.png

备注:堡垒机是什么?堡垒机,即在一个特定的网络环境下,为了保障网络和数据不受入侵和破坏,运用各种技术手段监控对网络内的服务器、网络设备安全设备数据库等设备的操作行为,以便于集中报警、及时处理及审计定责。

三、使用xshell操作服务器部署项目 第二步通过账号密码登录堡垒机以后就会自动打开xshell页面,如下:

(1)服务器找到要部署的项目打开替换前端的打包文件,我以idp-qybk项目(文件全称genuai-idp-qybk-ui,项目名称全域布控)为例。刚进入使用cd /data/idp/指令进入idp文件夹目录,然后使用ll指令(ls指令也可以查看)查看idp目录下面的所有项目,如下图:

xshell操作服务器.png

(2)使用cd idp-qybk/指令进入到qybk项目目录,然后ll指令查看该目录下面所有文件,看到文件genuai-idp-qybk-1.0.0-SNAPSHOT-bin文件以后,使用cd genuai-idp-qybk-1.0.0-SNAPSHOT-bin/指令打开该文件目录,就算是找到该文件需要替换文件完成部署的地方了。(此处有个技巧,要输入cd genuai-idp-qybk-1.0.0-SNAPSHOT-bin/指令前,可以先输入cd g然后按电脑Tab键就可以自动补充全部指令)

xshell操作服务器_3.png

3、替换前端打包的静态资源。 (1)点击这个地方打开文件操作可视窗口

Snipaste_2024-11-07_17-03-53.png (2)打开以后是这样的,右侧就是服务器上面该项目的所有文件,右侧是本地电脑上的文件

xshell操作服务器_7.png (3)我们需要替换的是resources项目下面的static文件夹下面的内容,但是替换之前记得备份!!!!!这里是按日期备份的

xshell操作服务器_8.png

(4)开始替换。将本地的电脑上面本地文件中该项目打包生成的dist包路径直接复制粘贴在左侧打开

xshell操作服务器_9.png

(5)打开以后将左侧的dist文件下的内容全部复制直接替换掉右侧static文件夹下面的文件(这里记得上一步提过的备份好一份之前的static文件夹)

xshell操作服务器_10.png

到这一步以后,替换文件工作就结束了

四、通过xshell重启刚刚替换过文件的项目 返回xshell,在genuai-idp-qybk-1.0.0-SNAPSHOT-bin目录下面执行./stop.sh指令暂停项目,再使用./start.sh指令重启项目即可完成项目的更新部署。

xshell操作服务器_3.png

这样到线上环境就可以看到更新过的项目啦,希望对你有用

备注:使用tail -f 100 logs/console.log指令可以查看前100条启动日志

xshell操作服务器_4.png

日志如下:

xshell操作服务器_5.png

xshell操作服务器_6.png