首页
/ 从零构建JavaScript技术栈:Express、Nodemon与PM2实战指南

从零构建JavaScript技术栈:Express、Nodemon与PM2实战指南

2025-06-26 15:58:16作者:乔或婵

引言

在现代Web开发中,构建一个高效、可靠的服务器环境是每个开发者的必修课。本文将深入探讨如何使用Express框架搭建Web服务器,并结合Nodemon和PM2工具实现开发与生产环境的完美配置。

Express框架基础

Express是Node.js生态中最受欢迎的Web框架,以其简洁的API和强大的中间件机制著称。让我们从零开始构建一个Express服务器:

项目结构设计

良好的项目结构是成功的一半。我们采用以下目录结构:

src/
├── client/       # 客户端代码
├── server/       # 服务器端代码
│   └── index.js  # 服务器入口文件
├── shared/       # 通用代码
│   ├── config.js # 配置常量
│   └── util.js   # 工具函数
public/
└── css/
    └── style.css # 静态样式文件

核心配置实现

shared/config.js中定义基础配置:

export const WEB_PORT = process.env.PORT || 8000
export const STATIC_PATH = '/static'
export const APP_NAME = 'Hello App'

这种设计允许我们通过环境变量灵活配置端口,同时提供默认值保证开发便利性。

Express服务器实现

服务器核心代码位于src/server/index.js

import compression from 'compression'
import express from 'express'

const app = express()
app.use(compression())  // 启用Gzip压缩
app.use(STATIC_PATH, express.static('dist'))
app.use(STATIC_PATH, express.static('public'))

app.get('/', (req, res) => {
  res.send(renderApp(APP_NAME))
})

app.listen(WEB_PORT, () => {
  console.log(`Server running on port ${WEB_PORT}`)
})

关键点解析:

  1. compression中间件启用Gzip压缩,显著提升传输效率
  2. 设置两个静态资源目录:dist用于构建产物,public存放固定资源
  3. 基础路由返回渲染后的HTML

模板渲染优化

render-app.js实现了简单的模板渲染:

const renderApp = (title) => `
<!doctype html>
<html>
  <head>
    <title>${title}</title>
    <link rel="stylesheet" href="${STATIC_PATH}/css/style.css">
  </head>
  <body>
    <h1>${title}</h1>
  </body>
</html>
`

开发利器:Nodemon

在开发过程中,频繁重启服务器严重影响效率。Nodemon解决了这一痛点:

配置与原理

"scripts": {
  "start": "yarn dev:start",
  "dev:start": "nodemon --ignore lib --exec babel-node src/server"
}

关键特性:

  • 自动监视文件变更并重启服务器
  • --ignore lib排除构建目录的干扰
  • 使用babel-node直接运行ES6代码

开发工作流

  1. 运行yarn start启动开发服务器
  2. 修改代码后,Nodemon自动重启服务
  3. 浏览器刷新查看变更

生产环境部署:PM2

生产环境需要更强大的进程管理能力,PM2提供了完整的解决方案:

构建流程

"prod:build": "rimraf lib && babel src -d lib --ignore .test.js"

此命令完成:

  1. 清理旧构建产物(rimraf lib)
  2. 使用Babel转译ES6到ES5(babel src -d lib)
  3. 忽略测试文件(--ignore .test.js)

PM2配置

"prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
"prod:stop": "pm2 delete server"

关键优势:

  1. cross-env确保跨平台环境变量设置
  2. PM2守护进程确保服务持续运行
  3. 日志实时输出便于监控

生产环境最佳实践

  1. 始终先构建再启动:yarn prod:build && yarn prod:start
  2. 使用yarn prod:stop正确停止服务
  3. prod:build加入prepush钩子确保可部署性

环境区分策略

通过shared/util.js实现环境检测:

export const isProd = process.env.NODE_ENV === 'production'

这种模式允许我们编写环境相关的逻辑,例如:

  • 开发环境:详细日志、热更新
  • 生产环境:性能优化、安全加固

总结

本文详细介绍了从零构建JavaScript技术栈中服务器部分的关键技术:

  1. Express提供了简洁强大的Web框架
  2. Nodemon极大提升了开发体验
  3. PM2保障了生产环境的稳定性

通过合理的项目结构和脚本配置,我们实现了开发与生产环境的无缝切换,为后续引入前端框架和构建工具打下了坚实基础。

登录后查看全文
热门项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
24
7
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
9
1
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
375
3.25 K
flutter_flutterflutter_flutter
暂无简介
Dart
619
140
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
62
19
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
1.03 K
479
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库,实现网络在NPU上加速计算。
C++
647
261
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.09 K
619
giteagitea
喝着茶写代码!最易用的自托管一站式代码托管平台,包含Git托管,代码审查,团队协作,软件包和CI/CD。
Go
23
0
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
790
76