阅读 587

服务端项目服务器配置流程(GitLab+Jenkins)

  1. 阿里云域名配置指向到服务器地址
  2. 本地通过xshell测试域名是否联通指向服务器ping test.page.com
  1. 增加nginx代理
server {
  listen:80;  # 监听本机所有 ip 上的 80 端口
  server_name test.page.com; # 域名:www.example.com 这里 "_" 代表获取匹配所有
  root /storage/nginx/www/page;  # 此处page代表文件夹名称,匹配所有名字发现为test.page.com 时访问代理的文件夹
  location / {
    index index.htm index.html index.php;
    try_files $uri $uri/ /index.html;
  } #默认访问根目录进入index主页
}
复制代码
  1. 重启 nginx服务
systemctl stop nginx
systemctl start nginx
复制代码
  1. 检查 访问 test.page.com 是否出现502/404提示
  2. cd /storge/node 进入node文件配置
  1. 前端项目配置脚本
新增oss配置
const OSS = require('ali-oss');
const util = require('util');
const fs = require('fs');
const path = require('path');

const readdir = util.promisify(fs.readdir);
const stat = util.promisify(fs.stat);

class OssClient {
  constructor() {
    this.client = new OSS({
      region: 'xxxxxxxxxxx',
      accessKeyId: 'xxxxxxxxxxx', // process.env.ACCESSKEYID,
      accessKeySecret: 'xxxxxxxxxxx', // process.env.ACCESSKEYSECRET,
      bucket: process.env.NODE_ENV === 'production' ? 'xxxxxxxxxxx' : 'xxxxxxxxxxx', // process.env.BUCKET,
    });
  }

  async putStream(dir, ossDir = '/', fileName) {
    try {
      const stream = fs.createReadStream(path.resolve(dir, fileName));
      return await this.client.putStream(ossDir + fileName, stream);
    } catch (e) {
      console.log(e);
    }
  }

  async putDir(dir, ossDir) {
    let files;
    try {
      files = await readdir(dir);
    } catch (e) {
      console.log(`【当前目录不存在】 -- ${dir} --`);
      return undefined;
    }

    for (const i in files) {
      const state = await stat(`${dir}/${files[i]}`);
      if (state.isDirectory()) {
        await this.putDir(`${dir}/${files[i]}`, `${ossDir}/${files[i]}`);
      } else {
        await this.putStream(dir, `${ossDir}/`, files[i]);
      }
    }
  }

  async upload() {
    try {
      await this.putDir(path.resolve(__dirname, 'dist'), 'sass-erp-page');
    } catch (e) {
      console.log('【上传异常请重试】', e);
    }
  }
}

new OssClient().upload()
  .then(() => {
    console.log('上传成功')
  })
  .catch((error) => {
    console.log('上传异常', error);
  });
复制代码
根目录下新增build-test.sh
#!/usr/bin/env bash

echo "编译开始..."

git pull

yarn

npm run build:test

npm run oss:test

echo "编译完成..."

echo "复制文件到nginx 静态目录..."

rm -rf  /storage/nginx/www/page/*

\cp -rf dist/index.html  /storage/nginx/www/page

echo "发布完成..."
复制代码
在package.json中增加执行脚本
{
  ...
  "build:test":"cross-env ENV_NODE=test umi build",
  "oss:test":"cross-env ENV_NODE=test node oss.client.js"
}
复制代码
  1. 拉取线上代码,切换分支,执行脚本
git clone ... # 项目git路径
cd /storge/node/page # 进入项目目录
git checkout develop # 切换分支 
git pull	# 拉取代码
sh build-test.sh #执行脚本
复制代码
以上前端项目服务器环境配置完成
自动化ci/cd配置
  1. 在Jenkins新建项目
  1. 添加项目描述
  2. 源代码管理选择Git
  1. Repositories 地址为GitLab项目地址
  2. 指定分支(为空时代表any)
  1. 构建触发器 选择Generic Webhook Trigger
  2. 设置token (可选令牌。如果已指定,则只有在调用http://JENKINS_URL/generic-webhook-trigger/invoke时提供了该令牌,才能触发此作业)
  1. 构建=》Execute shell
cd /storage/node/page
sh build-test.sh
复制代码
  1. 保存
  1. 打开GitLab当前项目的设置
  1. 点击集成
  2. url:http://JENKINS_URL/generic-webhook-trigger/invoke ( JENKINS_URL本地集成环境;有token携带token )
  1. 保存当前设置

自动化ci/cd配置配置完成

文章分类
前端
文章标签