ubuntu下js框架如何搭建

首页

编程语言

ubuntu下js框架如何搭建

热心网友

转载

2026-04-29

Ubuntu 系统搭建主流 JavaScript 框架：从环境配置到项目部署完整指南

ubuntu下js框架如何搭建

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

一、环境准备与基础配置

在 Ubuntu 操作系统上高效开发 JavaScript 应用，首要任务是搭建稳定、高效的开发环境。本部分将详细介绍 Node.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 为例，可替换为所需版本）：
  - 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，正确显示版本号即表示环境就绪。
优化配置：配置国内镜像源以加速依赖安装：
- 为提升 npm 包下载速度，建议将注册表切换至国内镜像：npm config set registry https://registry.npmmirror.com
- 也可选择安装 cnpm 客户端替代 npm：npm install -g cnpm --registry=https://registry.npmmirror.com，后续使用 cnpm 命令进行包管理。

二、搭建 Express.js 后端服务

Express 是 Node.js 生态中最流行的 Web 应用框架，以其轻量、灵活的特性，非常适合构建 RESTful API 和服务器端应用。

创建项目并安装核心依赖：
- 新建项目目录并切换至该目录：mkdir my-express-app && cd my-express-app
- 初始化项目配置文件：npm init -y
- 安装 Express 框架：npm install express

编写应用主文件 server.js：

创建 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 https://localhost:${port}/`));

启动服务与进程管理：
- 开发模式启动：直接运行 node server.js，终端将输出服务运行地址。
- 生产环境部署：推荐使用 PM2 进行进程守护与管理，确保服务高可用。
  - 全局安装 PM2：npm install -g pm2
  - 使用 PM2 启动并命名应用：pm2 start server.js --name “my-express”
服务器配置：开放防火墙端口（如需公网访问）：
- 若需从外部网络访问服务，需在防火墙中放行对应端口：
  - 放行自定义应用端口：sudo ufw allow 3000
  - 如需开放 Web 标准端口：sudo ufw allow 80,443 && sudo ufw enable

三、搭建 Vue.js 前端应用

Vue.js 是一套渐进式 JavaScript 框架，以其易上手和强大的生态系统，成为构建现代用户界面的优选方案。

安装 Vue 命令行工具 (Vue CLI)：
- 全局安装官方脚手架以快速创建项目：npm install -g @vue/cli
创建并运行 Vue 项目：
- 使用 CLI 创建新项目：vue create my-vue-app，交互式选择预设配置。
- 进入项目文件夹：cd my-vue-app
- 启动本地开发服务器：npm run serve，应用将在 https://localhost:8080 运行。
构建生产版本并部署至 Nginx：
- 执行构建命令生成优化后的静态文件：npm run build，产物位于 dist 目录。
- 将 dist 目录内容复制到 Nginx 的 Web 根目录，例如：/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）

对于需要快速开发的中后台管理系统，基于 React 的 Umi 框架配合 Ant Design 组件库，提供了开箱即用的企业级解决方案。

环境检查： 确认 Node.js 版本不低于 10.13。
项目初始化与启动：
- 使用官方创建工具初始化项目：npx @umijs/create-umi-app
- 进入项目目录并安装依赖：cd my-umi-app && npm i
- 启动开发服务器：npm start，默认访问地址为 https://localhost: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 安装可以精确控制版本。
全局包安装权限： 避免使用 sudo npm install -g 安装全局包，以防权限混乱。推荐配置用户目录下的 npm 全局路径，或使用 npx 命令临时运行工具。
依赖安装加速： 在国内网络环境下，配置 npm 国内镜像源（如 npmmirror）或使用 cnpm，能显著缩短依赖下载时间，提升开发体验。
生产环境进程管理： 部署 Node.js 服务时，务必使用 PM2 等进程管理工具实现应用守护、自动重启、日志管理和负载监控，这是保障服务稳定性的关键。
网络与安全配置： 开发时注意常用端口（Express: 3000, Vue: 8080, Umi: 8000）。服务器部署后，需在防火墙中正确放行应用端口（如 80、443 或自定义端口），并考虑配置 SSL 证书启用 HTTPS。