如何在Debian上使用Node.js进行前端开发

在 Debian 上搭建 Node.js 前端开发环境

一准备与安装 Node.js

更新索引并安装基础工具：
- sudo apt update && sudo apt install -y curl ca-certificates gnupg
选择一种安装方式（推荐 NodeSource 或 NVM）：
- 使用 NodeSource 安装指定主版本（示例为 Node.js 20.x）：
  - curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
  - sudo apt install -y nodejs
- 使用 NVM 管理多版本（灵活切换 LTS/最新版）：
  - curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  - source ~/.bashrc
  - nvm install --lts
  - nvm use --lts
验证安装：
- node -v
- npm -v 说明：NodeSource 为 Debian 提供官方维护的二进制分发脚本，适合需要较新版本的场景；NVM 适合多项目多版本并行开发。

二配置开发工具与全局设置

配置 npm 国内镜像 提升下载速度：
- npm config set registry https://registry.npmmirror.com
可选：自定义 全局包目录（避免与系统目录混用）：
- mkdir -p ~/.npm-global
- npm config set prefix ‘~/.npm-global’
- echo ‘export PATH=~/.npm-global/bin:$PATH’ >> ~/.bashrc
- source ~/.bashrc
安装常用全局工具（按需）：
- npm i -g yarn pnpm
建议安装的 VS Code 扩展（前端开发提效）：
- Node.js Extension Pack、ESLint、Prettier、GitLens、npm Intellisense 以上镜像与扩展配置可显著改善依赖安装速度与编辑器体验。

三前端项目从零到运行

创建与初始化：
- mkdir my-spa && cd $_
- npm init -y
安装框架 CLI（三选一，示例为 React）：
- npm i -D react react-dom
- 或使用脚手架：npm i -g create-react-app && create-react-app .
常用任务脚本示例（写入 package.json）：
- “scripts”: { “dev”: “vite”, “build”: “vite build”, “preview”: “vite preview” }
启动与构建：
- npm run dev（开发）
- npm run build（生产构建）说明：Debian 作为开发环境贴近生产，便于调试与一致性维护；如需多版本 Node 并存，使用 NVM 切换版本后再创建/启动项目。

四本地服务与反向代理

快速本地静态服务（Node.js 原生）：
- 安装：npm i -D express
- 新建 server.js：
  - const express = require(‘express’); const app = express(); app.use(express.static(‘dist’)); const port = 3000; app.listen(port, () => console.log(http://localhost:${port}/));
- 启动：node server.js
使用 Nginx 反向代理（域名/端口统一、便于 HTTPS）：
- 安装：sudo apt install -y nginx
- 配置 /etc/nginx/sites-available/default：
  - server { listen 80; server_name your_domain.com; location / { proxy_pass http://127.0.0.1:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection ‘upgrade’; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }
- 校验与生效：sudo nginx -t && sudo systemctl reload nginx
进程守护（生产推荐）：
- sudo npm i -g pm2
- pm2 start server.js --name frontend
- pm2 list / logs / restart / stop 以上方案覆盖本地开发调试、域名访问与进程常驻需求。

五常见问题与排错

最新问答