文件/目录:

  • pwd,ls,cd,touch,mkdir,rm,cp,mv

rm -rf node_modules packages/*/node_modules

看文件/日志:

  • cat,vim,tail,less

编辑:

  • vim

搜索/查找:

  • grep,find |(管道符)

网络/进程/端口:

  • kill,lsof,netstat,top,htop,ps,curl,ping,wget

压缩/解压:

  • tar,unzip,zip

环境变量:

  • env,echo,export

远程:

  • ssh,scp

权限:

  • chmod,sudo

磁盘空间:

  • df,du

软连接

  • ln

服务管理:

  • systemctl

一、 文件与目录操作 (基础生存)

这部分操作就像你在电脑上用鼠标点文件夹一样,必须形成肌肉记忆。

  • pwd (Print Working Directory)
  • 作用:显示当前我在哪个目录。
  • 前端场景:当你配置 Webpack 或 Nginx 的 root 路径时,如果不确定写相对路径还是绝对路径,先用 pwd 复制完整路径,确保万无一失。
  • ls (List)
  • 作用:列出当前目录下的文件。
  • 前端场景
  • ls: 看看 build 出来的 dist 目录里有没有 index.html。
  • ls -a: 查看隐藏文件(比如找 .env, .gitignore, .ssh)。
  • ls -lh: 以易读的大小(KB/MB)查看文件,检查打包出来的 bundle.js 是不是太大。
  • cd (Change Directory)
  • 作用:切换目录。
  • 前端场景
  • cd /var/www/html: 进入 Nginx 静态资源目录。
  • cd ~: 回到用户主目录。
  • cd -: 切回刚才所在的目录(手滑切错时很有用)。
  • touch
  • 作用:创建一个空文件,或者更新文件的时间戳。
  • 前端场景
  • touch .gitignore: 快速新建文件。
  • 骚操作:在开发模式下,touch index.js 会更新文件修改时间,从而触发 Webpack 的热更新 (HMR) 重启。
  • mkdir (Make Directory)
  • 作用:创建文件夹。
  • 前端场景mkdir -p src/components/Header-p 参数非常重要,它可以一次性创建多级不存在的目录。
  • rm (Remove)
  • 作用:删除。
  • 前端场景
  • rm -rf node_modules: 最常用。递归强制删除文件夹,重新 npm install 时的起手式。
  • rm dist/*.map: 删除打包后的 map 文件,防止源码泄露。
  • cp (Copy)
  • 作用:复制。
  • 前端场景
  • cp .env.example .env: 项目初始化时,复制一份环境变量模板。
  • cp -r dist/ /var/www/backup/: 发布前备份上一版的代码。
  • mv (Move)
  • 作用:移动或重命名。
  • 前端场景
  • mv build/ dist/: 把构建目录改名。
  • mv config.js config.js.bak: 修改配置文件前,先重命名备份一份原文件。

二、 查看与编辑 (日志与配置)

服务器通常没有图形界面,这些命令是你唯一的“眼睛”和“手”。

  • cat
  • 作用:一次性显示全部内容。
  • 前端场景cat package.json 快速确认一下版本号或 scripts 命令,不用打开编辑器。
  • vim
  • 作用:文本编辑器。
  • 前端场景
  • 在服务器上直接修改 .env 里的 API 地址。
  • 修改 /etc/nginx/nginx.conf 配置反向代理。
  • 口诀i (写代码), Esc (退出编辑), :wq (保存退出), :q! (不保存瞎改退出)。
  • tail
  • 作用:查看文件末尾。
  • 前端场景
  • tail -f pm2-error.log: 排错神器。实时监控 Node 服务或 Nginx 的报错日志。当你刷新页面时,看着日志滚动,瞬间定位 Bug。
  • less
  • 作用:分页查看大文件。
  • 前端场景:日志文件有几百兆,用 cat 会刷屏刷死,用 less 可以按上下键慢慢看,按 q 退出。

三、 搜索与查找 (定位问题)

  • grep
  • 作用:文本搜索。
  • 前端场景
  • grep "500" access.log: 在 Nginx 日志里查找所有 500 报错的请求。
  • grep -r "TODO" src/: 在源码目录下递归查找所有标记了 TODO 的地方。
  • find
  • 作用:查找文件位置。
  • 前端场景find . -name "*.conf"。忘记 Nginx 配置文件放哪了?用这个一搜便知。
  • | (管道符)
  • 作用:连接两个命令,把左边的输出给右边。
  • 前端场景cat package.json | grep version。只看 package.json 里带 version 的那一行。

四、 网络/进程/端口 (服务排查)

这是前端进阶到全栈或运维最关键的一步。

  • ps (Process Status)
  • 作用:查看进程。
  • 前端场景ps -ef | grep node。查看当前服务器上跑了哪些 Node 进程。
  • kill
  • 作用:结束进程。
  • 前端场景
  • kill -9 <PID>: 强制关闭卡死的 Node 进程。
  • killall node: 关闭所有 Node 进程(慎用)。
  • lsof / netstat
  • 作用:查看端口占用。
  • 前端场景:启动项目报错 EADDRINUSE: address already in use :::3000
  • 解决lsof -i :3000 找出谁占了 3000 端口,拿到 PID,然后 kill 掉它。
  • top / htop
  • 作用:资源监控(类似 Windows 任务管理器)。
  • 前端场景:服务器变慢了,输入 htop 看看是不是 Node 进程出现了内存泄漏(Memory 占用飙升)或者 CPU 跑满了。
  • curl
  • 作用:命令行版的浏览器。
  • 前端场景
  • curl -I http://localhost:8080: 只看响应头。检查 Nginx 是否开启了 Gzip,或者 Cache-Control 缓存设置对不对。
  • curl -v http://api.com: 调试 API,看具体的 Request/Response 详情。
  • ping
  • 作用:测试网络连通性。
  • 前端场景ping www.google.com。服务器连不上外网?或者域名解析出来的 IP 对不对?
  • wget
  • 作用:下载文件。
  • 前端场景wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz。在服务器上下载 Node 安装包。

五、 压缩与解压

  • tar
  • 作用:打包/解压。
  • 前端场景
  • tar -czvf project.tar.gz dist/: 把 dist 目录打包,方便传输到服务器。
  • tar -xzvf project.tar.gz: 在服务器上解压安装包。
  • zip / unzip
  • 作用:处理 .zip 格式。
  • 前端场景:有些产品经理或 UI 会发给你 .zip 的资源包,在服务器上解压用。

六、 环境变量

  • env / echo / export
  • 前端场景
  • echo $NODE_ENV: 看看当前是开发环境 (development) 还是生产环境 (production)。
  • export PORT=8080: 临时设置端口号,然后启动服务。

七、 远程与权限

  • ssh
  • 作用:远程登录。
  • 前端场景ssh root@192.168.1.1。每天工作的起点。
  • scp
  • 作用:远程文件拷贝。
  • 前端场景scp -r ./dist root@192.168.1.1:/var/www/html。手动部署时的“笨办法”,把本地构建好的包丢到服务器去。
  • chmod (Change Mode)
  • 作用:修改权限。
  • 前端场景chmod +x deploy.sh。你写了一个自动化部署脚本,必须给它“可执行”权限才能运行。
  • sudo
  • 作用:以管理员身份执行。
  • 前端场景sudo npm install -g pm2。全局安装软件时通常需要管理员权限。

八、 磁盘空间

  • df (Disk Free)
  • 前端场景df -h。构建报错 “No space left on device”,先看这个,确认是不是磁盘满了。
  • du (Disk Usage)
  • 前端场景du -sh node_modules。看看 node_modules 到底有多大,或者排查哪个日志文件夹把磁盘吃光了。

九、 软连接

  • ln (Link)
  • 前端场景
  • Nginx 配置ln -s /etc/nginx/sites-available/app /etc/nginx/sites-enabled/app。这是 Nginx 管理站点的标准姿势。
  • 版本切换:有时候为了方便,会把 npm 软链到具体的 node 版本目录下。

十、 服务管理

  • systemctl
  • 作用:管理系统服务(启动/停止/重启/开机自启)。
  • 前端场景
  • systemctl start nginx: 启动 Nginx。
  • systemctl reload nginx: 修改配置后平滑重启 Nginx(不中断现有连接)。
  • systemctl enable docker: 设置 Docker 开机自启。

tabby

登录脚本:export PS1="$PS1"'\\[\\e]1337;CurrentDir=$PWD\\a\\]'

国内服务器安装 nvm

1

git clone https://gitee.com/mirrors/nvm.git ~/.nvm

2

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
echo 'export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/' >> ~/.bashrc
source ~/.bashrc

3

npm config set registry https://registry.npmmirror.com

9 items under this folder.