当前位置: 首页 > news >正文

在服务器上使用 Docker 部署 Node.js 后端服务和前端项目

一、准备工作

  1. 服务器环境

    • 安装 Docker 和 Docker Compose:
      # 安装 Docker
      curl -fsSL https://get.docker.com | sh
      systemctl start docker
      systemctl enable docker# 安装 Docker Compose
      sudo curl -L "https://github.com/docker/compose/releases/download/v2.23.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
      sudo chmod +x /usr/local/bin/docker-compose
      
  2. 项目结构

    /project
    ├── backend/            # Node.js 后端
    │   ├── Dockerfile
    │   ├── package.json
    │   └── src/
    ├── frontend/           # 前端项目
    │   ├── Dockerfile
    │   ├── package.json
    │   └── public/
    └── docker-compose.yml   # 编排文件
    

二、部署 Node.js 后端服务

1. 编写 Dockerfile
# backend/Dockerfile
FROM node:18-alpineWORKDIR /app
COPY package*.json ./
RUN npm installCOPY . .
EXPOSE 3000  # 根据实际端口修改CMD ["npm", "start"]  # 或 "node server.js"
2. 构建镜像
cd backend
docker build -t node-backend .
3. 验证运行
docker run -d -p 3000:3000 --name my-node-app node-backend

三、部署前端项目(以 React 为例)

1. 编写 Dockerfile
# frontend/Dockerfile
FROM node:18-alpine as builderWORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build  # 生成静态文件到 /app/dist# 使用 Nginx 托管
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
2. 构建镜像
cd frontend
docker build -t react-frontend .
3. 验证运行
docker run -d -p 80:80 --name my-react-app react-frontend

四、使用 Docker Compose 编排

1. 编写 docker-compose.yml
version: '3.8'
services:backend:build: ./backendports:- "3000:3000"environment:- NODE_ENV=productionrestart: unless-stoppedfrontend:build: ./frontendports:- "80:80"depends_on:- backendrestart: unless-stopped
2. 启动所有服务
docker-compose up -d  # 后台运行
3. 常用命令
docker-compose logs      # 查看日志
docker-compose down      # 停止服务
docker-compose restart   # 重启服务

五、进阶配置

1. 使用 .env 管理环境变量
  • docker-compose.yml 中引用:
    environment:- DB_HOST=${DB_HOST}
    
  • 创建 .env 文件:
    DB_HOST=mysql
    
2. 数据库服务(如 MySQL)
services:mysql:image: mysql:8.0environment:MYSQL_ROOT_PASSWORD: rootpassvolumes:- mysql_data:/var/lib/mysql
volumes:mysql_data:
3. Nginx 反向代理(可选)
server {listen 80;server_name your-domain.com;location /api {proxy_pass http://backend:3000;}location / {proxy_pass http://frontend;}
}

六、访问服务

  • 前端:http://服务器IP
  • 后端 API:http://服务器IP:3000/api

常见问题

  1. 端口冲突

    • 确保服务器防火墙开放端口(如 80、3000)。
  2. 文件权限问题

    • 在 Dockerfile 中添加用户权限管理:
      RUN chown -R node:node /app
      USER node
      
  3. 构建缓存优化

    • COPY package.jsonRUN npm install 提前,利用 Docker 缓存。

通过以上步骤,你可以快速在服务器上部署全栈项目。实际应用中,可根据需求扩展数据库、负载均衡等配置。

相关文章:

  • VScode使用npm启动项目以及npm install ,npm start报错问题处理
  • java使用aspose读取word里的图片
  • Word 文件转md文件 在 Word 中没有直接将文档另存为 Markdown(.md)格式的选项,但你可以使用一些工具或手动转换来实现
  • npm ERR! @biomejs/biome@1.9.4 postinstall: `node scripts/postinstall.js`
  • 解决npm install 一直卡着不动,npm install --verbose
  • Spring Cloud Gateway 动态路由实现方案
  • 怎样解决在ubuntu 22.04上QT: DataVisualization控件显示黑屏的问题
  • Doris集群安装部署
  • Rust 学习笔记:关于通过异步实现并发的练习题
  • 《C++初阶之类和对象》【类 + 类域 + 访问限定符 + 对象的大小 + this指针】
  • DEVICENET转MODBUS TCP网关连接DeviceNet数字远程IO模块配置案例
  • uniapp小程序不支持动态组件问题
  • 更进一步深入的研究ObRegisterCallBack
  • 【iSAQB软件架构】以架构为中心的开发方法
  • node-red的http-request组件调研三方接口请求参数为form-data解决方案
  • 基于算力魔方与PP-OCRv5的OpenVINO智能文档识别方案
  • 零基础RT-thread第一节:串口通信UART
  • 基于大模型预测的上睑下垂综合诊疗技术方案
  • Java大厂面试真题:谢飞机的技术挑战
  • 每日算法刷题Day29 6.12:leetcode二分答案4道题,用时1h10min
  • 个人网站备注/中国新闻社
  • 网站推广实践内容/百度网页游戏
  • 有哪些网站可以做设计挣钱/sem广告
  • gta5可用手机网站大全/常用的seo查询工具有哪些
  • 网络文化经营许可证办理流程/廊坊seo优化
  • 广东省建设交通委员会网站/seo短视频保密路线