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

Posted 2022-12-03 YunusQ

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

• vue配置 使用nginx
• • • 进入conf目录配置nginx.conf文件
    • • 我这里使用的/api方式 对应下方vue配置中的env.js
      • 端口设置
• vue配置 对应nginx中proxy_pass设置的/api
• • • • env.js 配置proxy_pass
      • 对应使用 fetch.js
• 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端口
如图加入入站规则 新建规则加入即可