windows服务器nginx配置 使用proxy_pass windows server2008 配置vue与python后端 端口放行

vue配置 使用nginx

从官网下载nginx 放置在D盘或其他盘中 使用nginx1.18.0版本

进入conf目录配置nginx.conf文件

这里使用nginx的proxy_pass 代理
在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。

假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行访问。

第一种：
location /proxy/ {
proxy_pass http://127.0.0.1/;
}
代理到URL：http://127.0.0.1/test.html

第二种（相对于第一种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1;
}
代理到URL：http://127.0.0.1/proxy/test.html

第三种：
location /proxy/ {
proxy_pass http://127.0.0.1/aaa/;
}
代理到URL：http://127.0.0.1/aaa/test.html

我这里使用的/api方式 对应下方vue配置中的env.js

端口设置

我起了两个端口 80端口对应相应的页面 8082端口对应管理端 80端口映射到公网ip 8082对应私网访问

 server {
     
        listen       80;
        server_name  localhost1;

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

        location /api/ {
     
            proxy_pass   http://127.0.0.1:5001/; //你的后端端口号
        }
    }

    server {
     
        listen       8082;
        server_name  localhost2;

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

        location /api/ {
     
            proxy_pass   http://127.0.0.1:5001/; //你的后端端口号
        }
    }

vue配置 对应nginx中proxy_pass设置的/api

env.js 配置proxy_pass

/**
 * 配置编译环境和线上环境之间的切换
 *
 * baseUrl: 域名地址
 * routerMode: 路由模式
 * baseImgPath: 图片存放地址
 *
 */
let baseUrl = '';
let routerMode = 'hash';
let baseImgPath;

if (process.env.NODE_ENV === 'development') {
     
	baseUrl = 'http://127.0.0.1:5001';
}else{
     
    baseUrl = '/api';
}

export {
     
	baseUrl,
	routerMode,
	baseImgPath
}

对应使用 fetch.js

import {
      baseUrl } from './env'

export default async(url = '', data = {
     }, type = 'GET', method = 'fetch') => {
     
    type = type.toUpperCase();
    url = baseUrl + url;
    console.log(url);
    console.log(data);
    if (type === 'GET'||type === 'DELETE') {
     
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
     
            dataStr += key + '=' + data[key] + '&';
        });
        if (dataStr !== '') {
     
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
        console.log('url'+url);
    }
    // 对于支持fetch方法的浏览器，处理如下：
    if (window.fetch && method === 'fetch') {
     
        // console.log('fetch');
        let requestConfig;
        requestConfig = {
     
            // credentials: 'include',
            method: type,
            headers: {
     
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            mode: "cors",
            cache: "no-cache"
        };

        if (type === 'POST'||type==='PUT') {
     
            Object.defineProperty(requestConfig, 'body', {
     
                value: JSON.stringify(data)
            })
        }
        try {
     
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson
        } catch (error) {
     
            throw new Error(error)
        }
    }
    // 对于不支持fetch的浏览器，便自动使用 ajax + promise
    else {
     
        console.log('not fetch');
        return new Promise((resolve, reject) => {
     
            let requestObj;
            if (window.XMLHttpRequest) {
     
                requestObj = new XMLHttpRequest();
            } else {
     
                // requestObj = new ActiveXObject;
            }

            let sendData = '';
            if (type === 'POST'||type==='PUT') {
     
                sendData = JSON.stringify(data);
            }

            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);

            requestObj.onreadystatechange = () => {
     
                if (requestObj.readyState === 4) {
     
                    if (requestObj.status === 200||requestObj.status === 14) {
     
                        let obj = requestObj.response;
                        if (typeof obj !== 'object') {
     
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
     
                        reject(requestObj)
                    }
                }
            }
        })
    }
}

python后端编写与部署

逻辑编写这里不再复述 可以看我python后端的相关文章
由于windows服务器python不能像linux一样一直在后端运行，所以我这边直接命令行运行着了（稍有不妥）

python xxx.py

使用此命令运行即可

服务器端口放行

最后是要把windows的服务器 入站规则加上你nginx配置的端口 我这里是80端口和8082端口
如图加入入站规则 新建规则加入即可