vue部署于腾讯云cos

文章目录

vue部署于腾讯云cos
- 原理
- cos对象存储
- - cos使用配置准备
  - cos辅助工具
- npm插件
- - scp2
  - ~~cos-nodejs-sdk-v5~~（不推荐）
- 项目代码修改
- - package.json
  - build/webpack.base.conf.js
  - build/secure-file-copy.js
  - build/cos.js
- config
- - config/index.js
  - config/prod.env.js

这篇博客的起源来源于同事的一次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 协议访问的分布式存储服务，它能容纳海量数据并保证用户对带宽和容量扩充无感知，可以作为大数据计算与分析的数据池。¹

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

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

cos使用配置准备

获取腾讯云账号信息APPID
找不到的可以点击右边，登录就好了。APPID获取
获取腾讯云bucket名
找不到的可以点击右边，登录就好了。bucket获取
所属地域之后会用到，这里暂且记下就好。
API密钥获取
找不到的可以点击右边，登录就好了。API密钥获取

cos辅助工具

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

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

npm插件

scp2

安装
npm i scp2 -g or cnpm i scp2 --save

使用演示，以我的代码为例：
在 build/build.js 内

// 引用
const client = require('scp2')  // 自动打包部署插件// 实际使用
/** 自动部署 */
client.scp('dist/', {port: ##,  // 端口号，纯数字host: '###.###.###.###',  // 字符串，IPusername: '#########',  // 登陆服务器用户名，找负责后台服务的大腿或者运维大兄弟要去吧，记得要打开读写权限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传文件最终导致向cos上传文件失败，在电脑性能不行的时候体现尤为明显，故不推荐使用

腾讯云cos帮助插件

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

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

这里需要之前获取到的 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({  // 配置 PluginsecretId: '****************',secretKey: '***************',bucket: '******************',  // COS 存储对象名称，格式为对象名称加应用ID (APPID)，如： bucket-1250000000region: 'ap-beijing',  // COS 存储地域exclude: /index.html$/,  // 可选，排除特定文件，正则表达式，如: /index.html$/path: 'static/pro/'  // 存储路径， 默认为 [hash]})
)

项目代码修改

只简单介绍一下我的修（zhe）改（teng）之旅。

package.json

{"scripts": {"deploy:pre": "cross-env COS_ENV=pre npm run build && cross-env COS_ENV=pre node build/cos.js && cross-env COS_ENV=pre node build/secure-file-copy.js","deploy:prod": "cross-env COS_ENV=prod npm run build && cross-env COS_ENV=prod node build/cos.js && cross-env COS_ENV=prod node build/secure-file-copy.js "}
}

Windows使用 set, set ENV=pre 设定环境变量，用于后边的打包区分不同的环境
注意：之所以 ...pre 和 && 之间没有空格，是为了避免之后的识别出现空格的问题
Mac使用 export, export ENV=pre设定

为了跨平台，所以我毅然决然的使用了 cross-env 包，但是有个问题就是我没有办法定义贯穿三个脚本的共享变量，所以如你所见，我写了三次环境变量，望有知道怎么整的大神不吝赐教，拜谢

vue基于腾讯云cos部署相关推荐

基于腾讯云COS+CI图文音视频解决方案
从早期的门户网站,到后面的feeds流,再到如今的各种垂直行业的社区分享,一次次变更成就了近几年行业中的领跑者.从行业领先的微博,再看小红书.B站等等,绝对都是可以看到feeds和社区的影子.而其中跑 ...
Vue - 使用腾讯云SCF部署Vue项目（支持GitHub Action）
一.前提条件 1.本地已有一个Vue2/Vue3项目腾讯云SCF本身支持使用模板创建(模板创建参考)一个Vue项目并部署,但本文主要讲解将本地原有的Vue项目改造为支持Serverless SCF ...
基于腾讯云服务器部署微信小程序后台服务（Python+Django）
一前言微信小程序,相信大家早已熟知,它是一种无需下载安装即可使用的轻型应用,具有跨平台和接近Native App性能体验的优势.从开发模式上说,它是前后端分离的,微信小程序负责实现前端应用,后端服 ...
腾讯云cos部署静态网站
COS创建存储桶,在对应COS存储桶的基础配置的静态网站中开启静态网站点击创建好的COS存储桶名字,左侧树种点击域名与传输管理->自定义 CDN 加速域名去域名供应商中添加对应域名解析记录的 ...
Mendix基于腾讯云部署最佳实践
本实践由腾讯云与西门子数字化工业软件授权发布,未经允许不得转载. 1. 概述本文档介绍了西门子企业级应用开发平台Mendix应用快速托管到腾讯云容器服务(简称TKE)的最佳实践.该方案仅用于非生产 ...
hexo静态网站部署到腾讯云cos
hexo支持很多部署方案,最直接的就是部署在GitHub Pages服务上,国内gitee.coding等代码托管平台也都支持静态网站服务,而且免费. 但是GitHub在国内访问不太稳定,国内的代码托 ...
Hadoop社区正式支持腾讯云COS，全球大数据开发者将无缝使用中国云存储
8月4日消息,知名大数据开源社区Hadoop近日宣布对腾讯云对象存储COS的正式支持.后续,开发者在基于Hadoop架构进行大数据分析时,能够在不修改代码的情况下,无缝高效地使用腾讯云COS来处理海量 ...
APP的文件数据直传腾讯云COS实践
简介本文主要介绍基于腾讯云对象存储COS,如何快速实现一个app的文件直传功能.您的服务器上只需要生成和管理访问密钥,无需关心细节,文件数据都存放在腾讯云 COS 上. 架构说明对于app应用,把 ...
华为云实战之对象存储的使用以及与腾讯云COS对比
一.OBS是什么 OBS即对象存储服务(Object Storage Service),是一个基于对象的海量存储服务,为客户提供海量.安全.高可靠.低成本的数据存储能力,包括:创建.修改.删除桶,上传 ...

vue基于腾讯云cos部署