Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本

Vue–vue项目部署–3.服务器一键更新部署

  1. 本地Windows10运行
  2. 服务器Linux运行
  3. 设置自动部署(本篇)

文章目录

    • Vue--vue项目部署--3.服务器一键更新部署
    • 1.环境、工具
    • 2.修改文件目录
    • 3.引入scp2库
    • 4.文件修改详细
        • 1.products.js文件:数据库连接信息
        • 2.index.js文件:上传服务器运行js
        • 3.package.json修改:新增指令
    • 5.学习博客

注:
1.本篇服务器项目部署相关,在博客 2.服务器Linux运行
2.本文使用密钥连接服务器

1.环境、工具

工具/环境 版本
服务器 const OS 7.5
代码工具 VScode 1.42
cnpm Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本_第1张图片
nginx(项目运行工具) nginx 1.16

2.修改文件目录

Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本_第2张图片

  1. 新建deploy文件夹,在根目录下
  2. 新建products.js文件
  3. 新建index.js文件
  4. MyServer是我的服务器连接密钥

3.引入scp2库

注:我一直使用的是cnpm因为比较快

cnpm i -D cross-env scp2 ora 

4.文件修改详细

1.products.js文件:数据库连接信息

截图
Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本_第3张图片
代码

/**
 1. 服务器信息
 */
const fs = require('fs');
const envfile = process.env.NODE_ENV === 'prod' ? 0 : 1;
const SERVER_LIST = [
    {
        name: '生产环境',
        domain: 'www.xxxxx.xyz',// 域名
        host: '49.xxxxx.123',// ip
        port: 22,// 端口
        username: 'root', // 登录服务器的账号
        // password: 'Gyxxxxxxxx6',// 登录服务器的账号
        privateKey: fs.readFileSync('E:/xxxxx/deploy/MyServer'),  // 密钥文件
        path: '/opt/xxxxx'// 发布至静态服务器的项目路径
    },{
        name: '测试环境',
        domain: 'www.xxxxx.xyz',// 域名
        host: '49.xxxxx.123',// ip
        port: 22,// 端口
        username: 'root', // 登录服务器的账号
        // password: 'Gyxxxxxxxx6',// 登录服务器的账号 
        privateKey: fs.readFileSync('E:/xxxxx/deploy/MyServer'),  // 密钥文件
        path: '/opt/xxxxx'// 发布至静态服务器的项目路径
    }
];
module.exports = SERVER_LIST[envfile];

解析

  1. 本文件配置服务器相关信息,
  2. password是服务器连接密码,本人使用的是密钥连接,所以password未使用
  3. NODE_ENV为接受环境参数,启动时传参,本文在传参时说明

2.index.js文件:上传服务器运行js

截图
Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本_第4张图片
代码

const scpClient = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const server = require('./products');
const spinner = ora('正在发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器...');
spinner.start();
scpClient.scp(
  './dist', // 这个路径是你需要上传到服务器的文件夹路径
  {
    host: server.host,
    port: server.port,
    username: server.username,
    // password: server.password,
    privateKey: server.privateKey,
    path: server.path
  },
  function (err) {
    spinner.stop();
    if (err) {
      console.log(chalk.red('发布失败.\n'));
      throw err;
    } else {
      console.log(chalk.green('Success! 成功发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器! \n'));
    }
  }
);

解析

  1. ./dist为项目打包默认目录,根据个人修改
  2. NODE_ENV为接受环境参数,启动时传参,本文在传参时说明

3.package.json修改:新增指令

截图
Vue--vue项目部署--3.服务器一键更新部署,超超超简单版本_第5张图片
代码
新增指令

"deploy:dev": " npm run build && cross-env NODE_ENV=dev node ./deploy",
"deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy"

解析

  1. npm run build为打包指令
  2. cross-env NODE_ENV=prod为传递环境参数NODE_ENVprod

5.学习博客

文档:Vue–打包部署借鉴博客3.note
链接:http://note.youdao.com/noteshare?id=c5b63f8523b72edd77cdd6e2341ef726&sub=606A5DD0160A468D808BB30E92ED889F

你可能感兴趣的:(Vue学习,Linux学习,nginx学习)