前端通用 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]

添加公钥信息

将输入的公钥内容复制下来,分别添加至 githubgitee 账户设置中。

检查公钥是否成功添加

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