怎么一台nginx做前端 多台后端用apache

实现：

1.修改nginx配置文件，将php动态请求转发给apache

# cat /usr/local/nginx/conf/vhosts/test.conf

server

{

listen 80

server_name www.test.com test.com

index index.html index.htm index.php default.html default.htm default.php

root /home/www/data/test

access_log /usr/local/nginx/logs/test-access.log

# nginx找不到文件时，转发请求给后端Apache

error_page 404 @proxy

# 这是原来lnmp时，nginx自己将php请求提交到127.0.0.1:9000。现在由apache来处理，因此注释掉这段。

#location ~ .*\.(php|php5)?$

#{

#fastcgi_pass 127.0.0.1:9000

#fastcgi_index index.php

#include fastcgi.conf

#}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires 30d

}

location ~ .*\.(js|css)?$

{

expires 12h

}

# 动态文件.php请求转发给后端Apache

location ~ \.php$ {

# 向后端服务器发起请求时添加指定的header头信息

proxy_set_header Host $http_host

# 向后端服务器发送真实 IP

proxy_set_header X-Real-IP $remote_addr

# 让后端如php能直接通过变量获取真实IP

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for

proxy_pass http://127.0.0.1:8080

}

# nginx找不到文件时，转发请求给后端Apache

location @proxy {

proxy_set_header Host $http_host

proxy_set_header X-Real-IP $remote_addr

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for

proxy_pass http://127.0.0.1:8080

}

}

然后只要开启nginx监听80端口，apache监听8080端口，开启php，就可以了。这边，我同时开启nginx，apache的访问日志。当我访问www.test.com/a.html,www.test.com/info.php时，nginx记录下了所有a.html,info.html的访问请求。

nginx访问日志

192.168.45.30 - - [19/Jun/2013:14:41:06 +0800] "GET /a.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:06 +0800] "GET /favicon.ico HTTP/1.1" 404 209 "-" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:08 +0800] "GET /info.php HTTP/1.1" 200 10518 "-" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:08 +0800] "GET /info.php?=PHPE9568F35-D428-11d2-A769-00AA001ACF42 HTTP/1.1" 200 2158 "http://www.test.com/info.php" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:08 +0800] "GET /info.php?=PHPE9568F34-D428-11d2-A769-00AA001ACF42 HTTP/1.1" 200 2536 "http://www.test.com/info.php" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:08 +0800] "GET /favicon.ico HTTP/1.1" 404 209 "-" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

192.168.45.30 - - [19/Jun/2013:14:41:09 +0800] "GET /info.php HTTP/1.1" 200 10518 "-" "Mozilla/5.0 (Windows NT 6.1WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

当我访问www.test.com/a.html,www.test.com/info.php时，apache只记录了info.html的访问请求。说明nginx将php请求转发给了apache。这里可以看到来源都是127.0.0.1。而不是真实的来源ip。

apache访问日志

127.0.0.1 - - [19/Jun/2013:11:04:16 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:04:23 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:04:31 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:04:34 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:04:39 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:05:09 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:05:18 +0800] "GET /favicon.ico HTTP/1.0" 404 209

127.0.0.1 - - [19/Jun/2013:11:05:24 +0800] "GET /info.php HTTP/1.0" 200 55447

127.0.0.1 - - [19/Jun/2013:11:05:24 +0800] "GET /info.php?=PHPE9568F34-D428-11d2-A769-00AA001ACF42 HTTP/1.0" 200 2524

127.0.0.1 - - [19/Jun/2013:11:05:24 +0800] "GET /info.php?=PHPE9568F35-D428-11d2-A769-00AA001ACF42 HTTP/1.0" 200 2146

127.0.0.1 - - [19/Jun/2013:11:05:24 +0800] "GET /favicon.ico HTTP/1.0" 404 209

2.apache添加mod_rpaf， 获取nginx转发过来的真实IP

mod_rpaf模块不是必须安装，除非你需要开启apache日志，但有多此一举之嫌，因为已经有nginx日志了，再开apache日志话就出现重复了。

Apache rpaf模块作用是获取Nginx转发过来的真实IP，否则在Apache日子中来访IP全部为127.0.0.1。

# wget http://stderr.net/apache/rpaf/download/mod_rpaf-0.6.tar.gz

# tar zxvf mod_rpaf-0.6.tar.gz

# cd mod_rpaf-0.6

# /usr/local/www/apache/bin/apxs -i -c -n mod_rpaf-2.0.so mod_rpaf-2.0.c

安装过程中，若出现error: 'conn_rec' has no member named 'remote_ip，请参考附录1.mod_rpaf-2.0.c error: 'conn_rec' has no member named 'remote_ip

# vim /usr/local/apache/conf/httpd.conf //在LoadModule后添加以下内容

LoadModule rpaf_module modules/mod_rpaf-2.0.so

RPAFenable On

RPAFproxy_ips 127.0.0.1

RPAFsethostname On

RPAFheader X-Forwarded-For

http://127.0.0.1/helloworld    第一个vue项目(不用修改配置直接build就可以)

http:// 127.0.0.1 /test02   第二个vue项目(需要修改)

1、首先在config文件夹内的index.js内修改(注意是build内)

build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    //nginx配置

    assetsPublicPath: '/test2/',

    /**

    * Source Maps

    */

    productionSourceMap: true,

    // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  }

}

2、这样确保生产出来的文件，在index.html中都是在student下。对index.html文件进行修改，添加base href="/test2/" >

<!DOCTYPE html>

<html>

<head>

    <!--新添加的-->

    <base href="/test2/" >

    <meta charset=utf-8>

    <meta name=viewport content="width=device-width,initial-scale=1">

    <title>test1</title>

    <link href=/test2/static/css/app.abcac001105f87ab0ad14b37d34bbe9c.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script type=text/javascript src=/test2/static/js/manifest.a96262ba9edf9a4c5761.js></script>

<script type=text/javascript src=/test2/static/js/vendor.a6129cab87d1dbebc84c.js></script>

<script type=text/javascript src=/test2/static/js/app.4694a2e388440c566511.js></script>

</body>

</html>

3、在src/router/index.js文件修改，添加 base: '/test2/'

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

  base:"/test2/",

  mode:"history",

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

user root

worker_processes  1  #nginx进程个数

#worker_cpu_affinity 1000 0100 0010 0001  #绑定worker进程到指定的CPU内核中

#error_log  logs/error.log

#error_log  logs/error.log  notice

#error_log  logs/error.log  info

#pid        logs/nginx.pid

events {

    worker_connections  1024  #worker进程的最大连接数是1024

}

http {

    #include      mime.types

    # include /etc/nginx/conf.d/*.conf

    default_type  application/octet-stream

    #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  logs/access.log  main

    sendfile        on

    #tcp_nopush    on

    #keepalive_timeout  0

    keepalive_timeout  65

    upstream rest{

    least_conn

    server 127.0.0.1:8000

    server 127.0.0.1:8001

}

    #gzip  on

    server {

        listen      80

        server_name  127.0.0.1

        #charset koi8-r

        #access_log  logs/host.access.log  main

        #vue第一个项目

      location / {

            root  /usr/local/nginx/projects/dist

            try_files $uri $uri/ @router

            index  index.html index.htm

        }

        #vue第二个项目

        location /test2 {

            alias /usr/local/nginx/projects/test2/

            try_files $uri $uri/ /test2/index.html

            index  index.html index.htm

        }

        location @router {

    rewrite ^.*$ /index.html last

}

#vue第一个项目后端接口

        location /api_a {

            #转发到后端uwsgi

                  proxy_pass http://127.0.0.1:5002

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  proxy_set_header X-Real-IP $remote_addr

                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for

                #                                                                   

        }

#vue第二个项目后端接口

        location /api_b {

            #转发到后端uwsgi

                  proxy_pass http://127.0.0.1:5003

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  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

        }

    }

}

---