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

    你可能感兴趣的文章
    npm安装教程
    查看>>
    npm报错Cannot find module ‘webpack‘ Require stack
    查看>>
    npm报错Failed at the node-sass@4.14.1 postinstall script
    查看>>
    npm报错fatal: Could not read from remote repository
    查看>>
    npm报错File to import not found or unreadable: @/assets/styles/global.scss.
    查看>>
    npm报错TypeError: this.getOptions is not a function
    查看>>
    npm报错unable to access ‘https://github.com/sohee-lee7/Squire.git/‘
    查看>>
    npm淘宝镜像过期npm ERR! request to https://registry.npm.taobao.org/vuex failed, reason: certificate has ex
    查看>>
    npm版本过高问题
    查看>>
    npm的“--force“和“--legacy-peer-deps“参数
    查看>>
    npm的安装和更新---npm工作笔记002
    查看>>
    npm的常用操作---npm工作笔记003
    查看>>
    npm的常用配置项---npm工作笔记004
    查看>>
    npm的问题:config global `--global`, `--local` are deprecated. Use `--location=global` instead 的解决办法
    查看>>
    npm编译报错You may need an additional loader to handle the result of these loaders
    查看>>
    npm设置淘宝镜像、升级等
    查看>>
    npm设置源地址,npm官方地址
    查看>>
    npm设置镜像如淘宝:http://npm.taobao.org/
    查看>>
    npm配置安装最新淘宝镜像,旧镜像会errror
    查看>>
    NPM酷库052:sax,按流解析XML
    查看>>