精华内容
下载资源
问答
  • const remotePath = "C:/Users/Administrator/Desktop/部署测试/rename.zip"; /* host: 服务器ip port:scp上传的端口号 (默认:22) username:服务器账号 password:服务器密码 */ const server = { host: "192....

    可以使用WinSCP客户端测试是否连通服务器

    一,服务器是Linux

    1, 安装scp2

    npm install scp2 --save-dev
    

    2, 根目录下创建deploy.js

    const client = require("scp2");
    const ora = require("ora");
    const chalk = require("chalk");
    const spinner = ora(chalk.green("正在发布。。。"));
    spinner.start();
    
    /*
       host: 服务器ip
       port:scp上传的端口号 (默认:22)
       username:服务器账号
       password:服务器密码
       path:部署到服务器的路径
    */
    const server = {
      host: "11.11.11.11",
      port: 22,
      username: "root",
      password: "******",
      path: "/html"
    };
    
    client.scp(
      "./dist/",
      {
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password,
        path: server.path
      },
      err => {
        spinner.stop();
        if (!err) {
          console.log(chalk.green("成功"));
        } else {
          console.log(err);
        }
      }
    );
    

    3,运行

    node deploy.js
    

    二,服务器是windows

    注:需要安装插件OpenSSH,请参考WinSCP之Windows与Windows之间传输文件

    1,安装 ssh2-sftp-client

    npm install ssh2-sftp-client
    

    2, 根目录下创建deploy.js

    const ssh2SftpClient = require("ssh2-sftp-client");
    const ora = require("ora");
    const chalk = require("chalk");
    const spinner = ora(chalk.green("正在发布。。。"));
    const path = require("path");
    spinner.start();
    
    /*
      localPath: 本地需要上传的文件,注意不是文件夹
      remotePath:服务器的路径并设置上传后的名称
    */
    
    const localPath = path.join(__dirname, "/dist/dist.zip");
    const remotePath = "C:/Users/Administrator/Desktop/部署测试/rename.zip";
    /*
       host: 服务器ip
       port:scp上传的端口号 (默认:22)
       username:服务器账号
       password:服务器密码
    */
    
    const server = {
      host: "192.168.1.89",
      port: 22,
      username: "administrator",
      password: "123"
    };
    
    function putFile(localPath, remotePath) {
      const sftpClient = new ssh2SftpClient();
      sftpClient
        .connect({
          host: server.host,
          port: server.port,
          username: server.username,
          password: server.password
        })
        .then(() => {
          return sftpClient.fastPut(localPath, remotePath, server);
        })
        .then(() => {
          spinner.stop();
          console.log(chalk.green("成功"));
        })
        .catch(err => {
          spinner.stop();
          console.log(err, "catch error");
        });
    }
    putFile(localPath, remotePath);
    

    3,运行

    node deploy.js
    

    注:临时起意,写的比较简单,后续继续更新!

    展开全文
  • 自动化部署Vue项目

    千次阅读 2020-10-18 18:03:07
    纯客户端渲染的应用在配置部署方面要依赖专门的web服务器,这里用到的是Nginx,如下是安装及配置nginx的各个步骤. # yum是nginx系统中的软件管理工具 利用它下载安装nginx yum install nginx # 查找nginx文件 which ...

    前言

    由于在前两篇博客中做了些前期的准备工作,所以对于那些准备工作这里就不多赘述了.

    一. 在云服务器上安装并配置 Nginx

    纯客户端渲染的应用在配置部署方面要依赖专门的web服务器,这里用到的是Nginx,如下是安装及配置nginx的各个步骤.

    # yum是nginx系统中的软件管理工具 利用它下载安装nginx
    yum install nginx
    
    # 查找nginx文件
    which nginx
    # 查寻nginx版本号
    nginx -v
    
    # 启动 Nginx
    nginx
    # 重启
    nginx -s reload
    # 结束 
    nginx -s stop
    
    # 检查nginx下nginx.conf配置文件是否ok
    cd /etc/nginx
    
    # 查看配置文件
    cat nginx.conf 
    nginx.conf内容中`井号`开头的是注释
    worker_connections 1024; 表示客户端连接服务端个数限制在1024个
    
    # 备份配置文件
    cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.default
    
    # 修改配置文件
    vim /etc/nginx/nginx.conf
    # 插入要修改的内容
    这里修改server对应的:
    # 配置了两个访问的域名地址
      server_name  47.242.36.24 172.24.40.234;  
    # Vue项目存放的地方
      root         /home/www; 								 
    # 然后按esc 再输入:wq 回车即可保存修改
    
    # 测试配置文件是否有语法错误
    nginx -t
    
    # 记得在home下新建www文件
    cd /home
    mkdir www
    
    # 查看错误日志
    cat /var/log/nginx/error.log
    
    # 安装git
    yum install git
    
    # 查看运行 nginx 进程的账号
    ps aux | grep nginx
    

    二. 部署vue.js项目

    • 下载vue项目并上传到自己的git库
    • 配置git项目中的secrets
    • Vue项目中package.json的name不能是中文,否则启动不了网站
    • 在Vue项目根目录新建.github/workflows/deploy.yml并写入下面的内容
    name: Publish And Deploy Demo
    on:
      # 模拟发布分支 push的时候就去自动部署
      push:
        branches:
          - master
    
    jobs:
      build-and-deploy:
        # 乌班图的系统
        runs-on: ubuntu-latest
        steps:
        # 部署到服务器
        - name: Deploy
          uses: appleboy/ssh-action@master
          #  在git账号中配置secrets并填写一些服务器信息,然后通过它获取
          with:
            host: ${{ secrets.HOST }}
            username: ${{ secrets.USERNAME }}
            key: ${{ secrets.KEY }}
            port: ${{ secrets.PORT }}
            debug: true
            # 运行在服务端的命令
            script: |
            	# tmp临时目录
              cd /tmp
              # 克隆git代码 记得安装git
              git clone https://github.com/CONOR007/vue-automated-deployment.git
              cd /tmp/vue-automated-deployment
              # 运行项目中deploy.sh脚本文件
              chmod +x ./deploy.sh
              ./deploy.sh
    
    • 在根目录下新建deploy.sh脚本文件,并输入下面的内容
    #!/bin/bash
    
    # 安装依赖
    cnpm install
    
    # 打包
    npm run build
    
    # 删除 ngnix 指向的文件夹下的文件
    rm -rf /home/www/*
    
    # 将打包好的文件复制过去
    mv /tmp/vue-automated-deployment/dist/* /home/www
    
    # 删除 clone 的代码
    rm -rf /tmp/vue-automated-deployment
    
    • 运行git push开始自动化部署
    • 如果 nginx 启动失败,查看错误日志,权限问题,使用下面方式解决
    # 查看错误日志
    cat /var/log/nginx/error.log
    cd /home/www
    # 更改 www 目录的所有者
    chown nginx:nginx -R .
    
    展开全文
  • 但是早都忘记的一干二浄了,常用的也就是跟vue有关的npm相关的一些使用,在新公司的项目中需要自己在服务器部署代码,所有在组长的带领下,我学习了简单的前端代码部署流程(项目vue-cli3.0),做如下记录: ...

    现在前后端分离的模式习惯了以后,几乎就很少了解过前端代码部署,虽然自己以前也简单了解过node.js服务器的一点知识,但是早都忘记的一干二浄了,常用的也就是跟vue有关的npm相关的一些使用,在新公司的项目中需要自己在服务器部署代码,所有在组长的带领下,我学习了简单的前端代码部署流程(项目是vue-cli3.0),做如下记录:

    1. 首先在项目根目录添加如下文件:

    2. 在deploy.config.js添加配置

     

    3. 安装 Xshell 6 和  Xftp 6(可以方便查看远程项目目录)

    4.打开Xshell 6 新建会话

    5.下载安装包(安装到开发环境devDependencies),package.json配置 deploy运行命令推送到服务器

    6.查看是否运行成功

    展开全文
  • 关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维本文主要介绍shell脚本的一些基本用法以及在前端项目中的应用。将围绕以下几点来展开:shell基本用法(变量...

    关注并将「趣谈前端」设为星标

    每早08:30按时推送技术干货/优秀开源/技术思维

    本文主要介绍shell脚本的一些基本用法以及在前端项目中的应用。将围绕以下几点来展开:

    1. shell基本用法(变量,循环,传参,运算符,流程控制等)

    2. 使用shell脚本自动将项目打包部署到git服务器

    3. 使用nodeJs编写命令行工具

    1. shell基本介绍及用法

    Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁,业界所说的 shell 通常都是指 shell 脚本,Shell 编程跟 java、php 编程一样,只要有一个能编写代码的文本编辑器和一个能解释执行的脚本解释器就可以了。Linux 的 Shell 种类众多,在这里我们介绍一种常用且开源免费的shell——bash。

    1. Shell 变量

      变量声明如下:

    time=10
    

    注:变量名和等号之间不能有空格,变量名命名规则如下:

    • 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头。

    • 中间不能有空格,可以使用下划线(_)。

    • 不能使用标点符号。

    • 不能使用bash里的关键字(可用help命令查看保留关键字)

    我们可以通过如下方式使用变量:

    name="xujiang"
    echo $name
    # 或者这样
    echo ${name}
    

    我们能使用如下方式删除变量:

    unset name
    

    关于shell变量的更多用法,可以参考linux官网,这里就不过多介绍了。

    1. Shell 传递参数

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为: 代表一个数字, 为执行脚本的第一个参数, 为执行脚本的第二个参数,以此类推 其中 n。n代表一个数字,1为执行脚本的第一个参数,2为执行脚本的第二个参数,以此类推,其中0 为执行的文件名

    使用如下:

    echo "文件名:$0";
    echo "参数一:$1";
    echo "参数二:$2";
    echo "参数三:$3";
    # 输出
    文件名:./test.sh
    参数一:1
    参数二:2
    参数三:3
    
    1. Shell 数组

    Bash Shell 只支持一维数组,数组元素的下标由0开始。Shell 数组用括号来表示,元素用"空格"符号分割开,例如:

    names=(name1 ... namen)
    

    我们可以通过如下方式读取数组:

    ${names[0]}
    

    我们可以使用@ 或 * 可以获取数组中的所有元素,例如:

    echo "数组的元素为: ${nsmes[*]}"
    # 输出为
    数组的元素为: A B C D
    
    1. Shell 基本运算符

    Shell支持多种运算符,如下:

    • 算数运算符

    • 关系运算符

    • 布尔运算符

    • 字符串运算符

    • 文件测试运算符

    原生bash不支持简单的数学运算,但是可以通过其他命令来实现,这里我们使用expr。它是一款表达式计算工具,使用它能完成表达式的求值操作。例如:

    #!/bin/bash
    
    total=`expr 2 + 2`
    echo "两数之和为 : $total"
    

    注:这里我们使用反引号``。由于命令行工具这块用的比较少,如果感兴趣,大家可以去官网了解学习。

    1. Shell echo命令

    Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出,这里我们着重介绍与用户交互的输入输出。

    #!/bin/sh
    read name 
    echo "hello $name"
    

    read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量。当我们执行脚本后,输入一个自定义名称,按下回车将输出 'hello xxx',我们是不是想到了vue脚手架中的一些命令呢,是的,我们可以用这个方法去实现自己的脚手架配置或者自动生成项目模版。

    我们也可以用echo将显示结果定向至文件:

    echo "It is mine" > test.js
    

    执行 这个文件后将为我们创建一个test.js文件,并将输出内容写入test.js。

    1. Shell test 命令

    test 命令用于检查某个条件是否成立,它可以进行数值、字符和文件三个方面的测试。

    数值测试:

    • -eq 等于则为真

    • -ne 不等于则为真

    • -gt 大于则为真

    • -ge 大于等于则为真

    • -lt 小于则为真

    • -le 小于等于则为真

    使用方式如下:

    name1=1
    name2=1
    if test $[name1] -eq $[name2]
    then
        echo '相等!'
    else
        echo '不相等!'
    fi
    

    运行脚本后将输出'相等!'。

    字符串测试:

    • = 等于则为真

    • != 不相等则为真

    • -z 字符串 字符串的长度为零则为真

    • -n 字符串 字符串的长度不为零则为真

    例如:

    name1="xu"
    name2="xu"
    if test $name1 = $name2
    then
        echo '两个字符串相等!'
    else
        echo '两个字符串不相等!'
    fi
    
    1. Shell 流程控制

    流程控制我们主要介绍if else, if else-if else和for循环。

    • if else

    if 条件1
    then
        命令操作1
    else
        命令操作2
    fi
    
    • if else-if else

    a=1000
    b=2000
    if [ $a == $b ]
    then
       echo "a 等于 b"
    elif [ $a -gt $b ]
    then
       echo "a 大于 b"
    elif [ $a -lt $b ]
    then
       echo "a 小于 b"
    else
       echo "无"
    fi
    
    • for 循环

    # 一般格式
    for var in a1 a2 ... aN
    do
        命令1
        命令2
        ...
        命令N
    done
    

    在了解完如上知识点后,我们来看看这些能做些什么。

    2. 使用shell脚本自动将项目打包部署到git服务器

    1. 一个git提交的例子

    #!/bin/bash
    git add .
    git commit -m 'xj--'$1
    git push
    
    # 提交时只需要执行 bash git.sh '参数内容'即可完成提交操作
    

    首先,我们在项目根目录下新建一个git.sh文件,输入以上脚本,保存,然后我们后面要提交代码时,只需要执行 bash git.sh '你的注释',就可以将代码提交到服务器上了,是不是简化了我们提交的步骤呢

    1. vue项目部署

    我在一张图教你快速玩转vue-cli3这篇文章中教大家了如何独立配置项目,文章末尾有写到部署的方式,如下:

    #!/usr/bin/env sh
    
    # 当发生错误时中止脚本
    set -e
    
    # 构建
    npm run build
    
    # cd 到构建输出的目录
    cd dist
    
    git init
    git add -A
    git commit -m 'deploy'
    
    git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master
    
    cd -
    

    在学完shell脚本后,是不是觉得豁然开朗了呢。如果有更复杂的需求,我们可以用同样的方式去部署。

    3.使用nodeJs编写命令行工具

    我们这里使用commander来搭建node命令行,接下来我会给出最基本的用法,下一篇文章将专门来给大家讲解如何搭建一个高可用的node命令行工具,在此之前,大家可以自由摸索,也许会有更好的方式。

    // 1.构建项目目录
    mkdir xxx
    cd xxx
    npm init
    
    // 2.安装commander模块
    npm install commander --save
    
    // 3.新建bin/[你自定义的命令行文件名]
    #!/usr/bin/env node
    
    var program = require('commander');
    
    program.version('0.0.1');
    
    program
        .command('help')
        .description('显示使用帮助')
        .action(function() {
            program.outputHelp();
        });
    
    program
        .command('create [dir]')
        .description('创建一个空博客')
        .action(function(dir) {
            console.log('create %s', dir);
        });
    
    program
        .command('preview [dir]')
        .description('实时预览')
        .action(function(dir) {
            console.log('preview %s', dir);
        });
    
    program
        .command('build [dir]')
        .description('生成整站静态HTML')
        .option('-o, --output <dir>', '生成的静态HTML存放目录')
        .action(function(dir) {
            console.log('创建 %s, 输出 %s', dir, options.output);
        });
    
    // 开始解析命令
    program.parse(process.argv);
    
    // 4.在package.json目录下执行关联操作
    npm link
    
    // 5.测试,输入相关命令即可执行对应操作
    xxx help

    ❤️ 看完三件事

    如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

    • 点个【在看】,或者分享转发,让更多的人也能看到这篇内容

    • 关注公众号【趣谈前端】,定期分享 工程化 可视化 / 低代码 / 优秀开源


    从零搭建全栈可视化大屏制作平台V6.Dooring

    从零设计可视化大屏搭建引擎

    Dooring可视化搭建平台数据源设计剖析

    可视化搭建的一些思考和实践

    基于Koa + React + TS从零开发全栈文档编辑器(进阶实战

    点个在看 你最好看

    展开全文
  • 基于node-scp2的自动化部署方案 背景 基于node-scp2的自动化部署方式 基于node-scp2方式的自动化部署,只需要在创建项目阶段配置好前三个步骤,之后每次上传文件至服务器时只需要最后一步:执行步骤三注册的命令...
  • VUE自动化部署

    2020-11-18 14:17:58
    方案本质上就是就是ssh进入服务器,scp本地文件到服务器。嘻嘻 缺点很明显,不够安全,不能回滚版本 优点就是,很简便。自行判断哦 一、安装scp2 npm install scp2 --save-dev #或 cnpm install scp2 --save-dev ...
  • 最后,在jenkins里安装git插件,并且通过webHooks与远程仓库建立连接,最终在代码提交时触发自动构建项目,并且在项目的nginx部署地址可以访问到。 一、开发工具和版本管理工具 这里介绍vue项目的使用VsCode开发,...
  • 本篇主要介绍如何自动化部署vue项目 下篇讲如何自动化部署nodejs项目 我这里是mac os,如果你用linux就不会碰到很多下面碰到的问题了。 相关应用 jenkins docker 整个流程 首先我们把我们的电脑想象成一台...
  • 本文基于上一篇文章的测试环境,通过jenkins构建一个简单的vue项目,并部署至上文的k8s集群中。 上文链接:https://blog.csdn.net/walkon1007/article/details/112769224 一、安装JavaScript 运行环境Node.js 下载...
  • 前言常规的部署项目,一般分为两种方式:第一种:直接上传。部署项目需要经过本地build,压缩文件,将压缩包上传至服务器并解压文件等步骤,过程较为繁琐。第二种:利用git服务器。ssh进入web服务器 ---> 执行git ...
  • web端自动化部署方案

    2021-01-30 23:52:10
    为了提高发布效率,践行DevOps,我们使用 gitlab 的 CI 工具作为我们前端项目自动化部署方案。 集成后的开发&发布模式 发布测试环境:代码提交到test分支自动发布。 发布正式环境:将test代码合并到master...
  • 你在本地跑一个项目,当你push到远程仓库(github)的时候,远程仓库会及时更新。这时触发webhock钩子。webhock钩子需要绑定你的服务接口,并监听你的 git 事件。比如本文案例push事件,监听到后,就触发你写好的脚本...
  • 项目部署运维往往是一件让人很头疼的事情,如果人工每次进行部署,繁琐的流程让人望而生畏,每次又都是重复的操作,让人越看越厌。这篇文章将介绍如何使用jenkins+docker自动化部署前端项目
  • jenkins+svn+vue自动化部署实现

    千次阅读 2019-05-10 17:31:00
    2019独角兽企业重金招聘Python工程师标准>>> ...前端vue打包项目成dist->上传到svn...执行jenkins部署构建项目     转载于:https://my.oschina.net/u/1017791/blog/3048118
  • 以下实例项目vue项目,其他项目当然也雷同咯在项目中建一个这个么脚本文件不说了,上代码#!/bin/sh handle=$1; env=$2; # 远程部署机 webhook # 如果用远程机器部署的话就要用到以下方法 # preHandle(){ # git ...
  • 使用Jenkins部署服务器端应用程序是非常方便的,那么使用Jenkins部署web前端应用程序效果怎么样呢,如果可以使用Jenkins部署,那么就可以直接从版本库自动拉取,自动构建,相比传统方式会省去很多麻烦。 一、准备 ...
  • 阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识,只要按照本教程的指引,就能够实现自动化部署项目。 PS:本人所用电脑操作系统为 windows,即以下所有的操作均在 windows 下运行。其他操作系统的...
  • SpringBoot + Vue 前后端分离项目集成部署前言一、Vue 打包的项目如何部署?1.1 Vue 项目打包1.2 使用 Express 代理静态资源文件二、SpringBoot 项目如何部署?2.1 数据库部署可能出现的问题2.2 SpringBoot 项目打包...
  • 采用gitlab+Jenkins来实现自动化部署的文章和教程网上有很多,可是这些教程只是写了如何进行配置和部署可是在这个过程中遇到的坑并没有给出解决方案以至于自己在按照这些文章教程进行实践时碰到了一些棘手问题而且是...
  • 这篇博客是源于朱敏的信息可视这门课,我和胡负责前端,应老师要求需要将前端部署到云服务器上。于是有了这篇的记录过程。 一、 win10 安装ssh服务器 ...三、使用npm run build命令编译项目自动生成一个dist..
  • 在共同需求的基础上,每个客户又有不同的需求(客制) 如果只是一两个客户还好,在基础版本上分两份前端文件,分别维护。但是客户达到一定数量级后,比如5个、8个甚至更多,这时候这种机械的本办法就费时耗力了,...
  • 显然,作为初学者来说,如果有Vue项目,通过Docker+Nginx的方式部署到服务器上,是一个简单、粗暴、合理的选择,还能学到很多东西。 但是这三样内容,其实并不在一本教材上,可能需要看三本书才能做好。并且三个东西...
  • 引言 现在大部分的公司都搭建了自己的Gitlab,除了Git的代码管理...如上官方图示,可以理解为Gitlab给开发者提供了一项功能,在代码提交后自动触发一段开发者自定义的脚本,以此来完成诸如但不限于构建部署的工作。 ...
  • vue项目部署到云服务器 内容精选换一换当您在使用VPC的路由表功能时,需要在弹性云服务器上部署SNAT,使得VPC内其他没有绑定EIP的弹性云服务器可以通过它访问Internet。该配置对VPC内所有子网生效。已拥有需要部署...
  • Vue 项目性能优化方案

    万次阅读 多人点赞 2019-08-23 10:00:33
    Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希.....
  • 一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我...
  • 我们知道vue项目在构建后,是生成一系列的静态文件 常规布署我们只需要将这个目录上传至目标服务器即可 // scp 上传 user为主机登录用户,host为主机外网ip, xx为web容器静态资源路径 scp dist.zip user@host:/xx/...
  • 传统部署方式 传统部署流程 配置 Host + Port 压缩发布包 把发布包传到服务端 Linux 上的 scp 命令 解压 安装依赖 生产环境启动服务 配置 Host + Port nuxt.config.js中的server属性 host 默认 ...
  • 而现在就职的公司采用的是自动化部署方案,在功能开发完后,将功能分支合并到master分支上,服务器就会自动构建代码。所以才有了学习自动化部署的想法。 本文中的一些概念、步骤,可能解释的不是很清楚或者有错误...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,730
精华内容 3,092
关键字:

vue项目自动化部署方案

vue 订阅