Vue项目发布与部署--应用打包与部署篇

nginx概念

nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理.

• HTTP基础功能:

  • 处理静态文件，索引文件以及自动索引；
  • 反向代理加速(无缓存)，简单的负载均衡和容错；
  • FastCGI，简单的负载均衡和容错；
  • 模块化的结构。过滤器包括gzipping, byte ranges, chunked responses, 以及 SSI-filter 。在SSI过滤器中，到同一个 proxy 或者 FastCGI 的多个子请求并发处理；
  • SSL 和 TLS SNI 支持；

• IMAP/POP3 代理服务功能:

  • 使用外部 HTTP 认证服务器重定向用户到 IMAP/POP3 后端；
  • 使用外部 HTTP 认证服务器认证用户后连接重定向到内部的 SMTP 后端；
  • POP3: POP3 USER/PASS, APOP, AUTH LOGIN PLAIN CRAM-MD5;
  • IMAP: IMAP LOGIN;
  • SMTP: AUTH LOGIN PLAIN CRAM-MD5;
  • SSL 支持；
  • 在 IMAP 和 POP3 模式下的 STARTTLS 和 STLS 支持；

• 支持的操作系统:

  • FreeBSD 3.x, 4.x, 5.x, 6.x i386; FreeBSD 5.x, 6.x amd64;
  • Linux 2.2, 2.4, 2.6 i386; Linux 2.6 amd64;
  • Solaris 8 i386; Solaris 9 i386 and sun4u; Solaris 10 i386;
  • MacOS X (10.4) PPC;

• 结构与扩展:

  • 一个主进程和多个工作进程。工作进程是单线程的，且不需要特殊授权即可运行；
  • kqueue (FreeBSD 4.1+), epoll (Linux 2.6+), rt signals (Linux 2.2.19+), /dev/poll (Solaris 7 11/99+), select, 以及 poll 支持；
  • kqueue支持的不同功能包括 EV_CLEAR, EV_DISABLE （临时禁止事件）， NOTE_LOWAT, EV_EOF, 有效数据的数目，错误代码；
  • sendfile (FreeBSD 3.1+), sendfile (Linux 2.2+), sendfile64 (Linux 2.4.21+), 和 sendfilev (Solaris 8 7/01+) 支持；
  • 输入过滤 (FreeBSD 4.1+) 以及 TCP_DEFER_ACCEPT (Linux 2.4+) 支持；
  • 10,000 非活动的 HTTP keep-alive 连接仅需要 2.5M 内存。
  • 最小化的数据拷贝操作；

• 其他HTTP功能:

  • 基于IP 和名称的虚拟主机服务；
  • Memcached 的 GET 接口；
  • 支持 keep-alive 和管道连接；
  • 灵活简单的配置；
  • 重新配置和在线升级而无须中断客户的工作进程；
  • 可定制的访问日志，日志写入缓存，以及快捷的日志回卷；
  • 4xx-5xx 错误代码重定向；
  • 基于 PCRE 的 rewrite 重写模块；
  • 基于客户端 IP 地址和 HTTP 基本认证的访问控制；
  • PUT, DELETE, 和 MKCOL 方法；
  • 支持 FLV （Flash 视频）；
  • 带宽限制；

为什么选择nginx

Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性:

• 作为 Web 服务器：相比 Apache，Nginx 使用更少的资源，支持更多的并发连接，体现更高的效率，这点使 Nginx 尤其受到虚拟主机提供商的欢迎。能够支持高达 50,000 个并发连接数的响应，感谢 Nginx 为我们选择了 epoll and kqueue 作为开发模型.

• 作为负载均衡服务器：Nginx 既可以在内部直接支持 Rails 和 PHP，也可以支持作为 HTTP代理服务器 对外进行服务。Nginx 用 C 编写, 不论是系统资源开销还是 CPU 使用效率都比 Perlbal 要好的多。

• 作为邮件代理服务器: Nginx 同时也是一个非常优秀的邮件代理服务器（最早开发这个产品的目的之一也是作为邮件代理服务器），Last.fm 描述了成功并且美妙的使用经验。

• Nginx 安装非常的简单，配置文件 非常简洁（还能够支持perl语法），Bugs非常少的服务器: Nginx 启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够在 不间断服务的情况下进行软件版本的升级。

命令

nginx -s reload|reopen|stop|quit  #重新加载配置|重启|停止|退出 nginx
nginx -t   #测试配置是否有语法错误

nginx [-?hvVtq] [-s signal] [-c filename] [-p prefix] [-g directives]

• -?,-h : 打开帮助信息
• -v : 显示版本信息并退出
• -V : 显示版本和配置选项信息，然后退出
• -t : 检测配置文件是否有语法错误，然后退出
• -q : 在检测配置文件期间屏蔽非错误信息
• -s signal : 给一个 nginx 主进程发送信号：stop（停止）, quit（退出）, reopen（重启）, reload（重新加载配置文件）
• -p prefix : 设置前缀路径（默认是：/usr/local/Cellar/nginx/1.2.6/）
• -c filename : 设置配置文件（默认是：/usr/local/etc/nginx/nginx.conf）
• -g directives : 设置配置文件外的全局指令

vue单项目nginx部署

• 执行

cnpm run build

image

• 查看成果物

image

• 部署到nginx

需要在配置中需要部署的server下面将root设置为打包文件放置的目录即可,至于后端接口的配置,在下面进行介绍

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  www.ynzshrq.cn;
        root         /opt/wx_front;
    
    # 其他默认参数省略
    }

vue多项目nginx部署

目的

实现服务端同一域名下部署多个vue项目。

假如同一域名下面有三个vue项目

• kefu项目: https://www.test.com/kefu/...
• collect项目: https://www.test.com/collect/...
• lend项目: https://www.test.com/lend/...

客户端配置修改

• index.html文件修改

添加如下内容:

<meta base="/lend/">

• config/index.js文件修改

修改如下参数:

assetsPublicPath: '/lend/',

image

• ./src/router/index.js文件修改

添加如下参数:

base: '/lend'

image

• nginx.conf配置

server {
      listen 9900;
      server_name localhost;
      root /usr/var/html/test;
      location /kefu {
        try_files $uri $uri/ /kefu/index.html;
      }
      location /collect {
        try_files $uri $uri/ /collect/index.html;
      }
      location /lend {
        try_files $uri $uri/ /lend/index.html;
      }
    }

后端接口配置

部署案例

以滇黔桂燃气项目为例

• 开发环境下node.js网络接口代理配置

    proxyTable: {
      '/gas_order': {
        target: 'http://182.151.1.123:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_order': '/'
        }
      },
      '/gas_user': {
        target: 'http://182.151.1.123:4000/app_account/',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_user': '/'
        }
      },
      '/gas_address': {
        target: 'http://182.151.1.123:4000/app_address/',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_address': '/'
        }
      },
      '/gas_auth': {
        target: 'http://182.151.1.123:4000/app_auth/',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_auth': '/'
        }
      },
      '/gas_call_center': {
        target: 'http://182.151.1.123:9999/dqgGas-rest/',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_call_center': '/'
        }
      },
      '/gas_wx': {
        target: 'http://182.151.1.123:9090/',
        changeOrigin: true,
        pathRewrite: {
          '^/gas_wx': '/'
        }
      }
    }

• 生产环境下nginx网络接口代理配置

# nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
    multi_accept on;
    use epoll;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    client_max_body_size 200m;

   gzip on;
   gzip_static on;
   gzip_comp_level 5;
   gzip_types text/plain image/jpg image/png application/x-javascript text/css application/xml text/javascript application/javascript application/json;


    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  www.ynzshrq.cn;
        root         /opt/wx_front;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;


        location / {
            if ($request_method ~ ^(POST)$) {
                proxy_pass https://www.ynzshrq.cn$request_uri;
                break;
            }
            return 301 https://www.ynzshrq.cn$request_uri;
            try_files $uri $uri @router;
            index index.html;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }

        location /gas_order {
            proxy_pass http://127.0.0.1:5000;
            rewrite '^/gas_order/(.*)' /$1 break;
        }

        location /gas_user {
            proxy_pass http://127.0.0.1:4000/app_account;
            rewrite '^/gas_user/(.*)' /app_account/$1 break;
        }

        location /gas_address {
            proxy_pass http://127.0.0.1:4000/app_address;
            rewrite '^/gas_address/(.*)' /app_address/$1 break;
        }

        location /gas_auth {
            proxy_pass http://127.0.0.1:4000/app_auth;
            rewrite '^/gas_auth/(.*)' /app_auth/$1 break;
        }


        location /gas_wx {
            proxy_pass http://127.0.0.1:9090/;
            rewrite '^/gas_wx/(.*)' /$1 break;
        }


        location /gas_call_center {
            proxy_pass http://127.0.0.1:9999;
            rewrite '^/gas_call_center/(.*)' /dqgGas-rest/$1 break;
        }


        location /wechat_service {
            proxy_pass http://127.0.0.1:9090;
            rewrite '^/wechat_service/(.*)' /$1 break;
        }

       location /storage/ {
            fastcgi_pass 127.0.0.1:19090;
            include fastcgi_params;
            rewrite '^/storage/(.*)' /$1 break;
        }
    }
}