前端通用 prettier config 配置

项目根目录配置

.prettierrc 配置内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进，默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}

vscode 配置

配置文件 settings.json，用 ctrl + . 打开配置预览。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// prettier配置
"prettier.configPath": "C:\\Users\\Luck\\.prettierrc", // prettierrc文件目录
"eslint.alwaysShowStatus": true, // 总是显示eslint状态
"prettier.printWidth": 120, // 超过最大值换行
"prettier.tabWidth": 2, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.BracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
// "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "none", // 属性值es5表示在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验

重启 vscode 生效。

使用 Github Action 自动化部署到服务器

准备

服务器创建秘钥对：

  1. 在本地机器上使用 ssh-keygen 产生公钥私钥对
1
ssh-keygen -m PEM -t rsa -b 4096
  1. 用 ssh-copy-id 将公钥复制到远程机器中
1
ssh-copy-id -i ~/.ssh/id_rsa.pub ubuntu@ip.ip.ip.ip

Ps. ssh-copy-id 会自动将 key 写到远程机器的 ~/ .ssh/authorized_key 文件中

  1. 提示成功，测试连接
1
ssh ubuntu@ip.ip.ip.ip

配置秘钥：

当需要使用一些不能公开的参数，比如 服务器 ip，用户名等，我们可以通过 Actions secrets 来创建。
在项目仓库的 Settings -> Secrets -> Actions 中 New repository secret 中添加 。

配置 Github Action

主要分几个步骤：

  1. 拉取 master 分支的最新代码。
  2. 设置 node 版本号
  3. 缓存依赖
  4. 安装依赖
  5. 打包
  6. 上传资源到指定路径

可以将配置文件 deploy_vps.yml 加到项目目录 .github/workflows/ 中，git 提交代码时会自动运行。

workflow 配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
name: deploy_vps
on:
  # 开启手动触发
  workflow_dispatch:
  # 推送分支时触发
  push:
    branches: [master]

jobs:
  build: # 任务的job_id，具体名称自定义，这里build代表打包
    runs-on: ubuntu-latest # runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段
    steps:
      - uses: actions/checkout@master

      - uses: actions/setup-node@v1
        with:
          node-version: v14.17.0

      #缓存依赖
      - name: Cache nodemodules
        uses: actions/cache@v1
        env:
          cache-name: cache-node-modules
        with:
          # 需要缓存的文件的路径
          path: ./node_modules
          # 对缓存的文件指定的唯一标识
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package.json') }}
          # 用于没有再找目标key的缓存的backup选项
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      # 装依赖
      - name: Install
        run: yarn global add hexo-cli && yarn

      # 打包
      - name: Build
        run: yarn build

      # 部署
      - name: Deploy file
        uses: wlixcc/SFTP-Deploy-Action@v1.2.4
        with:
          username: ${{ secrets.USER_NAME }}
          server: ${{ secrets.SERVER_HOST }}
          ssh_private_key: ${{ secrets.SERVER_PRIVATE_KEY }}
          local_path: './public/*'
          remote_path: '/var/www/blog'
          sftpArgs: '-o ConnectTimeout=5'

travis-ci 持续集成构建产物部署到远程主机的记录

过期说明：

2023.3 经测试，travis ci 已经不提供免费 ci 了。考虑转为 github actions。

一转眼都 2022 年了，这工具一直在改造，之前我维护的 hexo 博客自动部署到主机的配置文件现在又不能用了。
没办法，工具在升级，我也得继续好好学习啊。
今天就来研究研究现在最新的 travis-ci (https://app.travis-ci.com) 是怎么配置实现将构建的产物部署到指定的远程主机上。

首先是要保证 travis 的持续集成构建步骤，开启 travis 的自动构建很简单，只要在项目中加入 .travis.yml 这个文件即可。基本配置参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
language: node_js
node_js:
  - 12
cache: npm
branches:
  only:
    - master
install:
  - npm install hexo-cli gulp-cli -g
  - npm install
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  # $GH_TOKEN 这个参数需要在 github 的 personal access token 中获取，
  # 然后在 travis 的 options 中配置好
  github_token: $GH_TOKEN
  keep_history: true
  local_dir: public
  on:
    branch: master

以上配置文件 .travis.yml 会将生成的文件自动提交到 gh_pages 分支。

其中比较重要的 deploy 参数就是 provider: pages，详细的文档可以看这里（没有中文版还得自个翻译）。
hexo 默认生成的静态文件是在 public 目录下的，所以这里 local_dir 有指定上传目录。

通过 docker-compose 安装 trojan ，修改指定端口

jrohy/trojan 这个trojan镜像启动web时默认端口绑定在80上，占用了宿主机的端口，适合专职机场的vps，安装其推荐的安装方式安装比较好。

所以暂时不考虑使用端口转发。

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
version: '2.3'

services:
  mariadb:
    restart: always
    image: mariadb:10.2
    ports:
    - "3306:3306"
    volumes:
    - /home/mariadb:/var/lib/mysql:Z
    environment:
    - MYSQL_ROOT_PASSWORD=mycustompassword
    - MYSQL_ROOT_HOST=%
    - MYSQL_DATABASE=trojan

  trojan:
    restart: always
    image: jrohy/trojan
    depends_on:
    - mariadb
    network_mode: host
    privileged: true
    commond: [ "init" ]

腾讯云 + serverless 快速部署全栈项目（vue + express + postgresql）

初步试用了一下 serverless 一键生成项目框架和部署到腾讯云，果然和官方宣传的一样，过程非常丝滑。
基本操作按照官方文档的指导来就可以正常完成一个框架的部署。

操作场景

该模板可以快速部署一个基于 Vue + Express + PostgreSQL 的全栈 Serverless 应用。主要包含以下组件：

  • Serverless RESTful API：通过云函数和 API 网关构建的 Express 框架实现 RESTful API。
  • Serverless 静态网站：前端通过托管 Vue.js 静态页面到 COS 对象存储中。
  • PostgreSQL Serverless：通过创建 PostgreSQL DB 为全栈网站提供数据库服务。
  • VPC：通过创建 VPC 和 子网，提供 SCF 云函数和数据库的网络打通和使用。

说明：
本项目云函数因 VPC，导致无法直接访问外网，如需访问外网请参考 云函数网络配置。

https://cloud.tencent.com/document/product/583/38202

初始化应用

在空目录下，执行初始化命令：

1
2
# 交互式 serverless 初始化命令
$ serverless

接下来按照交互提示，完成项目初始化，选择 fullstack 组件模版，并等待依赖安装结束：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Serverless: 当前未检测到 Serverless 项目，是否希望新建一个项目？ Yes
Serverless: 请选择您希望创建的 Serverless 应用 fullstack

  eggjs-starter - 快速部署一个Egg.js 基础应用
  express-starter - 快速部署一个 Express.js 基础应用
  flask-starter - 快速部署一个 Flask 基础应用
❯ fullstack - 快速部署一个 Full Stack 应用, vuejs + express + postgres
  koa-starter - 快速部署一个 Koa.js 基础应用
  laravel-starter - 快速部署一个 Laravel 基础应用
  nextjs-starter - 快速部署一个 nextjs 应用

Serverless: 请输入项目名称 fullstack
Serverless: 正在安装 fullstack 应用...

- 项目 "fullstack" 已在当前目录成功创建
- 执行 "cd fullstack && serverless deploy" 部署应用

fullstack › 创建成功

在jenkins pipeline 项目 + jmeter 自动化测试 + HTML Publisher 生成测试报告

最近在调研jmeter自动化测试这个topic，简单学习了一下jmeter的各种用法和语法，用jmeter写一套测试计划倒是挺简单的。
不过我认为，ui工具写出来的用例，如果不能git维护+持续集成，那就谈不上自动化测试。
所以就有了 jenkins + jmeter + 生成报告的这套工具的构建。

总结一下我的操作步骤，以及解决的一些坑（如生成的HTML报告没有样式等问题）

构建结果展示

项目构建状态：

project

HTML生成报告：

html

使用Github Actions自动同步仓库代码至gitee

本文主要研究通过 github actions 自动同步仓库代码至 gitee，顺便了解一下github actions的基础用法。

1. Github和Gitee添加公钥

通过终端生成公钥

在终端中输入： ssh-keygen ，不需要输入任何信息，直接回车，默认生成公钥文件如图：

public key

根据提示的文件路径，查看公钥内容：

1
2
# 根据路径修改，如： cat /c/Users/Administrator/.ssh/id_rsa.pub
cat [xxx.pub]

添加公钥信息

将输入的公钥内容复制下来，分别添加至 github 和 gitee 账户设置中。

检查公钥是否成功添加

1
2
ssh -T git@github.com
ssh -T git@gitee.com

返回成功认证的信息，则说明成功添加公钥。

1
2
# like this.
Hi! You've successfully authenticated, but GitHub does not provide shell access.

Centos用yum安装的nginx相关配置

使用 yum install nginx 安装的 nginx 服务器，配置文件路径：

  • html 目录默认路径： /usr/share/nginx/html
  • 默认 nginx.conf 路径： /etc/nginx/nginx.conf
  • vhost 配置目录：/etc/nginx/conf.d

现在开始普及 docker 之后，基本上 nginx 就是专门用来做转发配置了。

Linux 安装 docker 可视化管理工具 Portainer

简介

Portainer是一个可视化的容器镜像的图形管理工具，利用Portainer可以轻松构建，管理和维护Docker环境。 而且完全免费，基于容器化的安装方式，方便高效部署。

官网：https://www.portainer.io/

安装

官网提供的 docker 安装方式： https://documentation.portainer.io/v2.0/deploy/ceinstalldocker/

1 创建一个docker数据目录

1
docker volume create portainer_data

2 启动服务

1
docker run -d -p 8000:8000 -p 9000:9000 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce

3 初始化管理账户

用浏览器访问： http://[ip]:9000

设置管理员用户名密码。

4 选择管理方式

点击 Docker -> Connect 确定。

以上，配置完成。

点击左侧菜单栏的 Host 可以查看主机信息。

Centos系统的 VPS 初始环境整理（yum, docker, node, vpn, ss 等等）

搞了一台新VPS上手，一堆软件又不记得怎么装了。记录一下各种软件部署的流程。

安装工具

升级yum

1
2
yum update
yum makecache  #生成仓库缓存

基础工具

1
2
yum install -y git python3
sudo yum install -y gcc gcc-c++

nodejs - 推荐用下面的 nvm 安装替代:

1
2
3
4
5
6
7
8
9
# 下载node 版本参考<https://nodejs.org/en/download/>
wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz
tar -xvf node-v12.18.3-linux-x64.tar.gz
cd node-v12.18.3-linux-x64
./configure
# 编译
make && make install
# 查看node版本
node -v

nvm - node版本管理工具:

1
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

完成后，在 .bash_profile 文件中加入：

1
2
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

执行 source .bash_profile 后，安装 node 的命令就很简单了：

1
nvm install stable