前端vue jenkins打包资源增加阿里云oss+cdn加速

思路和总结

vue代码打包的时候默认打包.br .gzip资源, 的标头不需要设置标头,上传传入oss也不需要设置标头 cdn加速oss桶内资源即可,阿里云cdn资源返回的url就默认会返回. br .gzip
css资源可能是 zstd gzip br js资源可能是 gzip br
调试一定要开无痕+不加载缓存
cdn回源配置和缓存配置+https+性能优化配置

网站性能测试站点

复制代码

https://pagespeed.web.dev/analysis/https-web-test-test-com-live/3dtsg3jzo0?form_factor=mobile

文件目录

复制代码

/home/web/brtest/public/_nuxt

账户阿里云

复制代码

自己配置知道的阿里云资源和oss桶

域名

#测试环境测试域名 https://pc-test.test.com/

nginx nginx.conf

Erlang 复制代码

server {
    listen 80;
    server_name pc-test.test.com *.pc-test.test.com;

    client_max_body_size 20M;

    access_log /var/log/nginx/pc-test.test.com.log;
    error_log /var/log/nginx/pc-test.test.com.error.log;

    location / {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 60s;
    }

    location /socketIo/ {
        proxy_pass http://127.0.0.1:9001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
        proxy_buffering off;
    }

    location = /favicon.ico {
        root /home/web/brtest/.output/public/;
        add_header Cache-Control "max-age=31536000, public";
    }
}

Nginx

重启

Erlang 复制代码

nginx -t #测试
nginx -s reload #重启

Jenkings 配置

Erlang 复制代码

#!/bin/bash
set -e

#############################################
# 基础配置
#############################################
TARGET_USER="root"
TARGET_HOST="127.0.0.1"
TARGET_DIR="/home/web/brtest/"
SSH_KEY="${JENKINS_HOME}/.auth/private.key"

REPO_URL="http://jenkins:123456@127.0.0.1:3000/jack/ar-nuxt3-live.git"
REPO_BRANCH="pc-test"

OSS_BUCKET="test-web-static"
OSS_REMOTE_PATH="pc/_nuxt/"   # JS/CSS 和图片
OSS_REMOTE_PATH2="pc/"        # favicon.ico

LOCAL_FILE="/home/web/brtest/.output/public/_nuxt/"
LOCAL_FILE2="/home/web/brtest/.output/public/favicon.ico"

#############################################
# 1. 克隆代码
#############################################
echo "===== 1. 克隆代码 ====="
rm -rf git
git clone -b ${REPO_BRANCH} ${REPO_URL} git

#############################################
# 2. 同步代码到远端
#############################################
echo "===== 2. 同步代码到远端 ====="
rsync -avz --exclude='.git' -e "ssh -i ${SSH_KEY}" git/ ${TARGET_USER}@${TARGET_HOST}:${TARGET_DIR}/

#############################################
# 3. 远程构建
#############################################
echo "===== 3. 远程构建 ====="
ssh -i ${SSH_KEY} ${TARGET_USER}@${TARGET_HOST} << 'EOF'
set -e
cd /home/web/brtest/
export NODE_ENV=test
pnpm install
pnpm test-build
EOF

#############################################
# 4. 上传 OSS（不生成 .br，也不设置 Content-Encoding）
#############################################
echo "===== 4. 上传 OSS ====="
ssh -i "$SSH_KEY" "$TARGET_USER@$TARGET_HOST" << EOF
set -e

LOCAL_FILE="$LOCAL_FILE"
LOCAL_FILE2="$LOCAL_FILE2"
OSS_BUCKET="$OSS_BUCKET"
OSS_REMOTE_PATH="$OSS_REMOTE_PATH"
OSS_REMOTE_PATH2="$OSS_REMOTE_PATH2"

# 安装 ossutil（如果未安装）
if ! command -v ossutil &>/dev/null; then
  wget -q https://gosspublic.alicdn.com/ossutil/1.7.16/ossutil64
  chmod +x ossutil64
  mv ossutil64 /usr/local/bin/ossutil
fi

# 配置 OSS
ossutil config -e "oss-eu-central-1.aliyuncs.com" \
  -i "" \
  -k ""

# 上传 JS/CSS
find "$LOCAL_FILE" -type f \( -name "*.js" -o -name "*.css" \) | while read file; do
    rel_path=\$(realpath --relative-to="\$LOCAL_FILE" "\$file")
    target_path="\$OSS_REMOTE_PATH\$rel_path"

    content_type="application/octet-stream"
    case "\$file" in
        *.js) content_type="application/javascript";;
        *.css) content_type="text/css";;
    esac

    meta_args="Cache-Control:max-age=31536000,Content-Type:\$content_type,Content-Disposition:inline"

    echo "Uploading \$file -> \$target_path"
    ossutil cp "\$file" "oss://\$OSS_BUCKET/\$target_path" -f --meta "\$meta_args"
done

# 上传图片文件
find "$LOCAL_FILE" -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.gif" -o -name "*.svg" \) | while read file; do
    rel_path=\$(realpath --relative-to="\$LOCAL_FILE" "\$file")
    target_path="\$OSS_REMOTE_PATH\$rel_path"

    ext="\${file##*.}"
    case \$ext in
        png) content_type="image/png";;
        jpg|jpeg) content_type="image/jpeg";;
        gif) content_type="image/gif";;
        svg) content_type="image/svg+xml";;
    esac

    ossutil cp "\$file" "oss://\$OSS_BUCKET/\$target_path" -f \
      --meta "Cache-Control:max-age=31536000,Content-Type:\$content_type,Content-Disposition:inline"
done

# 上传 favicon.ico
ossutil cp "$LOCAL_FILE2" "oss://\$OSS_BUCKET/\$OSS_REMOTE_PATH2" -f \
  --meta "Cache-Control:max-age=31536000,Content-Type=image/x-icon,Content-Disposition:inline"
EOF

#############################################
# 5. 启动 PM2 服务
#############################################
ssh -i "$SSH_KEY" "$TARGET_USER@$TARGET_HOST" << EOF
cd ${TARGET_DIR}
pm2 delete brtest || true
PORT=3001 pm2 start .output/server/index.mjs --name brtest --update-env -f
EOF

echo "===== 部署完成 ====="

阿里云oss资源配置

注意桶必须设置公共读
桶资源白名单设置
性能配置
防盗链配置开放白名单域名
跨域规则运行配置指定站点

复制代码

方案 1：修改 OSS 防盗链设置（推荐）登录 阿里云 OSS 控制台 → 对应 Bucket → 防盗链设置设置允许 Referer： https://pc-test.test.com http://pc-test.test.com #oss.trball.com 性能配置开启Gzip压缩 Brotli压缩图像处理

注意: 调试一定要开无痕+不加载缓存

css资源可能是 zstd gzip br
js资源可能是 gzip br

cdn配置

Erlang 复制代码

#域名
oss.trball.com
CNAME 需要配置桶域名地址
oss.trball.com.queniuaa.com
基础源站信息
源站类型 OSS
地址 test-web-static.oss-eu-central-1.aliyuncs.com
缓存配置 1个月
https配置开启

性能配置开启
HTML优化
CSS优化
JavaScript优化
Brotli压缩
Gzip压缩
图像处理