博客
关于我
centos下docker +nginx完成负载均衡vue项目
阅读量:247 次
发布时间:2019-02-26

本文共 1776 字,大约阅读时间需要 5 分钟。

Vue与普通Web项目部署对比

Vue项目与普通Web项目在部署方式上有一些不同之处。普通Web项目通常通过在不同Tomcat下部署,然后通过Nginx进行负载均衡。而Vue项目则需要在Nginx中配置负载均衡,将多个Nginx服务用于负载均衡。


搭建步骤说明

  • 安装Docker环境

    首先确保宿主机已经安装了Docker。

    curl -fsSL https://get.docker.com | bash -s docker
  • 拉取Nginx镜像

    打开Docker终端,拉取Nginx镜像:

    docker pull nginx
  • 宿主机准备挂载目录

    创建挂载目录:

    mkdir -p /home/docker-nginx/{html,conf,conf.d,logs}
  • 配置Nginx

    • conf.d目录下创建default.conf文件:
    echo "server {      listen 80;      server_name your_domain.com;      location / {          root /usr/share/nginx/html;          index index.html;      }      access_log off;  }" > /home/docker-nginx/conf.d/default.conf
    • 将配置文件挂载到容器:
    docker run -d --name mynginx -p 39002:80 \      -v /home/docker-nginx/html:/usr/share/nginx/html \      -v /home/docker-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \      -v /home/docker-nginx/conf.d:/etc/nginx/conf.d \      -v /home/docker-nginx/logs:/var/log/nginx nginx
  • 部署前端项目

    将Vue项目打包后的dist文件夹复制到挂载目录/home/docker-nginx/html中即可。


  • 多Nginx负载均衡配置示例

    如果需要多个Nginx服务共享负载,可以在宿主机上运行多个容器,每个容器监听不同的端口。例如:

    • 容器1:
      docker run -d --name mynginx1 -p 39001:80 \      -v /home/docker-nginx/html:/usr/share/nginx/html \      -v /home/docker-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \      -v /home/docker-nginx/conf.d:/etc/nginx/conf.d \      -v /home/docker-nginx/logs:/var/log/nginx nginx
    • 容器2:
      docker run -d --name mynginx2 -p 39003:80 \      -v /home/docker-nginx/html:/usr/share/nginx/html \      -v /home/docker-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \      -v /home/docker-nginx/conf.d:/etc/nginx/conf.d \      -v /home/docker-nginx/logs:/var/log/nginx nginx

    测试访问

    • 访问主Nginx服务(39002端口):
      http://localhost:39002
    • 访问备用Nginx服务(39001或39003端口):
      http://localhost:39001http://localhost:39003

    注意事项

    • 确保挂载目录权限正确,避免权限错误。
    • 如果需要自定义域名,可以在Nginx配置中添加server_name指令。
    • 前端项目部署时,只需将dist文件夹复制到挂载目录即可,无需手动配置。

    转载地址:http://oxfk.baihongyu.com/

    你可能感兴趣的文章
    OpenCV与AI深度学习 | 如何使用YOLO-World做目标检测
    查看>>
    OpenCV与AI深度学习 | 如何使用YOLOv9分割图像中的对象
    查看>>
    OpenCV与AI深度学习 | 如何使用YOLOv9检测图片和视频中的目标
    查看>>
    OpenCV与AI深度学习 | 如何在 Docker 容器中使用 GPU
    查看>>
    OpenCV与AI深度学习 | 实战 | OpenCV中更稳更快的找圆方法--EdgeDrawing使用演示(详细步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | 实战 | OpenCV传统方法实现密集圆形分割与计数(详细步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | 实战 | OpenCV实现扫描文本矫正应用与实现详解(附源码)
    查看>>
    OpenCV与AI深度学习 | 实战 | YOLO11自定义数据集训练实现缺陷检测 (标注+训练+预测 保姆级教程)
    查看>>
    OpenCV与AI深度学习 | 实战 | YOLOv10模型微调检测肾结石并提高准确率
    查看>>
    OpenCV与AI深度学习 | 实战 | 使用OpenCV和Streamlit搭建虚拟化妆应用程序(附源码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 使用OpenCV确定对象的方向(附源码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 使用YOLOv8 Pose实现瑜伽姿势识别
    查看>>
    OpenCV与AI深度学习 | 实战 | 使用YoloV8实例分割识别猪的姿态(含数据集)
    查看>>
    OpenCV与AI深度学习 | 实战 | 使用姿态估计算法构建简单的健身训练辅助应用程序
    查看>>
    OpenCV与AI深度学习 | 实战 | 基于OpenCV和K-Means聚类实现颜色分割(步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 基于YoloV5和Mask RCNN实现汽车表面划痕检测(步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 基于YOLOv9+SAM实现动态目标检测和分割(步骤 + 代码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数(步骤 + 源码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 文本图片去水印--同时保持文本原始色彩(附源码)
    查看>>
    OpenCV与AI深度学习 | 实战 | 通过微调SegFormer改进车道检测效果(数据集 + 源码)
    查看>>