如何在Ubuntu构建JS项目 - 问答

如何在Ubuntu上构建JS项目

在Ubuntu上构建JavaScript项目（涵盖Node.js后端、React/Vue前端或NestJS等框架），需完成环境准备→项目初始化→依赖管理→构建配置→进程管理→部署优化六大步骤，以下是详细指南：

1. 环境准备：安装Node.js与npm

JavaScript项目依赖Node.js运行时和npm包管理器。Ubuntu官方仓库的版本较旧，推荐通过**NVM（Node Version Manager）**安装最新稳定版，便于版本切换：

# 安装NVM（需联网）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
# 加载NVM环境（重启终端或运行）
source ~/.bashrc
# 安装最新LTS版本Node.js（如v18）
nvm install --lts
# 验证安装（应输出版本号）
node -v  # 示例：v18.17.1
npm -v   # 示例：9.6.7

注：若需安装特定版本（如v16），可替换为nvm install 16。

2. 项目初始化：创建项目目录与package.json

通过package.json管理项目元数据和依赖，是JS项目的核心配置文件：

# 创建项目目录并进入
mkdir my-js-project && cd my-js-project
# 初始化项目（-y自动接受默认配置）
npm init -y

此时会生成package.json，包含项目名称、版本、入口文件（main）、依赖列表等字段。

3. 依赖管理：安装项目所需依赖

根据项目类型安装依赖，分为生产依赖（--save，默认）和开发依赖（--save-dev，仅开发时需要）：

# 安装Express框架（生产依赖，用于构建后端API）
npm install express --save
# 安装ESLint（开发依赖，用于代码质量检查）
npm install eslint --save-dev

提示：若项目使用TypeScript，需安装typescript、@types/node等依赖；若为前端项目，需安装react、vue等框架依赖。

4. 构建配置：添加项目脚本与工具

在package.json中定义脚本命令，简化构建、启动等任务；根据需要配置构建工具（如Webpack、Babel）：

{
  "scripts": {
    "start": "node index.js",          // 启动生产环境
    "dev": "nodemon index.js",        // 开发环境（自动重启）
    "build": "tsc",                   // TypeScript编译（若有）
    "lint": "eslint src/"             // 代码检查
  },
  "devDependencies": {
    "nodemon": "^3.0.0",              // 开发时自动重启工具
    "eslint": "^8.0.0"                // 代码检查工具
  }
}

注：若项目为前端项目（如React），需配置Webpack的webpack.config.js，并通过npm run build编译为生产代码；若为NestJS项目，需运行npm run build编译TypeScript为JavaScript。

5. 进程管理：使用PM2保持应用运行

PM2是Node.js进程管理器，可实现自动重启（崩溃后自动恢复）、日志管理、集群模式（多核CPU优化）等功能：

# 全局安装PM2
sudo npm install -g pm2
# 启动应用（假设入口文件为index.js，服务名称为my-app）
pm2 start index.js --name "my-js-app"
# 查看进程状态（确认应用运行中）
pm2 status
# 生成开机自启配置（避免服务器重启后进程终止）
pm2 startup
# 保存当前进程列表（需运行pm2 startup后执行）
pm2 save

提示：常用命令还包括pm2 logs（查看实时日志）、pm2 restart my-js-app（重启应用）、pm2 stop my-js-app（停止应用）。

6. 部署优化：配置Nginx反向代理与防火墙

为提升安全性与可访问性，需通过Nginx反向代理将请求转发到Node.js应用，并配置防火墙开放端口：

# 安装Nginx
sudo apt update && sudo apt install nginx
# 开放HTTP（80）和HTTPS（443）端口
sudo ufw allow 'Nginx Full'
# 配置Nginx反向代理（编辑默认站点配置）
sudo nano /etc/nginx/sites-available/default

在server块中添加以下内容（替换your-domain.com为服务器IP或域名）：

location / {
    proxy_pass http://localhost:3000;  # 转发到Node.js应用端口
    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;
}

保存后重启Nginx：

sudo systemctl restart nginx

注：若需启用HTTPS，可通过Let’s Encrypt免费获取SSL证书，配置Nginx支持HTTPS。

通过以上步骤，即可在Ubuntu上完成JS项目的构建、运行与部署。根据项目类型（如Next.js、NestJS），需调整部分配置（如Next.js的next build命令），但核心流程一致。

0 赞

0 踩