专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

工具

  • 用 rust 开发的 jenkins 命令行发布工具

    / 分类: 工具 / No Comments

    用 Rust 写了一个 Jenkins 命令行发布工具, 令行直接发布项目, 可以极大提升发布效率, 无需再使用浏览器登录Jenkins发布.

    核心特性

    • 支持多环境配置（比如有多套Jenkins服务）
    • 快速搜索 / 过滤 Job
    • 构建参数记忆缓存（可直接基于上次的参数构建）
    • 实时拉取 Console 输出
    • 可脚本化：命令天然可嵌入 CI / 批处理
    • 单文件分发（Rust 编译, 启动快）
    • 支持 Windows / macOS / Linux

    查看全文 »

  • pnpm 介绍

    / 分类: 工具 / No Comments

    本文介绍了pnpm的常用命令, 对于从npm/yarn迁移到pnpm, 或基于pnpm搭建内部组件库等场景, 或发布到私有仓库, 可参考使用.

    pnpm 常用命令

    pnpm outdated # 查看过时的包
# init package.json
pnpm init
# package.json 中 `"type": "module"` # 使用ESM规范(支持import), 不设置为CJS
# package.json 可以设置包名的命名空间, 比如 "name": "@examples/pkg-b" (不能多个/)

# 安装 workspace 内的所有依赖 -f(--force)
pnpm i
# 从根目录运行命令
pnpm -F <包目录名/包name/正则> <command> # -F等价于–filter
# 列出包信息/引用信息
pnpm why <package-name> -r
# 具体package 安装依赖
pnpm -F <package-name> add axios -D
# 具体package, 移除依赖
pnpm -F <package-name> remove axios
# packageA 中引用 packageB
# packageA 中可以 import { xxx } from 'packageB'
pnpm -F packageA add packageB --workspace
# 执行所有package的 命令 (如build/test), parallel并行执行, r查找所有包
pnpm run --parallel -r <command>
# 更新npm包版本, -L 最新版
pnpm -F web-vue up xxx -L
pnpm up [email protected] # 升级/降级 npm包
# 更新工作区link关系
pnpm up --workspace
# 下载和执行 xxx
pnpm dlx create-react-app
pnpm dlx create-vue # Vite
# 从 create-* 创建项目
pnpm create react-app demo-react #  create-react-app
pnpm create vue demo-vue # create-vue
# pnpm create vite vue-vite --template vue-ts

    查看全文 »

  • npm包 CDN 收集

    / 分类: 工具 / No Comments

    jsDelivr(支持 combine)
    `https://cdn.jsdelivr.net/npm/:package@:version/:file`
# https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
    unpkg
    `https://unpkg.com/:package@:version/:file`
# https://unpkg.com/[email protected]/dist/jquery.min.js
    饿了么
    `https://npm.elemecdn.com/:package@:version/:file`
# https://npm.elemecdn.com/[email protected]/dist/jquery.min.js
    知乎
    `https://unpkg.zhimg.com/:package@:version/:file`
# https://unpkg.zhimg.com/[email protected]/dist/jquery.min.js
    百度
    `https://code.bdstatic.com/npm/:package@:version/:file`
# https://code.bdstatic.com/npm/[email protected]/dist/jquery.min.js

    jsDelivr国内可能部分网络有问题, 但仅jsDelivr才支持combine(多个文件合并).
    使用CDN引入, 可以独立公共资源, 省去webpack打包. 当然, 也有人用来做图床.

  • Mac自签名ssl证书, 绑定域名启用https

    / 分类: 工具,实践 / No Comments

    生成root CA(仅需一次)

    自签名证书, IOS 13/macOS 10.15有了新规定, 所以需要按如下方式生成.

    # 多个域名都可以用root CA签名
mkdir ~/.ssl; cd ~/.ssl;
openssl genrsa -out rootca.key 2048;
openssl req -new -key rootca.key -out rootca.csr -sha256 -subj "/CN=Dev Root CA"
echo "basicConstraints=CA:true" > rootca.cnf;
openssl x509 -req -in rootca.csr -signkey rootca.key -out rootca.crt -extfile rootca.cnf -sha256 -days 825;
open rootca.crt; # Mac钥匙串 打开(或, 双击文件名)
# 钥匙串: 搜索 Dev Root CA, 双击证书, 设置始终信任 (Trust - When using this certificate: Always Trust).
# for Android:
# openssl x509 -inform PEM -outform DER -in rootca.crt -out rootca.der.crt

    创建本地ssl证书(使用lvh.me域名)

    openssl req -new -newkey rsa:2048 -nodes -keyout lvh.me.key -out lvh.me.csr -sha256 -subj "/CN=lvh.me"
cat > domain.cnf <<-EOF
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:false
keyUsage=digitalSignature,keyEncipherment,dataEncipherment
extendedKeyUsage=serverAuth,clientAuth
subjectAltName=@alt_names
[alt_names]
DNS.1=lvh.me
DNS.2=*.lvh.me
DNS.3=*.test.lvh.me
EOF
# 使用root CA签名
openssl x509 -req -in lvh.me.csr -out lvh.me.crt -extfile domain.cnf -CA rootca.crt -CAkey rootca.key -CAcreateserial -sha256 -days 825

    lvh.me 是一个指向127.0.0.1的泛域名服务, 优点: 不需要改DNS/hosts, 各项目使用不同的域名方便隔离(比如cookies/密码管理器). 类似的还有xip.io, nip.io, localtest.me, fuf.me, vcap.me等.

    使用Apache或Nginx 绑定域名

    • 使用Apache

      # 1. 编辑 `/etc/apache2/httpd.conf`
# 注释掉 这些行:
LoadModule mpm_prefork_module libexec/apache2/mod_mpm_prefork.so
Include /private/etc/apache2/extra/httpd-ssl.conf
# 最下面添加:
Listen 443
ServerName localhost
LoadModule mpm_event_module libexec/apache2/mod_mpm_event.so
LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
LoadModule macro_module libexec/apache2/mod_macro.so
LoadModule ssl_module libexec/apache2/mod_ssl.so
LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
LoadModule http2_module libexec/apache2/mod_http2.so
Include /Users/leon/.ssl/httpd-vhosts.conf

# 2. 编辑 ~/.ssl/httpd-vhosts.conf, 增加:
<Macro SSLLvh>
  SSLEngine on
  SSLCertificateFile /Users/leon/.ssl/lvh.me.crt
  SSLCertificateKeyFile /Users/leon/.ssl/lvh.me.key
  Protocols h2 http/1.1
</Macro>
<Macro Test>
  ServerName test.lvh.me
  ProxyRequests off
  <Location />
    ProxyPass http://localhost:3000/
    ProxyPassReverse http://localhost:3000/
  </Location>
</Macro>
<VirtualHost *:80>
  Use Test
</VirtualHost>
<VirtualHost *:443>
  Use SSLLvh
  Use Test
</VirtualHost>
<Macro Demo>
# ...
</Macro>
<VirtualHost *:443>
  Use SSLLvh
  Use Demo
</VirtualHost>

# 3. 启动Apache
# sudo apachectl configtest # test
sudo apachectl -k restart # 启动
# sudo apachectl -e debug # print errors
# sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist # 开机启动

    查看全文 »

  • 使用letsencrypt自动生成和续期HTTPS证书

    / 分类: 工具,实践 / No Comments

    相信一些同学注意到了, 本站启用了https, 域名改成了xhl.me, 服务也早就全都改用docker了.
    顺带介绍下之前搞的两个个docker项目: alpine-tengine, docker-backup.

    *本文主要介绍letsencrypt证书的创建和通配符HTTPS证书生成, 还有基于letsencrypt docker镜像实现证书自动续期.

    Let's Encrypt 是一个自动签发免费HTTPS证书的非营利机构, 生成的证书有3个月有效期, 到期可以免费续期.
    Certbot 是 Let's Encrypt 官方推荐的生成证书的客户端工具, 文档.

    使用dnsrobocert生成证书(支持通配符域名证书), 并自动续期

    这个项目, 集成了certbot(证书生成命令行工具), Lexicon(DNS记录修改工具, 主流DNS服务商都支持).
    另外还自带了crontab 定时任务, 只要服务启动, 就会自动续期域名了.

    1. 创建, /etc/dnsrobocert/config.yml, 内容类似这样:
    # https://git.io/JL1cD
draft: false
acme:
  email_account: <youremail>
  staging: false
profiles:
- name: cloudflare
  provider: cloudflare
  provider_options:
    auth_username: <cloudflare_email>
    auth_token: <cloudflare_token>
- name: dnspod
  provider: dnspod
  provider_options:
    auth_username: <dnspod_id>
    auth_token: <dnspod_token>
certificates:
- domains:
  - "*.xhl.me"
  -  xhl.me
  profile: cloudflare
  # autorestart:
  #   - containers:
  #     - nginx
  autocmd: # 自动重启
    - cmd: nginx -s reload
      containers:
      - nginx
# - domains:
#   - "*.test.com"
#   profile: dnspod
#   ...
    2. 根据DNS PROVIDER信息验证, 并自动创建和续期证书
    docker run -it --rm --name letsencrypt2 \
  -v /etc/dnsrobocert:/etc/dnsrobocert \
  -v /etc/letsencrypt:/etc/letsencrypt \
  -v /var/run/docker.sock:/var/run/docker.sock \
  adferrand/dnsrobocert

    LEXICON_PROVIDER 主流的DNS服务都支持, 比如:

    查看全文 »

  1. 1
  2. 2
  3. 3
  4. 4
  5. ...
  6. 8