docker搭建

# 更新apt包索引
sudo apt-get update

# 卸载旧版的docker
sudo apt-get remove docker docker-engine docker.io containerd runc

# 一键安装docker
curl -sSL https://get.daocloud.io/docker | sh

gitlab搭建

1. 安装gitlab

# docker安装gitlab镜像
docker pull gitlab/gitlab-ce:latest

# 运行gitlab的docker
docker run \
    --publish 8443:443 --publish 8080:80 --publish 2222:22 \
    --name gitlab \
    --volume /home/gitlab/config:/etc/gitlab \
    --volume /home/gitlab/logs:/var/log/gitlab \
    --volume /home/gitlab/data:/var/opt/gitlab \
    gitlab/gitlab-ce
  
 # 暂时关闭服务器防火墙
 systemctl stop firewalld
 
 # 浏览器输入 http://ip:port 访问gitlab

2. 优化gitlab的内存占用

# 进入到gitlab的bash
docker exec -it ${gitlab的docker id} /bin/bash 

# 编辑gitlab的配置文件 
vi /etc/gitlab/gitlab.rb

###### 修改配置内容start ######

puma['worker_processes'] = 4 # 去掉#注释 设置进程 不能低于2
puma['worker_timeout'] = 60 # 设置超时时间

###### 修改配置内容end ######

# 重启gitlab
gitlab-ctl restart

3. 配置gitlab clone克隆地址

# 进入到gitlab的bash
docker exec -it ${gitlab的docker id} /bin/bash 

# 编辑配置文件
vi /etc/gitlab/gitlab.rb

###### 修改配置内容start ######
external_url 'http://ip:port'  # 访问地址 port为docker run时设置的8080

gitlab_rails['gitlab_shell_ssh_port'] = 2222 # ssh端口号 为docker run时设置的2222

gitlab_rails['gitlab_ssh_host'] = ip # ssh的访问ip
###### 修改配置内容end ######

# 修改配置文件
vi /opt/gitlab/embedded/service/gitlab-rails/config/gitlab.yml

###### 修改配置内容start ######
host ip地址  # 设置ip地址
port 访问端口 # 设置访问端口 同external_url设置的端口号
###### 修改配置内容end ######

# 重启gitlab
gitlab-ctl restart

安装配置git-runner

# 安装git-runner
sudo docker run -d --name gitlab-runner --restart always \
  -v /home/gitlab-runner/config:/etc/gitlab-runner \
  -v /var/run/docker.sock:/var/run/docker.sock \
  gitlab/gitlab-runner:latest
 
# 注册
docker run --rm -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register \
  --non-interactive \
  --executor "docker" \
  --docker-image alpine:latest \
  --url "" \
  --registration-token "" \
  --description "first-register-runner" \
  --tag-list "vue3-app" \
  --run-untagged="true" \
  --locked="false" \
  --access-level="not_protected"

• 注册需要token和url，获取方式如下图

• CI/CD配置yaml脚本需要的变量

  

编写.gitlab-ci.yml 🏁

stages:
  - init # 初始化
  - lint # 校验
  - build # 打包
  - deploy # 部署

# 在流水线中使用package.json缓存node_modules,只要package.json内容没变就一直使用缓存
cache:
  key:
    files:
      - package.json
  paths:
    - node_modules/

# npm i 安装
init:
  stage: init
  only: 
    refs: 
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
  script:
    - npm cache clean --force
    - npm install -g cnpm --registry=https://registry.npm.taobao.org
    - cnpm install
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本    

# 代码校验
lint:
  stage: lint
  only: 
    refs: 
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"  
  script:
    - npm run lint:jsx
    - npm run lint:css
  allow_failure: true

# 开始构建
build:
  stage: build
  artifacts:
    # 文件名
    name: 'dist'
    # 过期时间
    expire_in: 60 mins
    # 需要打包目录
    paths:
      - dist/
  only: 
    refs: 
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop" # 表示只有往 develop分支提MR才会触发部署
  script:
    - npm run build:test    
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本

deploy:
  stage: deploy
  only: 
    refs: 
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop" # 表示只有往 develop分支提MR才会触发部署
  script:
    - 'which ssh-agent || ( apk update && apk add openssh-client)' # 预先装 ssh-agent
    - eval $(ssh-agent -s) # 启动服务
    - mkdir -p  /etc/ssh/
    - chmod 700  /etc/ssh
    - echo "$SSH_KNOWHOST" > /etc/ssh/known_hosts
    - echo "$SSH_PRIVATE_KEY" > /etc/ssh/id_rsa
    - echo "$SSH_CONFIG" > /etc/ssh/ssh_config.d/config.conf
    # 配置较低权限
    - chmod 600 /etc/ssh/id_rsa
    - chmod 600 //etc/ssh/ssh_config.d/config.conf
    - chmod 644 /etc/ssh/known_hosts
    # 注入密钥 
    - ssh-add /etc/ssh/id_rsa
    - ssh Aliyun "rm -rf /var/www/project/test"
    - scp -i /etc/ssh/id_rsa -r ./dist/ "$SSH_USERNAME"@"$SSH_HOST":/var/www/project/test/ 
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本
  when: on_success

钉钉配置

1. 群助手设置

   • 创建群

   • 添加智能群助手

     

   • 添加自定义机器人

     

     

   • 配置机器人

     

2. shell脚本

#!/bin/bash
##################
# 钉钉通知
# 自动化部署脚本中使用
##################

webhook="https://oapi.dingtalk.com/robot/send?access_token=${DINGDING_TOKEN}" # 你自己创建的钉钉机器人的地址

# 推送模板发送（模板拼接）
function sendDingTalkNotifications() {
      local text="#### git名称：${CI_PROJECT_NAME} \n ##### 构建分支：${CI_COMMIT_REF_NAME} \n ##### 构建状态：${DEPLOY_STATUS}\n #### 提交者：${GITLAB_USER_NAME}-${GITLAB_USER_EMAIL} \n\n\n ##### 更新内容：${CI_COMMIT_MESSAGE} \n ##### [流水线 Pipeline #${CI_PIPELINE_ID}](${CI_PROJECT_URL}/pipelines/${CI_PIPELINE_ID}) \n
      "
      curl POST "$webhook" -H 'Content-Type: application/json' -d "{\"msgtype\": \"markdown\",\"markdown\": {\"title\":\"${CI_PROJECT_NAME}\",\"text\": \"$text\"}}"
}

if [ "$?" -eq "0" ];then  # "$?" -eq "0" 表示上一句脚本执行成功，1的话表示失败
      case ${CI_JOB_STAGE} in
            "init")
                  DEPLOY_STATUS='初始化安装成功!'
                  sendDingTalkNotifications
            ;;
            "build") 
                  DEPLOY_STATUS='构建成功!'
                  sendDingTalkNotifications
            ;;
            "deploy") DEPLOY_STATUS='部署成功!'
                  sendDingTalkNotifications
            ;;
      esac
else
      case ${CI_JOB_STAGE} in
            "init"|"build") 
                  DEPLOY_STATUS='构建失败!'
                  sendDingTalkNotifications
            ;;
            "deploy")
                  DEPLOY_STATUS='部署失败!'
                  sendDingTalkNotifications
            ;;
      esac

fi

⚠️注意点

• git-runner执行时候权限问题
  • 进入gitlab-runner的docker，修改/etc/passwd文件中的gitlab-runner的权限与root同等级0

参考文章

Docker 教程 | 菜鸟教程 (runoob.com)

使用docker搭建gitlab环境 - SegmentFault 思否

GitLab+Docker快速搭建CI/CD自动化部署 (juejin.cn)

利用 Gitlab CI/CD + Jenkins 实现自动构建，自动部署 (juejin.cn)

Gitlab-CI 配置文件 .gitlab-ci.yml 详细说明，基于官方文档翻译 | 渡渡岛 (ssoor.github.io)

设置 SSH 通过密钥登录 | 菜鸟教程 (runoob.com)

GitLab 14 轻量化运行方案 - 苏洋博客 (soulteary.com)

前端工程化之 CI/CD | Zander Hsueh (xuezenghui.com)

之前都是使用脚手架直接生成的webpack配置，然后根据需求适当调整便使用了。最近空闲下来，然后就想从零开始写一个webpack配置，在此记录一下配置过程以及遇到的一些问题吧。

1. node环境、npm或者yarn包管理器
2. 创建一个新文件夹，然后使用npm或者yarn初始化
3. 添加webpack依赖，创建一个webpack.config.js文件。顺便创建文件目录等
4. 根据需要安装插件，目前我所用的到插件有

{
  "name": "interview",
  "version": "1.0.0",
  "description": "面试题记录",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "glob": "^7.1.7",
    "html-loader": "^2.1.2",
    "node-sass": "^6.0.0",
    "postcss": "^8.3.0",
    "postcss-loader": "^5.3.0",
    "postcss-px2rem": "^0.3.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0"
  }
}

1. 其中一些loader，例如css-loader、style-loader等都是针对于css处理的，因为extract-text-webpack-plugin在webpack4中使用存在一些问题，而且官方建议使用mini-css-extract-plugin插件，所以我这里就使用官方推荐了。
2. @babel/core、@babel/preset-env等是针对编译js所引入的包处理
3. webpack-dev-server开发使用的本地服务，可以配置端口号、热更新等服务

遇到的问题：

• px转rem插件无法处理sass改用webpack-px-to-rem
• html无法进行热更新（将热更新关闭，使用页面自动刷新，比较耗费性能）

webpack.config.js文件内容

/*
 * @Author: PrendsMoi
 * @GitHub: https://github.com/PrendsMoi
 * @Blog: https://liuhgxu.com
 * @Description: webpack配置
 * @FilePath: /interview/webpack.config.js
 * @Date: 2021-05-30 11:27:51
 * @LastEditors: PrendsMoi
 * @LastEditTime: 2021-06-13 12:03:35
 */
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 获取多页面
const getPages = (argv) => {
  const isDev = argv.mode === 'development'
  const views = glob.sync('src/views/**/*.html')
  const viewJs = glob.sync('src/views/**/*.js')
  const config = {
    hash: true,
    inject: true,
    minify: {
      removeComments: !isDev,
      collapseWhitespace: !isDev
    }
  }
  const entries = {}
  const htmls = []
  views.forEach(item => {
    const fileInfo = path.parse(item)
    console.log(viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`))
    if (viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`)) {
      entries[fileInfo.dir.split('/').slice(-1)[0]] = `./${item}`.replace('.html', '.js')
    }
    htmls.push(new HtmlWebpackPlugin({
      ...config,
      filename:  `${fileInfo.name}.html`,
      template: `./${fileInfo.dir}/${fileInfo.name}.html`,
      chunks: [ 'vendor', 'commons', fileInfo.name]
    }))
  })
  const entry = Object.assign({'babel-polyfill': ['babel-polyfill'],commons: './src/app.js'}, entries)
  return {
    entries: entry,
    htmls
  }
}
module.exports = (env, argv) => ({
  entry:  getPages(argv).entries,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    chunkFilename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    publicPath: (argv.mode === 'development') ? '' : './'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          (argv.mode === 'development') ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { importLoaders: 2 }
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'expanded'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 10 versions', 'ie >= 9'],
                  flexbox:true,
                  remove: false
                }),
                // require('postcss-px2rem')({remUnit: 75})
              ]
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: false
          }
        }
      },
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.(woff2|woff|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {//解析模块可选项
  },
  plugins: [
    ...getPages(argv).htmls,
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({filename:(argv.mode === 'development') ? "css/[name].css" : 'css/[name].[hash].css', chunkFilename: '[id].css'}),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, './src/assets'),
          to: 'assets',
          noErrorOnMissing: true
        }
      ],
      options: {}
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-px2rem')({remUnit: 37.5})
        ]
      }
    })
  ],
  devtool: (argv.mode === 'development') ? "eval" : "nosources-source-map",
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'async',
          name: 'commons',
          minChunks: 2,
          maxInitialRequests: 5,
          // minSize: 0
        },
        vendor: {
          test:/node_modules/,
          chunks:'all',
          name:'vendor',
          priority:10
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: (argv.mode === 'development') ? true : false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,  //是否启用gzip
    host: 'localhost',
    port: 9000,
    hot: true, // 热更新
    open: true,
    overlay: true,
    inline: true,
    watchContentBase: true
  }
})

.babelrc文件

{
	"presets": ["@babel/preset-env"],
	"plugins": ["@babel/plugin-transform-runtime"]
}

• 后台挂起倒计时停止问题 自定义一个setTimeout来记录时间的走动，当时间跨度不正确时，调整倒计时时间

// 执行次数
let count = 0
// 本地时间
const localStart = new Date().getTime()
// 计时间隔
const interval = 1000
// 上一次时间
let lastTime = 0
// 计时器
let timeScreen = ''
function isLockScreen() {
  count++
  const nowTime = new Date().getTime()
  // 偏差
  const offset = nowTime - (localStart + count * interval)
  // 判断是否锁屏阻塞
  if(lastTime !== 0 ) {
    if((nowTime - lastTime) > (offset + 1200) || nowTime < lastTime) {
      lastTime = 0
      // 重新调用
      this.init()
      return false
    }
  }
  lastTime = nowTime - offset
  let nextTime = interval - offset
  if(nextTime < 0){
    nextTime = 0
  }
  timeScreen = setTimeout(this.isLockScreen, nextTime)
}

• App内切换webView页面刷新问题 其实这个并不算倒计时的问题，但是在这个项目中遇到也就记录一下吧！说到这个问题真的很揪心，因为当时遇到这个问题，发现这是因为调用App的原生事件去打开新的WebView页面，导致当前H5的href并没有变更。想到的第一个处理方案是希望App端能否提供一个事件监听供我回调，但是App之前没有这个开发需求，项目又急着上线，所以只能放弃。之后想到新的WebView是否会阻塞旧的webView的js，尝试过后发现并不会！然后开始去Google搜索，发现一个visibilitychange的监听事件和document.hidden的属性，尝试使用后，方案可行。

document.addEventListener('visibilitychange', () => {
  if(!document.hidden){
    this.init()
	}
}, false)

事件和属性的Api链接

1. 安装deno，官网有详细的安装教程Deno。安装完成后可以在命令窗口输入deno命令，如下图👇

   

2. 使用VsCode并安装Deno的相关插件Deno & [Deprecated] Deno，如果不安装，在进行Deno模块引入时会出现红色的波浪号警告，因为在ts中是不需要文件的扩展名，且ts不支持从url中导入模块。

3. 使用本地服务自动更新

   1. deno upgrade
   2. deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts
   3. denon -h
   4. denon run --allow-env --allow-net demo.ts
   

4. demo.ts代码

5.通过deno run --allow-net demo.ts 运行，打开localhost:9000即可看见效果