前端项目完成后如何部署到服务器

271 阅读2分钟

在前后端分离的项目中,项目完成后前端需要部署到服务器,在没有Jenkins、Travis CI 等持续集成交付(CI / CD)的工具时,可以使用 xshell 或者 xftp 来完成。

xshell 与 xftp

  • xshell(下载地址
    • 用于连接Linux服务器的终端软件,通过Linux命令进行操作
image.png
  • xftp(下载地址
    • 通常我们使用的Unix系统服务器都是没有可视化界面的,xftp 可以在远程主机之间拖放文件,并实时查看进度
image.png

连接到服务器

两个软件的操作相同:

主机输入服务器的公网 IP ,协议、端口号按照默认即可。点击连接后输入用户名和密码,连接到当前会话。

image.png

xshell 上传及部署

xftp的操作较简单, 与 xshell 操作的目录相同,直接拖拽文件即可。下面介绍一下 xshell 的操作:

  1. 进入前端目录: cd /usr/local/nginx/html

    如果有多个项目,在 html 文件夹下建立不同的文件夹分别上传项目 dist 压缩文件 (新建文件夹指令:mkdir myProject/

  2. 安装压缩和解压工具

    将项目文件打包并压缩为 dist.zip后,由于默认情况下 linux 是没有上传以及解压功能的,需要单独安装压缩和解压工具

    • 安装压缩工具:yum install zip
    • 安装解压工具:yum install unzip
  3. 上传文件并解压

  • 上传:rz
  • 解压:unzip dist.zip
  1. 访问网站:http://域名或 ip/myProject/dist/#/

域名或 ip 后面的路径为 html 下的项目路径,项目路由为 hash 模式时,路径后需要加上 # 号,history 模式不需要加,但要注意部署后刷新页面出现 404 的问题

  1. 其它

    如果在上传时遇到乱码问题,先 ctrl+c,再用指令将乱码文件删除后重新上传即可