作者： 孟繁永

假定部署环境使用的是futuremeng/dnmp(fork自yeszao/dnmp)，我在其中增加了一个jenkins，那么当jenkins部署php项目时，除了拉取代码，我还会在shell中修改env为当前实例所需的配置，然后接下来，就是执行composer来构建项目需要的包。之前，我是在jenkins容器中又不得已安装了一个php和composer，这显然是和dnmp下面的php重复了，完全没有必要。

所以接下来，我查到了在docker-compose.yml的jenkins配置中：

  jenkins:
    image: jenkins/jenkins:${JENKINS_VERSION}
    container_name: jenkins
    volumes:
        - ${JENKINS_HOME_DIR}:/var/jenkins_home
        - ${JENKINS_CERTS_DIR}:/certs/client
        - ${SOURCE_DIR}:/www/:rw
        - ${TOMCAT_WEBAPPS_DIR}:/webapps/:rw
        - /var/run/docker.sock:/var/run/docker.sock
        - /usr/bin/docker:/usr/bin/docker
        - /usr/lib/x86_64-linux-gnu/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7
    ports:
        - "${JENKINS_HTTP_PORT}:8080"
    expose:
        - "8080"
        - "50000"
    privileged: true
    user: root
    restart: always
    environment:
        TZ: "$TZ"
        JAVA_OPTS: '-Djava.util.logging.config.file=/var/jenkins_home/log.properties'
        JENKINS_OPTS: '--prefix=/jenkins'
    networks:
      - default

设置了

- /var/run/docker.sock:/var/run/docker.sock

这一项，其实本来就是为了让容器也能直接调用宿主机的docker命令，我试了一下docker ps -a，真的没问题，那么我就把本来用在宿主机的命令拿过来，比如bash.alias.sample文件中的：

# php composer
composer () {
    tty=
    tty -s && tty=--tty
    docker run \
        $tty \
        --interactive \
        --rm \
        --user www-data:www-data \
        --volume ~/dnmp/data/composer:/tmp/composer \
        --volume $(pwd):/app \
        --workdir /app \
        dnmp_php composer "$@"
}

将其中的命令改为：

    tty=
    tty -s && tty=--tty
    docker run \
        $tty \
        --interactive \
        --rm \
        --user www-data:www-data \
        --volume /dnmp/data/composer:/tmp/composer \
        --volume /dnmp/www:/app \
        --workdir /app \
        dnmp_php composer install

其中，我把$(pwd)改为了laravel项目所在的地址，这个地址是宿主机的地址，因为这里的docker命令是宿主机的。另外，/dnmp/data/composer也是对应宿主机中的composer缓存文件夹地址。”$@”则直接写上了install

初始化jenkins之后，通过Global Tool安装nodejs的某个版本，过高了项目不匹配，跑不通，比如我选择了一个node14.22.0，但依然构建不成功，报错：

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

以及：

-  Building for production...
 ERROR  Error: Cannot find module 'html-webpack-plugin'

后来查到尽管用的是nodejs14，但其中的npm版本低了，用npm -v看了一下是6，其中从第一个报错就应该意识到要升级npm了，所以在shell中加上了：

npm install -g npm

IDE：vscode

插件：remote-ssh

场景：远程服务器拿了IP，用户名和密码

则默认情况下config文件（在远程资源管理器插件中点击修改设置，选择对应的配置文件）中保存为：

Host 192.168.0.7
  HostName 192.168.0.7
  User root

每次连接时，都需要用户输入密码，而且重连时也需要输入密码。改善的方式是将登录方式改为密钥的方式。

在本地电脑上用ssh-keygen生成密钥对，并将公钥放到服务器上去。

实现的具体步骤：

本地生成密钥对：

ssh-keygen -t rsa -f id_rsa_server_someone

然后将生成的id_rsa_server_someone.pub拷贝到服务器上的/root/.ssh下，并

cat id_rsa_server_someone.pub >> authorized_keys

最后，config中修改为：

Host 192.168.0.7
  HostName 192.168.0.7
  IdentityFile ~/.ssh/id_rsa_server_someone
  PreferredAuthentications publickey
  User root

某项目因前置nginx限制较多，不允许站内调用外部资源，所以因vant引用了cdn的图标，以及通过data方式加载图标资源，需要对vant进行修改，但又不想去自己弄个vant的修改版，所以从build之后的文件入手。

先创建一个localFilterPlugin.js，放在src/libs内，或者其他文件夹，比如utils，看你的习惯。内容如下：

/*
 * @Date: 2021-11-26 15:43:28
 * @LastEditors: Future Meng
 * @LastEditTime: 2021-11-26 18:19:11
 */
// 用于向控制台输出带颜色的问题提示
const fs = require('fs') // node的文件系统模块，用于读取操作系统文件
const path = require('path') // node提供的一些用于处理文件路径的工具
const chalk = require('chalk')

class LocalFilterPlugin {
  static defaultOptions = {
    filenameReg: /^chunk-mobile\..*\.css$/,
    originContent: /@font-face[^}]+}/g,
    newContent: '',
    assetsPath: '../../dist/css'
  };

  constructor(options = {}) {
    this.options = { ...LocalFilterPlugin.defaultOptions, ...options }
  }

  apply(compiler) {
    const _this = this
    compiler.plugin('done', function(compilation, callback) {
      const filePath = path.resolve(__dirname, _this.options.assetsPath)

      fs.readdir(filePath, (err, files) => {
        // 读取文件路径
        if (err) {
          console.log(chalk.yellow('读取文件夹异常：\n' + err.message + '\n'))
        }
        files.forEach((filename) => {
          // 找到符合正则规则的文件
          if (_this.options.filenameReg.test(filename)) {
            // 读取该文件
            const fileDir = path.resolve(filePath, filename)
            fs.readFile(fileDir, 'utf-8', (err, data) => {
              // 读取文件内容
              if (err) {
                console.log(chalk.yellow('读取文件异常：\n' + err.message + '\n'))
                return
              }

              // 替换文件内容
              const result = data.replace(_this.options.originContent, _this.options.newContent)
              fs.writeFile(fileDir, result, (err) => {
                if (err) {
                  console.log(chalk.red('写入修改后的文件异常:\n' + err.message + '\n'))
                  return
                }
                console.log(chalk.cyan(filename + '替换完成'))
              })
            })
          }
        })
      })
    })
  }
}

module.exports = LocalFilterPlugin

然后在vue.config.js中添加对这个自定义插件的引用。

const LocalFilterPlugin = require('./src.mobile/libs/localFilterPlugin')

module.exports = {
        configureWebpack: config => {
    const configNew = {}
    if (process.env.NODE_ENV === 'production') {
      configNew.externals = externals
      configNew.plugins = [
        // 构建后剔除@font-face
        new LocalFilterPlugin({
          options: {
            filenameReg: /^chunk-mobile\..*\.css$/,
            originContent: /@font-face[^}]+}/g,
            newContent: '',
            assetsPath: '../../dist/css'
          }
        })
      ]
    }
    return configNew
  },
}

就这些。

参考资料：https://blog.csdn.net/qq_31968791/article/details/102900349

以前一直用原生的swagger，有同事引入了knife4j，一开始兼容貌似有问题，后来调试好了，看上去不错，虽然输出的word还是不太好看，但总比没有强。

所以把java的项目都切到这个接口文档上来了。