博客
关于我
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/

    你可能感兴趣的文章
    Openlayers中使用Cluster实现点位元素重合时动态聚合与取消聚合
    查看>>
    Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
    查看>>
    Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
    查看>>
    Openlayers中点击地图获取坐标并输出
    查看>>
    Openlayers中设置定时绘制和清理直线图层
    查看>>
    Openlayers图文版实战,vue项目从0到1做基础配置
    查看>>
    Openlayers实战:modifystart、modifyend互动示例
    查看>>
    Openlayers高级交互(10/20):绘制矩形,截取对应部分的地图并保存
    查看>>
    Openlayers高级交互(16/20):两个多边形的交集、差集、并集处理
    查看>>
    Openlayers高级交互(17/20):通过坐标显示多边形,计算出最大幅宽
    查看>>
    Openlayers高级交互(19/20): 地图上点击某处,列表中显示对应位置
    查看>>
    Openlayers高级交互(8/20):选取feature,平移feature
    查看>>
    openlayers:圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域
    查看>>
    OpenLDAP(2.4.3x)服务器搭建及配置说明
    查看>>
    OpenLDAP编译安装及配置
    查看>>
    OpenMCU(一):STM32F407 FreeRTOS移植
    查看>>
    OpenMCU(三):STM32F103 FreeRTOS移植
    查看>>
    OpenMCU(二):GD32E23xx FreeRTOS移植
    查看>>
    OpenMetadata 命令执行漏洞复现(CVE-2024-28255)
    查看>>
    OpenMMLab | S4模型详解:应对长序列建模的有效方法
    查看>>