1. 阿里云域名配置指向到服务器地址
  2. 本地通过xshell测试域名是否联通指向服务器ping test.page.com
  3. 增加nginx代理 ```nginx server { listen:80; # 监听本机所有 ip 上的 80 端口 servername 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主页 }
  2. 4. 重启 nginx服务
  3. ```shell
  4. systemctl stop nginx
  5. systemctl start nginx
  1. 检查 访问 test.page.com 是否出现502/404提示
  2. cd /storge/node 进入node文件配置
  3. 前端项目配置脚本
    新增oss配置
    ```javascript 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; }

  1. for (const i in files) {
  2.   const state = await stat(`${dir}/${files[i]}`);
  3.   if (state.isDirectory()) {
  4.     await this.putDir(`${dir}/${files[i]}`, `${ossDir}/${files[i]}`);
  5.   } else {
  6.     await this.putStream(dir, `${ossDir}/`, files[i]);
  7.   }
  8. }

}

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); });

  1. <a name="y2phX"></a>
  2. ##### 根目录下新增build-test.sh
  3. ```shell
  4. #!/usr/bin/env bash
  6. echo "编译开始..."
  8. git pull
  10. yarn
  12. npm run build:test
  14. npm run oss:test
  16. echo "编译完成..."
  18. echo "复制文件到nginx 静态目录..."
  20. rm -rf  /storage/nginx/www/page/*
  22. \cp -rf dist/index.html  /storage/nginx/www/page
  24. echo "发布完成..."

在package.json中增加执行脚本
  1. {
  2.   ...
  3.   "build:test":"cross-env ENV_NODE=test umi build",
  4.   "oss:test":"cross-env ENV_NODE=test node oss.client.js"
  5. }
  1. 拉取线上代码，切换分支，执行脚本
    1. git clone ... # 项目git路径
    2. cd /storge/node/page # 进入项目目录
    3. git checkout develop # 切换分支 
    4. git pull    # 拉取代码
    5. 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

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

      6. 保存

  2. 打开GitLab当前项目的设置
    1. 点击集成
    2. url：http://JENKINS_URL/generic-webhook-trigger/invoke (JENKINS_URL本地集成环境；有token携带token)
    3. 保存当前设置

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