前端命令行部署:再也不用把dist包给后端部署服务了!

19,822 阅读2分钟

好物推荐

超简单的命令行部署。给在小公司部署还是给后端dist包的萌新小伙伴们~

这边项目本身就是使用命令行部署到,不过那个命令行工具是自己写的,是嵌入到公司某一个私有npm包里,和其他依赖耦合在一起。灵活性不是很好。 这两天发现了一个别人写的一个deploy cli。感觉蛮好用的。分享一下。

希望可以帮助更多刚入行小伙伴了解更多前端玩法。

前端命令行部署

很多公司的前端部署流程都是先打一个dist包。然后给后端同事帮忙部署。

前端::: 1714281510854.png

后端:::

529ae5c36b03377bf116bafea2e95f1.png

(开玩笑的,工作中的后端同事都没那么调皮)

本文的内容就是如何使用命令行进行前端自动部署。

我们整个网站的读取,其实就是我们上传一个静态的文件包到服务器,然后服务器上的后台服务读取我们的静态包,来进行页面的展示。所以,前端自动化部署的关键,就是,能把dist包传到服务器的指定目录下就OK了。

部署流程

推荐一个deploy cli工具(deploy-cli-service)

安装
  1. 执行 npm install deploy-cli-service -g 进行全局安装 。

  2. 执行 deploy-cli-service - v 查看版本

初始化配置文件

在项目根目录执行 deploy-cli-service init 进行初始化

deploy-cli-service init命令执行后项目目录下会出现一个名为deploy.config的文件

image.png

deploy-cli-service init初始化的内容会被默认输入到 deploy.config

修改配置文件

deploy-cli-service init初始化之后输入的内容都会默认被写入deploy.config文件中。

image.png

然后看看相关的属性有没有什么需要修改的就ok。

配置部署命令

image.png

"deploy:test": "deploy-cli-service deploy --mode test"," 写入到 package.json中的script里。

然后在命令行执行 "npm run deploy:test"

成功部署后会如下显示

image.png

image.png

注意

配置 deploy.config.js时尽量使用ssh密钥登录,不要使用服务器密码,把服务器密码写在前端代码里是一件非常不好的操作。

deploy-cli-service npm地址

luck