个人项目从开发到部署(CI/CD)的思路 在项目开发过程中，最简单的流程是开发完成后手动上传到服务器目录，再执行相关命令启动服务，这样就完成了一次上线，但随着项目不断的迭代，这样的流程就显得很繁琐，即使是前后端分离项目，每次打包根据项目的大小都需要等待一段时间，显得很机械，即使 IDE 有集成发布和部署工具，也还是需要很多步骤，当你切换 IDE 之后，原来的发布和部署工具就没有办法使用，有一定的更换成本。所以，一套自动化的发布和部署流程在项目开发过程中是必不可少的。 #项目架构 #前端 选用基于 Vue3 的框架和依赖 Nuxt3在新窗口打开: 基于 Vue3 的混合开发框架，仓库地址在新窗口打开 VueUse在新窗口打开：一组基于 Composition API 的实用函数，仓库地址在新窗口打开 UnoCSS在新窗口打开：原子化 CSS 引擎，支持多种预设，仓库地址在新窗口打开 #后端 BaaS(后端即服务，Backend as a Service)，可以帮助我们快速构建和运行应用，通常包含身份验证、数据库、存储、网关、Web托管等服务，目前市面上最流行的是谷歌的 Firebase在新窗口打开，但由于 GFW 原因，在国内无法使用 Firebase 的服务，这里我们选用开源的 Supabase在新窗口打开，用以替代 Firebase，Supabase 包含免费套餐和专业套餐在新窗口打开，基于成本考虑，这里选择暂时使用 Supabase 的免费套餐，Supabase 也提供自建服务，允许你通过 Docker 部署私有的 Supabase 服务。仓库地址在新窗口打开 #Docker Compose 管理多个 docker 应用，将前端项目容器化，方便集成其他项目，比如添加 Supabase 后端服务，添加 Python 爬虫服务。同时只要服务器安装了 Docker 和 Docker Compose，就免掉了安装其他环境的时间。 #Lerna Lerna在新窗口打开 是一个多包管理工具（monorepo），用于管理包含多个软件包（package）的 JavaScript 项目。虽然开发项目不属于package，但只要将 packages 目录下面的前端项目的 package.json 设置为 private，当执行 lerna publish 的时候就不会发布到 npm 上。不论是开发 App 还是 Library，不论是个人项目还是企业项目，我们都可以利用 Lerna 来进行管理。仓库地址在新窗口打开 #CI/CD 当项目初始版本开发完成后，接着需要考虑如何部署到线上，以减少开发和部署之间的流程，尤其是需要频繁发布的项目。普遍来说，项目正式上线有确立需求、开发、构建、测试、部署等一些个流程，CI/CD 正是一套在构建、测试、部署流程中实施自动化的组合实践。 常见的 CI/CD 工具有 GitLab CI、Travis CI、Jenkins、Github Action、TeamCity、腾讯云Coding、阿里云云效等，考虑到本地开发机性能问题，选择第三方的构建服务器，每月提供一定的免费构建时长，GitLab在新窗口打开 是400分钟，由于有人挖矿，需要提供信用卡信息；Github在新窗口打开 是2000分钟；Travis CI在新窗口打开 一次性赠送10000 积分，这个积分不会刷新，用完就没了；TeamCity在新窗口打开 托管需要许可证；腾讯云Coding在新窗口打开 是1000分钟，并发任务数是1，单次构建上限30分钟；阿里云云效在新窗口打开是1800分钟，并发任务数是3。使用Windows 和 Mac OS 时分钟数换算有一定比例，这里根据代码托管在 Github 私有存储库和构建时长，选择 Github Action。 Github Action在新窗口打开 里的主要步骤是：检出代码 - 安装依赖打包 - 推送到服务器 - 执行相关命令，社区已经有不少的插件足够我们直接使用。编写工作流程中使用到的环境变量是通过在 Github 上的 Settings - Secrets - New repository secret 中添加 key - value 键值对来保证变量不会泄露，使用方式是在 .github/workflows/*.yml 文件中以 secrets.KEY 的格式引用。GitHub Action 执行失败的时候，会以邮件的形式通知到用户。 actions/checkout@v2在新窗口打开：检出代码插件 actions/setup-node@v2在新窗口打开：Node 环境插件 easingthemes/ssh-deploy@main在新窗口打开：SSH 部署插件，用到的环境变量 SSH_PRIVATE_KEY：SSH 私钥 SOURCE：源目录，Github Action 工作流程中的目录 REMOTE_HOST：远程服务器地址 REMOTE_USER：远程登录用户名 TARGET：目标目录，远程服务器上的目录 appleboy/ssh-action@master在新窗口打开：SSH 远程执行命令插件，用到的变量 host：远程服务器地址 username：远程登录用户名 key：SSH 私钥 port：22（没有修改的情况下） script：需要在远程服务器上执行的命令 #代码 基本目录 bash复制 . |-- .eslintignore |-- .eslintrc |-- .github | `-- workflows | `-- deploy.yml |-- .gitignore |-- .prettierrc.toml |-- lerna.json |-- package.json |-- node_modules |-- packages | |-- docker | | `-- docker-compose.yml | `-- web | |-- .nuxt | |-- .output | |-- Dockerfile | |-- README.md | |-- layouts | |-- nuxt.config.ts | |-- package.json | |-- node_modules | |-- pages | `-- tsconfig.json |-- readme.md `-- yarn.lock 123456789101112131415161718192021222324252627 在前端项目下，添加 Dockerfile 文件，这里选用的是 node:lts-alpine3.14 镜像 Dockerfile复制 FROM node:lts-alpine3.14 WORKDIR /app COPY ./.output ./.output COPY ./package.json ./package.json EXPOSE 3000 CMD ["npm", "start"] 12345678 在 docker 项目下，添加 docker-compose.yml bash复制 version: "3" services: web: build: ../web restart: always ports: - "3000:3000" environment: HOST: 0.0.0.0 12345678910 如果还有其他服务，统一放在 packages 目录下 在 .github/workflows 目录下面添加 ci.yml 文件 yaml复制 name: Deploy CI # 触发工作流程的事件，只有 push 到 master 分支的才会执行下面的任务 on: push: branches: [ master ] jobs: build: runs-on: ubuntu-latest # 判断 job 是否执行，当提交的消息中包含 'chore(release): publish' 时才会执行 build if: contains(github.event.head_commit.message, 'chore(release): publish') steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '14.x' cache: 'yarn' - name: Install dependencies run: yarn --immutable - name: Build web run: yarn build - name: Generate deploy folder and move files run: | mkdir -p deploy/web mv packages/web/.output packages/web/package.json packages/web/Dockerfile -t deploy/web mv packages/docker -t deploy - name: Deploy to Staging server uses: easingthemes/ssh-deploy@main env: SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} ARGS: "-rltgoDzvO --delete" SOURCE: "deploy/" REMOTE_HOST: ${{ secrets.REMOTE_HOST }} REMOTE_USER: ${{ secrets.REMOTE_USER }} TARGET: ${{ secrets.REMOTE_TARGET }} - name: Setup docker compose uses: appleboy/ssh-action@master with: host: ${{ secrets.REMOTE_HOST }} username: ${{ secrets.REMOTE_USER }} key: ${{ secrets.SERVER_SSH_KEY }} port: 22 script: | cd ${{ secrets.REMOTE_TARGET }}/docker docker-compose up -d --build --force-recreate 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 #总结 有一套属于自己可重复使用的自动化部署流程，能够大幅度节省其中的时间，能够更加专注开发，即使是一个简单的项目，也建议通过 CI/CD 的方式来进行发布部署，虽然每个项目情况不一样，但部署流程总体差不太多。 将每个项目视为一个 package，利用 Lerna 管理 packages，将每个项目容器化，作为 Docker Compose 中的一个应用，统一进行管理，减少迁移和维护成本，通过 Github Action 实现 CI/CD 流程，进行测试、构建、部署，可以实现多环境、多版本上线。 #参考来源 [1]: 什么是 CI/CD？在新窗口打开 [2]: 谁才是世界上最好的 CI/CD 工具？在新窗口打开

Google 搜索已支持深色模式 近一年，随着深色模式被越来越多的 app 和网站支持，前段时间，Google 搜索也提供了深色模式

Webstorm 小技巧（整理自互联网） 知晓更多的小技巧能让你的 Webstorm 体验更加 Happy Happy #1. TypeScript 快速查看变量类型 按住 Cmd/Ctrl 键，并将鼠标悬停在变量上查看其类型 #2. 3种方式执行 npm 脚本 package.json文件中脚本名称旁边的图标，项目视图下的 npm 工具窗口，使用 npm task （Alt + F11 ） #3. 显示 CSS 颜色样式为背景 接连选择 Preferences/Settings | Editor | General | Appearance ，勾选 Show CSS Color Preview as Background #4. 导航到上次编辑的位置 按下 Ctrl + Shift + Backspace 键或从主菜单接连选择 Navigate | Last Edit Location 进行快速跳转，快捷键可能并不相同，先通过从主菜单的 Navigate 下查看 #5. 快速寻找当前文件 按下 Alt + F1，接着选择 Project View 并按下 Enter 键 #6. 进入多行编辑模式 选择代码片段，按下 Alt + Shift + G，退出编辑模式时，按下 Escape 键 #7. 在代码中添加占位符 输入 lorem，并按下 Tab 键，会出现多个英文单词，如果需要指定单词数量，通过在 lorem 后加入数字，比如输入 lorem5，如果需要添加外标签，通过在 lorem 前面添加 标签名 和 >，比如：p>lorem，按下 Tab 键。 #8. 快捷添加和删除断点 按下 Cmd/Ctrl + F8 #9. 提取 CSS 样式规则 按下 Alt + Enter，选择 Extract ruleset #10. 在工具窗口和弹出窗口寻找特定信息 打开工具窗口和弹出窗口，输入要查找的文件名称，在左上角将会出现搜索字段，同时符合搜索条件的将会有高亮显示 #11. 提高代码可读性，在方法间增加分隔符 接连选择 Preferences/Settings | Editor | General | Appearance ，勾选 Show method separators #12. 生成随机数据 接连选择 Preferences/Settings | Plugins ，搜索并安装 Randomness 插件，能插入多种类型的数据，通过 Alt + R 呼出弹窗 #13. 创建新的文件和文件夹 Project 工具窗口获取焦点，接着按下 Ctrl + Alt + Insert，WebStorm 将会打开一个弹框，选择一个菜单项后，在弹框内输入名称或包含多层路径的名称 #14. 保存执行配置文件 这项操作可以将执行配置保存在项目目录下的 .idea 文件夹，以便分享给其他项目成员 #15. 快速跳转到文件某一行 macOS 按下 Cmd + Shift + O，Windows 和 Linux 按下 Ctrl + Shift + N，在输入文件名后加入 : 指定行数 #16. 常规字符串添加转为模板字符串 按下 Alt + Enter，选择 Replace with template string #17. 快速访问可执行命令（Run Configurations） macOS 按下 Ctrl + Alt + R，Windows 和 Linux 按下 Alt + Shift + F10，区别于 Alt + F11 来自于 package.json 文件下的命令， Alt + Shift + F10 是来自于 Webstormn 用户配置的 Configurations #18. 添加新的依赖 在代码中先引入，然后按下 Alt + Enter，单击安装 #19. 普通函数转箭头函数 按下 Alt + Enter，选择 xxx to an arrow function #20. 左右移动元素 macOS 按下 Alt + Shift + Cmd + Left/Right，Windows 和Linux 按下 Alt + Shift + Ctrl + Left/Right #21. 快速删除标签 在标签内获取焦点，按下 Alt + Enter，选择 Remove tag #22. 在代码片段中进行搜索 ① 选择代码片段，按下 Cmd/Ctrl + F，接着输入搜索条件 ② 按下 Cmd/Ctrl + F，输入搜索条件，接着点击 Selection 图标 #23. 自定义背景图片 接连选择 Preferences/Settings | Appearance & Behavior | Appearance | Background Image… ，选择一张背景图片，并调整背景透明度等 #24. 切换 CSS 颜色格式 按下 Alt + Enter，选择颜色模式 #25. 普通函数转 async 函数 按下 Alt + Enter，选择 Convert to async function #26. 添加条件断点 在断点处，右键单击，键入 condition 条件 #27. 自动 import #28. 在 html 中快捷添加 script 标签 #29. 切换 CSS 的引号方式 接连选择 Preferences/Settings | Editor | Code Style | CSS, SCSS or Less – Other ，选择单引号或者双引号 #30. 在 IDE 中测试正则表达式 将光标停在表达式中间，按下 Alt + Enter，选择 Check RegExp #31. 快捷键选择代码片段 单次按下 Ctrl + W 扩展选择区域，单次按下 Shift + Ctrl + W 缩小选择区域 #32. 使用代码片段 代码片段可以节省大量时间，按下 Cmd/Ctrl + J 查看当前上下文可用的代码片段，接连选择 Preferences/Settings | Editor | Live Templates 查看所有的代码片段 #33. 补全当前语句 输入括号后，macOS 按下 Shift + Cmd + Enter，Windows 和 Linux 按下 Shift + Ctrl + Enter，这将会自动添加花括号并将光标向下移动到下一行的开头 #34. 快速添加 console.log 键入 log，接着按下 Tab，或者先键入要输出的值，接着 键入 .log，按下 Tab #35. 使用 Scratch 文件 在项目中需要做笔记或者编写伪代码时使用 Scratch 文件，macOS 按下 Cmd + Shift + N，Windows 和 Linux 按下 Ctrl + Shift + Alt  + Insert，接着选择 Scratch 文件的语言 #36. 快速删除一行、多行 macOS 按下 Cmd + Delete ，WIndows 和 Linux 按下 Ctrl  + Y #37. 进入免干扰模式（distraction-free mode） 免干扰模式意为隐藏所有 UI 元素，让你更加专注于代码，按下 Ctrl + `，接连选择 View Mode | Enter Distraction Free Mode，进入 distraction-free mode #38. 快捷复制一行、多行 按下 Cmd/Ctrl + D 复制一行或者一个块 #39. 重新格式化代码 按下 Cmd/Ctrl + Alt + L 重新格式化全部代码或者代码片段 #40. 将多行转换成单行 按下 Ctrl + Shift + J #41. 快速移动行 macOS 按下 Shift + Cmd + Up/Down，Windows 和 Linux 按下 Ctrl + Shift + Up/Down #42. 使用语言注入 以不同于文件主要语言的语言注入代码片段，按下 Alt + Enter，从列表中选择一种语言 #43. 查看本地历史记录 右键单击选择 Local History | Show History，通过本地历史记录，能够快速恢复更改和比对代码。接连选择 Preferences/Settings | Advanced Settings | IDE 修改本地保存时长 #44. 在 JavaScript 类中切换公开和私有字段 按下 Alt + Enter #45. 多光标编辑代码 选择下一个出现当前单词的位置，macOS 按下 Ctrl + G，Windows 和 Linux 按下 Alt + J。选择所有出现当前单词的位置，macOS 按下 Ctrl + Cmd + G，Windows 和 Linux 按下 Shift + Ctrl + Alt + J。添加或删除插入符（caret），按住 Alt 键，单击鼠标。按下 Escape 键 清除所有插入符 #46. 快速删除 Import 未使用的导入 按下 Ctrl + Alt + O，快速删除未使用的导入，合并来自同一模块的导入 #47. 粘贴最近复制的文本 按下 Cmd/Ctrl + Shift + V，选择一个 #48. 后缀表达式 通过 . 符号后接缩写表达式，然后按下 Tab 键，接连选择 Preferences/Settings | Editor | General | Postfix Completion 查看所有可用表达式 #49. 快速预览 macOS 按下 Alt + Space，Windows 和 Linux 按下 Ctrl + Shift + I 快速预览文件 #50. 查看最近使用过的文件 按下 Cmd/Ctrl + E #51. 查看最近导航过的位置 按下 Cmd/Ctrl + Shift + E #52. 查看某处上下文所有可用的重构 macOS 按下 Ctrl + T，Windows 和 Linux 按下 Ctrl + Alt + Shift + T #53. 重命名为类名 按下 Alt + Enter 选择 rename file to xxx #54. 查看文件格式的错误和警告 鼠标移入右侧来预览带有错误和警告的代码 #55. 安全删除文件 右键文件，选择 Refactor | Safe Delete，将会检查所选文件是否被导入在项目中的任何位置 #56. 保存代码片段 选择代码片段，按下 Cmd/Ctrl + Shift + A，输入 Save as Live Template，添加快捷键和描述，保存 #57. 自动换行 接连选择 Preferences/Settings | Editor | General > Soft Wraps #58. 文件结构 按下 Cmd + 7 / Alt + 7，查看当前文件的结构 #59. 添加 TODO 或 Fixme 待办事项 添加 TODO 或 Fixme 注释，如果有遗漏未处理的，在提交之前将会有警告提示，可在工具窗口查看所有 #60. 查找特定操作或切换配置选项 按下 Cmd/Ctrl + Shift + A #61. 切换导航 单次按下 Ctrl + Tab，选择并切换工具窗口 #62. 查看 Package 信息 按住 Cmd / Ctrl 键，移动鼠标到包名上，查看描述和可用版本 #63. 验证词汇 输入词汇时，IDE 会校验词汇或语法的合法性，并提供正确的词汇和语法 #64. 代码注释 Cmd + / 或 Ctrl + / 行注释，Cmd + Shift + / 或 Ctrl + Shift + / 块注释 #65. 计算常数 按下 Alt + Enter，选择 Compute constant value #66. 快速查看参数 按下 Cmd/Ctrl + P #67. 移动函数到单独文件 按下 Alt + Enter，选择 Move function xxx to xxx #68. 快速排序行 选择代码片段，从主菜单选择 Edit | Sort Lines，或者按下 Cmd/Ctrl + Shift + A，输入 Sort Lines #69. 在 HTML 中使用 Emmet 表达式 按下 Cmd/Ctrl + Alt + J，输入 Emmet 表达式 #70. 展开和收起 按下 Ctrl + Shift + - 收起代码片段或全部代码，按下 Ctrl + Shift + + 展开代码片段或全部代码，按下 Ctrl + - 收起代码块，按下 Ctrl + + 展开代码块 #71. 查找所有 双击 Shift 键，输入文件名、方法名、操作名等等，不仅快速，而且齐全

JetBrains又带来一大开发利器—Code With Me，远程协作和实时开发将能够在IDE中完成，仅靠IDE自身远程桌面开发的时代要来了！ JetBrains又带来一大开发利器-—Code With Me，现在只要你用的是2020.02版本以上，便能在IDE中完成开发、调试、测试、音频视频聊天实时沟通等多种操作，再也不需要通过代码片段来猜测Bug出在哪里，请求他人看看代码，将能够有更直接的方式，使用IDE自身远程桌面开发的时代要来了！ #安装和使用 在IDE的页面进入File(Ctrl + Alt + C) > Settings > Plugins > Marketplace，然后输入关键字code with me，点击Install，等待安装，重启IDE 安装好之后，右上角会多出一个选项 #权限设置 接着点击生成链接，从下图我们可以看到，有预设几个不同的权限，文件编辑、终端执行、命令执行、是否自动开启语音通话，Host可以隐藏某个文件或文件夹，语言通话默认开启，我们可以通过去掉勾选来关闭它，有一个问题是允许复制只读权限下的代码。 Read-only：权限皆为只读，属于安全的模式，协助者只能浏览 Edit files：可编辑文件，无法使用终端和执行命令 Full access：拥有全部权限，理应只接受被信任的用户 Custom：可自定义以上权限 生成链接后，会自动将链接复制到剪贴板中，这时候，我们就可以将链接发给其他人 注意 因为有墙的原因，所以在访问JetBrains服务器的时候，极大概率会出现Connection timeout，需要挂梯子才能达到舒适体验 具体操作时如下图所示，Host和Guest都能开启跟随和被跟随模式，当需要进行问题排查、操作复现时非常有用 #语音通话 支持音视频文本实时进行聊天，可以替代我们平常用社交软件来进行沟通的场景，但不足的是聊天不支持图片、视频等大文件 #Intellij Client 当我们断开连接时，会返回至该界面，我们将它固定在任务栏，按照我们的期许，当需要进行远程协助时，应该要能够直接点击任务栏上的图标，便能进入连接界面，而不是每次都需要先启动IDE才能加入他人链接，那么，实际上可以吗？ 当我们退出IDE，点击之后，它提示“No JVM installation found. Please install a 64-bit JDK. If you already hava a JDK installed, define a JAVA_HOME variable in Computer > System Properties > System Settings > Environment Variabled.”，根据这个提示，我们知道是缺少了Java SDK，但不知道具体最低哪个版本，经过小编测试，至少需要Java SDK 11在新窗口打开版本以上，才能正常打开启动 当我们安装Java SDK 11+以后，可以看到，能够正常启动，以后，即使不打开IDE，也能进行远程协助了 #总结 Code With Me是JetBrains的一项新型协作开发服务，它可以让你在不依赖第三方远程工具和社交软件的前提下，仅靠彼此使用的开发软件，便能达到远程协作、及时沟通、实时开发的效果。 它打破了固有的IDE只能用来进行软件开发的观念，将远程功能和音视频聊天功能集成进了IDE官方插件，这意味着，只要连接稳定和内置的终端支持，我们就可以远程在命令行执行对系统的任意操作，包括部署、运维等等。 理想情况下，只要Host主机配置足够高，便能支撑足够多的Guest同时进行项目开发、测试、调试，而且能够通过权限配置达到互不影响。 Code With Me也支持对安全性有要求的本地化部署在新窗口打开。