ins-vuevue

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

2018-08-01  本文已影响0人  youins

nginx概念

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

为什么选择nginx

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

命令

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

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

vue单项目nginx部署

cnpm run build
image image

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

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

vue多项目nginx部署

目的

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

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

客户端配置修改

添加如下内容:

<meta base="/lend/">

修改如下参数:

assetsPublicPath: '/lend/',
image

添加如下参数:

base: '/lend'
image 
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;
      }
    }

后端接口配置

部署案例

以滇黔桂燃气项目为例

    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.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;
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读