nginx反向代理多个单页面应用

nginx反向代理多个单页面应用

直接上配置文件

1.nginx.conf

user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    gzip on;
	gzip_disable "msie6";
	gzip_vary on;
	gzip_proxied any;
	gzip_comp_level 6;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
	gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    include /usr/local/nginx/conf/conf.d/*.conf;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 9001
       location /news/ {
         proxy_pass http://127.0.0.1:9001/;  ############# location 和 proxy_pass 最后都加 ' /' ###############
	     proxy_set_header  Host  $host;
	     proxy_set_header  X-Real-IP  $remote_addr;
	     proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	 }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }



}

2. /usr/local/nginx/conf/conf.d/news.conf

news.conf

server {
        listen       9001;
        server_name  localhost;

        location / {
            root   /usr/www/news;
            try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

3

项目用的vue.js，在打包时静态资源路径要改

config/build.js

...
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/news/', // 要改
...

项目中图片是放在了/static文件夹下，图片的src前要加上/news

<img src="/news/static/xx.png" />

项目中的路由都加上前缀，这样访问 http://xxxxx.xx/news 就能转到9001端口的页面