vue-cli3 项目从搭建优化到docker部署 (6)

日期：2021-04-30 栏目：程序人生浏览：次

在 scripts目录下创建一个 upcdn.js 文件

// /scripts/upcdn.js const qiniu = require('qiniu') const glob = require('glob') const mime = require('mime') const path = require('path') const isWindow = /^win/.test(process.platform) let pre = path.resolve(__dirname, '../dist/') + (isWindow ? '\\' : '') const files = glob.sync( `${path.join( __dirname, '../dist/**/*.?(js|css|map|png|jpg|svg|woff|woff2|ttf|eot)' )}` ) pre = pre.replace(/\\/g, 'http://www.likecs.com/') const options = { scope: 'source' // 空间对象名称 } var config = { qiniu: { accessKey: '', // 个人中心秘钥管理里的 AccessKey secretKey: '', // 个人中心秘钥管理里的 SecretKey bucket: options.scope, domain: 'http://ply4cszel.bkt.clouddn.com' } } var accessKey = config.qiniu.accessKey var secretKey = config.qiniu.secretKey var mac = new qiniu.auth.digest.Mac(accessKey, secretKey) var putPolicy = new qiniu.rs.PutPolicy(options) var uploadToken = putPolicy.uploadToken(mac) var cf = new qiniu.conf.Config({ zone: qiniu.zone.Zone_z2 }) var formUploader = new qiniu.form_up.FormUploader(cf) async function uploadFileCDN (files) { files.map(async file => { const key = getFileKey(pre, file) try { await uploadFIle(key, file) console.log(`上传成功 key: ${key}`) } catch (err) { console.log('error', err) } }) } async function uploadFIle (key, localFile) { const extname = path.extname(localFile) const mimeName = mime.getType(extname) const putExtra = new qiniu.form_up.PutExtra({ mimeType: mimeName }) return new Promise((resolve, reject) => { formUploader.putFile(uploadToken, key, localFile, putExtra, function ( respErr, respBody, respInfo ) { if (respErr) { reject(respErr) } resolve({ respBody, respInfo }) }) }) } function getFileKey (pre, file) { if (file.indexOf(pre) > -1) { const key = file.split(pre)[1] return key.startsWith('http://www.likecs.com/') ? key.substring(1) : key } return file } (async () => { console.time('上传文件到cdn') await uploadFileCDN(files) console.timeEnd('上传文件到cdn') })() 修改 publicPath

修改vue.config.js的配置信息，让其publicPath指向我们cdn的域名

const IS_PROD = process.env.NODE_ENV === 'production' const cdnDomian = 'http://ply4cszel.bkt.clouddn.com' module.exports = { publicPath: IS_PROD ? cdnDomian : 'http://www.likecs.com/', // 省略其它代码 ······· } 修改package.json配置

修改package.json配置，使我们build完成后自动上传资源文件到cdn服务器

"build": "vue-cli-service build --mode prod && node ./scripts/upcdn.js", 运行查看效果

npm run build

vue-cli3 项目从搭建优化到docker部署

然后到你的cdn控制台的内容管理看看文件是否已经上传成功

vue-cli3 项目从搭建优化到docker部署

8. docker部署

这边使用的是 centOS7 环境，不过使用的是不同的系统，可以参考一下其它系统的安装方法

8.1 安装docker

更新软件库

yum update -y

安装docker

yum install docker

启动docker服务

service docker start

安装docker-compose

// 安装epel源 yum install -y epel-release // 安装docker-compose yum install docker-compose 8.2 编写docker-compose.yaml version: '2.1' services: nginx: restart: always image: nginx volumes: #~ /var/local/nginx/nginx.conf为本机目录, /etc/nginx为容器目录 - /var/local/nginx/nginx.conf:/etc/nginx/nginx.conf #~ /var/local/app/dist 为本机 build 后的dist目录, /usr/src/app为容器目录, - /var/local/app/dist:/usr/src/app ports: - 80:80 privileged: true 8.3 编写 nginx.conf 配置 #user nobody; worker_processes 2; #工作模式及连接数上线 events { worker_connections 1024; #单个工作进程处理进程的最大并发数 } http { include mime.types; default_type application/octet-stream; #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用， sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; # 开启GZIP gzip on; # # 监听 80 端口，转发请求到 3000 端口 server { #监听端口 listen 80; #编码格式 charset utf-8; # 前端静态文件资源 location / { root /usr/src/app; index index.html index.htm; try_files $uri $uri/ @rewrites; } # 配置如果匹配不到资源，将url指向 index.html，在 vue-router 的 history 模式下使用，就不会显示404 location @rewrites { rewrite ^(.*)$ /index.html last; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } 8.4 执行 docker-compose docker-compose -d up

vue-cli3 项目从搭建优化到docker部署