Vue - 使用腾讯云SCF部署Vue项目（支持GitHub Action）

最新推荐文章于 2024-01-30 16:29:26 发布

SCY164759920

最新推荐文章于 2024-01-30 16:29:26 发布

阅读量880

点赞数

分类专栏：前端文章标签： vue.js 腾讯云 serverless

本文链接：https://blog.csdn.net/SCY164759920/article/details/127996570

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一.前提条件

1.本地已有一个Vue2/Vue3项目

腾讯云SCF本身支持使用模板创建(模板创建参考)一个Vue项目并部署，但本文主要讲解将本地原有的Vue项目改造为支持Serverless SCF部署的方法，并且建议使用SCF部署简单的SPA应用。

2.环境配置

本地全局安装serverless Cloud Framework，且在腾讯云已开通对应的功能。

腾讯云平台功能开通参考官网腾讯云

// 全局安装 serverless
npm install -g serverless

二.改造Vue项目

SCF的部署依赖yml文件的配置，所以我们只需简单更改几步配置即可实现。

改造时分为两种：

一种为本地完成部署

一种为使用GitHub Action 实现自动部署

两种方式均需要执行“安装依赖并配置package.json”步骤

1.安装依赖并配置package.json

该部分的配置参考了官方的scf vue.js模板

①.@serverless/platform-client-china 安装

//以npm为例，yarn请自行替换，使用-D开发安装即可
npm install @serverless/platform-client-china -D

②.package.json的修改

该部分CV了官方模板，添加在package.json中即可

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }

2.本地部署

①.yml文件编写

这里给出的yml文件只实现最基本的打包 + 部署功能，扩展更多功能请参考官方文档

yml文件中出现了腾讯云中“存储桶”相关的配置，其实使用SCF部署Vue项目，最后就是将打包后的dist文件夹push到一个“匿名可访问”的存储桶中实现公网访问。亲测不配置相关字段SCF将自动分配。

在vue项目根目录创建“serverless.yml”文件，代码如下:

component: website #组件类型
name: XXXXX #组件名称
app: XXXXX #应用名称

inputs:
  name: scfdemo
  src:
    src: ./src   //vue项目入口文件夹
    hook: npm run build
    dist: ./dist  //vue项目build后的文件夹名称
  # region: ap-nanjing  // 存储桶的地区，可不填，会自动分配
  # bucketName: ROADRUNNER-WEB // 可不填，会自动生成
  protocol: https   // 使用https协议

②.env环境变量配置

SCF部署需要使用到腾讯云平台的secretID和secretKey，获取地址： ID和KEY

获取到ID和KEY之后，在Vue根目录创建.env文件，并按以下格式保存ID和KEY

TENCENT_SECRET_ID= XXXXXXXXX 替换为你的ID
TENCENT_SECRET_KEY= XXXXXXXXXX 替换为你的KEY

③.开始部署

//若一切配置正常 在终端输入 scf deploy 即可完成部署
执行: scf deploy

部署成功控制台将会显示如下内容，点击链接即可访问

3.SCF 配合 GitHub Action使用

写在前面：

使用Github Action 时不需要在.env文件中配置ID和KEY，更不要把含有腾讯云ID和KEY的.env文件push到git仓库！

使用Github Action 时不需要在.env文件中配置ID和KEY，更不要把含有腾讯云ID和KEY的.env文件push到git仓库！

若想在每次提交到github仓库时实现自动打包+部署，需再为GitHub Action编写一个yml文件，并在对应仓库中为Action配置腾讯云ID和KEY，示例如下：

①.yml文件编写

在Vue项目根目录创建：.github/workflows/main.yml文件，代码如下：

name: Serverless Devs Project CI/CD

on:
  push:
    branches: [main]   // 换成自己的分支名称

jobs:
  serverless-devs-cd:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16]
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2.2.4
        with:
          version: 7
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install  // 安装Vue项目依赖
        run: npm install
      - name: scf inject   // 安装scf框架
        run: npm install -g serverless-cloud-framework@latest
      - name: env injected and start deploy
        run: scf deploy  // 环境变量注入 + 部署 
        env:    
          TENCENT_SECRET_ID: ${{secrets.ACCESSID}}
          TENCENT_SECRET_KEY: ${{secrets.ACCESSKEY}}