从零构建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}`)
})

关键点解析：

compression中间件启用Gzip压缩，显著提升传输效率
设置两个静态资源目录：dist用于构建产物，public存放固定资源
基础路由返回渲染后的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代码

开发工作流

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

生产环境部署：PM2

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

构建流程

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

此命令完成：

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

PM2配置

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

关键优势：

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

生产环境最佳实践

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

环境区分策略

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

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

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

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

总结

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

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

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

登录后查看全文

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

引言

Express框架基础

项目结构设计

核心配置实现

Express服务器实现

模板渲染优化

开发利器：Nodemon

配置与原理

开发工作流

生产环境部署：PM2

构建流程

PM2配置

生产环境最佳实践

环境区分策略

总结

热门内容推荐

最新内容推荐

项目优选

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

引言

Express框架基础

项目结构设计

核心配置实现

Express服务器实现

模板渲染优化

开发利器：Nodemon

配置与原理

开发工作流

生产环境部署：PM2

构建流程

PM2配置

生产环境最佳实践

环境区分策略

总结

相关内容推荐

热门内容推荐

最新内容推荐

项目优选