前端本地项目通过vscode插件自动部署dist文件到服务器

1.在vscode应用商店中搜索拓展sftp插件,然后进行安装。
2.安装完成后重启窗口,按快捷键Ctrl+shift+p,输入sftp:config回车进入配置文件。

image.png

3.修改配置文件如下:

{
“host”: “120.0.0.1”,
“port”: 21,
“username”: “username”,//ftp用户名
“password”: “password”,//ftp密码
“protocol”: “ftp”,
“agent”: null,
“privateKeyPath”: null,
“passphrase”: null,
“passive”: false,
“interactiveAuth”: true,
“remotePath”: “/”,//ftp目录路径
“uploadOnSave”: true,
“syncMode”: “update”,
“ignore”: [
/.vscode/”,
/.git/”,
“**/.DS_Store”
],
“watcher”: {
“files”: “glob”,
“autoUpload”: true,//自动上传
“autoDelete”: true
}
}
配置完后修改文件后保存后就可以自动上传了!

作者:小程序开发小张
链接:https://www.jianshu.com/p/ef28225585f5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以的,Github Actions可以用来自动前端项目部署到云服务器。以下是一个简单的例子: 1. 首先,在你的Github仓库中创建一个`.github/workflows`文件夹,并在该文件夹下创建一个`deploy.yml`文件。 2. 在`deploy.yml`文件中设置触发部署的事件,例如push到master分支。然后设置一个`job`,该`job`会在触发事件后运行。 3. 在该`job`中,使用`actions/checkout` action拉取代码,并使用`actions/setup-node` action安装依赖。 4. 接下来,使用你喜欢的打包工具打包你的前端代码,例如webpack或者parcel。打包后的文件会被存储在一个`dist`文件夹中。 5. 然后,使用`appleboy/ssh-action` action将打包后的文件上传到云服务器。该action会使用SSH登录到你的服务器,并将文件复制到服务器上的指定目录。 下面是一个示例的`deploy.yml`文件: ```yml name: Deploy to Cloud Server on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v1 with: node-version: '12.x' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Deploy to Cloud Server uses: appleboy/ssh-action@master with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} password: ${{ secrets.PASSWORD }} port: ${{ secrets.PORT }} script: | cd /path/to/your/project rm -rf * scp -r /path/to/your/project/dist/* ./ ``` 这个例子是使用密码登录到云服务器的。如果你使用的是SSH Key,你需要相应地修改`deploy.yml`文件。此外,你需要在Github仓库的`Settings`中添加`secrets`,以保存你的服务器信息和登录凭证。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值