vue基于腾讯云cos部署

其他 2019-03-21 18:00:52 阅读次数: 0
版权声明：本文为simorel原创文章，未经simorel允许不得转载。 https://blog.csdn.net/Simoral/article/details/83834482

vue部署于腾讯云cos

文章目录

这篇博客的起源来源于同事的一次cos部署指导,为了便于下次使用,特记录于此.

原理

整体一知半解版本：
1. 首先打包好的文件夹下会包含一个 index.html 文件和 static 文件夹，这个 static 文件夹就会包含我们需要的静态资源，使用者打开网页的时候，index.html会去找同目录下的static内的资源，而这个过程是很慢的，index.html文件很小还没有什么感觉，但要是加载打包好的静态资源速度就会变慢。
2. 这个时候就轮到我们的主角cos登场了，当我们将static文件夹发送到cos内，相当于使用者就近从服务器拿取静态资源，速度无疑快很多。
3. 所以整体步骤为：

	1. 更改打包index.html内的引用位置为cos路径
	2. 将static文件夹发送至cos服务器路径下
 	3. 将index.html发送至后台服务器路径下

cos对象存储

对象存储（Cloud Object Storage，简称：COS）是腾讯云提供的面向非结构化数据，支持 HTTP/HTTPS 协议访问的分布式存储服务，它能容纳海量数据并保证用户对带宽和容量扩充无感知，可以作为大数据计算与分析的数据池。1

简而言之，cos就是类似天猫超市方式，在离我们最近的地方构建仓库，把我们需要的资源就近调拨给我们；之前的上传服务器方式，类似淘宝普通商家，从商家那里发送资源给我们，这样就会造成住的远的人要很久才能取到资源。

因为我是基于vue部署于腾讯云cos，参考Node.js SDK

cos使用配置准备

  1. 获取腾讯云账号信息APPID
    找不到的可以点击右边，登录就好了。APPID获取
    appid获取

  2. 获取腾讯云bucket名
    找不到的可以点击右边，登录就好了。bucket获取
    所属地域之后会用到，这里暂且记下就好。
    bucket获取

  3. API密钥获取
    找不到的可以点击右边，登录就好了。API密钥获取
    SecretId获取

cos辅助工具

同事推荐使用的官方工具COSBrowser，下载操作系统对应的安装包就好。
COSBrowser下载演示

下载好后安装就好，但是登陆的时候需要的是之前获取的SecretId、SecretKey作为登录凭据。登录就可以看到cos根路径下文件夹了。
COSBrowser演示

npm插件

scp2

scp2

  1. 安装
    npm i scp2 -g or cnpm i scp2 --save
  2. 使用演示，以我的代码为例：
    在 build/build.js 内
    // 引用
const client = require('scp2')  // 自动打包部署插件

// 实际使用
/** 自动部署 */
client.scp('dist/', {
  port: ##,  // 端口号，纯数字
  host: '###.###.###.###',  // 字符串，IP
  username: '#########',  // 登陆服务器用户名，找负责后台服务的大腿或者运维大兄弟要去吧，记得要打开读写权限
  password: '**********',  // 登陆服务器密码，同上
  path: 'home/www'  // 这个是要放在服务器上的路径
}, function (err) {
  if (err) {
    console.log(chalk.red('  Send failed with errors.\n' + err))        
  } else {
    console.log(chalk.cyan('  Send files to server success.\n'));
  }
})
    这里我使用了sftp协议，所以是22端口。所以需要配置端口号、主机IP、用户名、密码、存放路径。
    有其他需求的请详询scp2

cos-nodejs-sdk-v5

腾讯云cos帮助插件

  1. 安装
    npm i cos-nodejs-sdk-v5 --save or cnpm i cos-nodejs-sdk-v5 --save

  2. 使用演示，以我的代码为例：

    • 这里需要之前获取到的 SecretId、 SecretKey、 bucket、 appi、 cos存储路径。
    • 特别注意排除 index.html 是纯正则表达式，不要单引号。
    • region 和之前所属地域对应，具体详询官方文档

    在 `build/webpack.prod.conf.js` 内 
    // 引用 腾讯云cos
const CosPlugin = require('cos-webpack')  // 上传腾讯云cos插件

// 这里直接写在参数webpackConfig内好像无法判断，
// 所以写在了后面，
// 使用push添加
webpackConfig.plugins.push(
	new CosPlugin({  // 配置 Plugin
  		secretId: '****************',
      	secretKey: '***************',
  		bucket: '******************',  // COS 存储对象名称，格式为对象名称加应用ID (APPID)，如： bucket-1250000000
  		region: 'ap-beijing',  // COS 存储地域
  		exclude: /index.html$/,  // 可选，排除特定文件，正则表达式，如: /index.html$/
  		path: 'static/pro/'  // 存储路径， 默认为 [hash]
    })
)

项目代码修改

要修改的文件：
要修改的文件

相关要修改文件目录：

project
|__ .gitignore
|__ README.md
|__ package.json
|__ build
	|__ build.js
	|__ utils.js
	|__ webpack.prod.conf.js
|__ config
	|__ index.js

.gitignore

因为我修改了打包文件夹目录为：

project
|__ deployment
	|__ pre
		|__ static
		|__ index.html
	|__ pro
		|__ static
		|__ index.html

所以需要将 /deployment/ 添加到 .gitignore 文件内。

# Add deployment document
/deployment/

README.md

这个可有可无，但是为了以后打包方便，还是写一下吧。

### 部署到cos的测试方式
npm run build-pre

### 部署到cos的正式方式
npm run build-pro

package.json

{
	"scripts": {
		"build-pre": "set ENV=pre&& node build/build.js",
		"build-pro": "set ENV=pro&& node build/build.js"
	}
}
  • set ENV=pre 设定环境变量，用于后边的打包区分不同的环境
  • 注意： 之所以 ...pre 和 && 之间没有空格，是为了避免之后的识别出现空格的问题

config/index.js

还记得之前部署的文件夹目录吗，参见部署文件夹目录

  • index 存放的是 index.html 文件路径
  • assetsRoot 存放的是打包文件的根目录
  • assctsPublicPath 指定 index.html 引用的静态资源路径，绝对路径
  • cosPath 指定文件存放在cos的相对路径
pre: {
    index: path.resolve(__dirname, '../deployment/pre/index.html'),
    assetsRoot: path.resolve(__dirname, '../deployment/pre'),
    assetsPublicPath: 'https://test-1234567890.cos.ap-beijing.myqcloud.com/static/pre/',
    cosPath: 'static/web-development'
  },

  pro: {
    index: path.resolve(__dirname, '../deployment/pro/index.html'),
    assetsRoot: path.resolve(__dirname, '../deployment/pro'),
    assetsPublicPath: 'https://test-1234567890.cos.ap-beijing.myqcloud.com/static/pro/',
    cosPath: 'static/web'
  }

build/utils.js

  • path 打包文件根目录的绝对路径
  • publicPaht cos绝对路径
  • filename index文件的绝对路径
/** 
 * 创建部署配置 
 * 根据process.env.ENV判断使用哪些配置
 * - pre cos测试环境
 * - pro cos正式环境
 * - default build普通环境，直接部署在服务器上
 * @returns {Object} 配置对象
 */
exports.deploymentConfig = () => {
  let result = {};
  switch (process.env.ENV) {
    case 'pre':
      result.path = config.pre.assetsRoot;
      result.publicPath = config.pre.assetsPublicPath;
      result.filename = config.pre.index;
      break;
    case 'pro':
      result.path = config.pro.assetsRoot;
      result.publicPath = config.pro.assetsPublicPath;
      result.filename = config.pro.index;
      break;
    default:
      result.path = config.build.assetsRoot;
      result.publicPath = config.build.assetsPublicPath;
      result.filename = config.build.index;
      break;
  }
  return result;
}

build/webpack.prod.conf.js

// 腾讯云cos
const CosPlugin = require('cos-webpack')  // 上传腾讯云cos插件

output: {
	// path: config.build.assetsRoot,
	path: utils.deploymentConfig().path,  // cos
	// 添加这一行，避免index.html无法加载
	// publicPath: './',
	publicPath: utils.deploymentConfig().publicPath,  // cos
}

/** 确定是否传送到cos */
if (process.env.ENV) {
  webpackConfig.plugins.push(
    /** 腾讯云cos */
    new CosPlugin({  // 配置 Plugin
      secretId: '******************',
      secretKey: '*****************',
      bucket: 'test-1234567890',  // COS 存储对象名称，格式为对象名称加应用 ID，如： bucket-1250000000
      region: 'ap-beijing',  // COS 存储地域
      exclude: /index.html$/,  // 可选，排除特定文件，正则表达式，如: /index.html$/
      path: process.env.ENV === 'pre' ? config.pre.cosPath : config.pro.cosPath  // 存储路径， 默认为 [hash]
    })
  )
}

build/build.js

const client = require('scp2')  // 自动打包部署插件
const utils = require('./utils')

// utils.deploymentConfig().path 添加整体目录为打包目录
rm(path.join(utils.deploymentConfig().path, config.build.assetsSubDirectory), err => {
	
	......

	if (process.env.ENV) {
      console.log(chalk.cyan('  Send files to cos success.\n'))
    }
    
    // #region 自动部署
    /** 本地打包文件路径 */
    let filePath = '';
    /** 服务器存放打包文件路径 */
    let targetPath = '';
    switch (process.env.ENV) {
      case 'pre':
        filePath = 'deployment/pre/';
        targetPath = '/home/www/pre';
        break;
      case 'pro':
        filePath = 'deployment/pro/';
        targetPath = '/home/www/pro';
        break;
      default:
        filePath = 'dist/';
        targetPath = '/home/www';
        break;
    }
    /** 自动部署 */
    client.scp('dist/', {
      port: **,
      host: '************',
      username: '********',
      password: '********',
      path: '************'
    }, function (err) {
      if (err) {
        console.log(chalk.red('  Send failed with errors.\n' + err))        
      } else {
        console.log(chalk.cyan('  Send files to server success.\n'));
      }
    })
    // #endregion
}

  1. cos命名参考 ↩︎

猜你喜欢

转载自blog.csdn.net/Simoral/article/details/83834482
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022