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

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

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

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

1.环境、工具

工具/环境	版本
服务器	const OS 7.5
代码工具	VScode 1.42
cnpm
nginx（项目运行工具）	nginx 1.16

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文件：数据库连接信息

截图

代码

/**
 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

截图

代码

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修改：新增指令

截图

代码
新增指令

"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_ENV为prod

5.学习博客

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