ubuntu下js框架如何搭建

Ubuntu 下搭建常见 JS 框架的实用步骤

一 准备环境

• 更新系统并安装基础工具：
  • sudo apt update & & sudo apt upgrade -y
  • sudo apt install -y curl wget git build-essential
• 安装 Node.js 与 npm（两种常用方式，择一即可）：
  • 使用 NodeSource 仓库安装（示例为 Node.js 14.x，如需其他版本将 14.x 替换为目标版本）：
    • curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
    • sudo apt install -y nodejs
  • 使用 Ubuntu 官方仓库安装：
    • sudo apt install -y nodejs npm
• 验证安装：
  • node -v
  • npm -v
• 可选优化：使用国内镜像加速（如 npmmirror）提升安装速度：
  • npm config set registry https://registry.npmmirror.com
  • 如需全局使用 cnpm：npm install -g cnpm --registry=https://registry.npmmirror.com

二 搭建 Express 后端

• 初始化项目并安装依赖：
  • mkdir my-express-app & & cd my-express-app
  • npm init -y
  • npm install express
• 创建入口文件 server.js：
  • const express = require(‘express’); const app = express(); const port = 3000; app.get(‘/’, (req, res) => res.send(‘Hello Express’)); app.listen(port, () => console.log(Server running at http://localhost:${ port} /));
• 启动与热更新：
  • 开发：node server.js
  • 生产：使用进程管理工具 PM2
    • npm install -g pm2
    • pm2 start server.js --name “my-express”
• 可选：开放防火墙端口（如需外网访问）
  • sudo ufw allow 3000
  • 如需 HTTP/HTTPS：sudo ufw allow 80,443 & & sudo ufw enable

三 搭建 Vue 前端

• 全局安装 Vue CLI（Vue 3 推荐）：
  • npm install -g @vue/cli
• 创建与启动项目：
  • vue create my-vue-app
  • cd my-vue-app
  • npm run serve（开发环境，默认端口 8080）
• 生产构建与部署（配合 Nginx）：
  • npm run build（生成 dist 目录）
  • 将 dist 内容拷贝至 Nginx 站点目录（如 /var/www/html）
  • 配置 Nginx（示例）：
    • server { listen 80; server_name your-domain.local; root /var/www/html; index index.html; location / { try_files $uri $uri/ /index.html; } }
  • 重启 Nginx：sudo systemctl restart nginx

四 搭建 React 前端 Umi Ant Design

• 环境要求：Node.js ≥ 10.13
• 初始化与启动：
  • npx @umijs/create-umi-app
  • cd my-umi-app & & npm i
  • npm start（默认端口 8000）
• 集成 Ant Design 与 Umi UI：
  • npm i antd @umijs/preset-ui
  • 在 .umirc.ts 中启用：
    • export default defineConfig({ dva: { } , antd: { } } );
  • 启动后在浏览器右下角可使用 Umi UI 快速生成页面与配置路由

五 常见问题与建议

• 版本选择：Node.js 版本应与框架要求匹配（如 Umi 要求 ≥ 10.13）；如需特定版本，优先使用 NodeSource 脚本安装。
• 权限与全局包：全局安装时若报权限错误，优先使用 npx 或在用户目录配置 npm 全局目录，避免 sudo 全局安装。
• 镜像加速：国内建议使用 npmmirror 或 cnpm 提升依赖安装速度。
• 进程守护：Node 服务上线建议使用 PM2 管理进程、日志与自动重启。
• 端口与防火墙：开发常用 3000/8080/8000；服务器需放行对应端口（如 80/443 或应用端口）。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！