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

1. 阿里云域名配置指向到服务器地址
2. 本地通过xshell测试域名是否联通指向服务器ping test.page.com

3. 增加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主页
}

4. 重启 nginx服务

systemctl stop nginx
systemctl start nginx

5. 检查 访问 test.page.com 是否出现502/404提示
6. cd /storge/node 进入node文件配置

7. 前端项目配置脚本

新增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"
}

\

8. 拉取线上代码，切换分支，执行脚本

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）

3. 构建触发器 选择Generic Webhook Trigger
4. 设置token （可选令牌。如果已指定，则只有在调用http://JENKINS_URL/generic-webhook-trigger/invoke时提供了该令牌，才能触发此作业）

5. 构建=》Execute shell

cd /storage/node/page
sh build-test.sh

6. 保存

2. 打开GitLab当前项目的设置

1. 点击集成
2. url：http://JENKINS_URL/generic-webhook-trigger/invoke ( JENKINS_URL本地集成环境；有token携带token )

3. 保存当前设置

\

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

\

\

\