多nginx配置_csdn masonyyp-优快云博客

本文链接：https://blog.youkuaiyun.com/make_progress/article/details/125249924

该博客详细介绍了如何在Docker环境下配置Nginx，实现前端Vue应用与后端Flask应用的通信。首先创建并运行Python Flask应用，然后设置Vue的devServer代理到Flask服务。接着，部署Nginx应用容器，并配置代理规则将请求转发到Flask。最后，创建一个公用Nginx容器作为代理，将80端口的请求转发到Flask应用的81端口。整个过程通过Docker容器管理和Nginx的代理设置确保了前后端的分离和通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现公用nginx代理应用nginx的前端和后端。

1 创建python应用

from flask import Flask
 
app = Flask(__name__)
 
@app.route("/task/login")
def login():
    return "Hello login"

@app.route("/task/register")
def register():
    return "Hello register"

启动flask

gunicorn -w 4 -b 0.0.0.0:5000 app:app

创建python容器

# 创建网桥
sudo docker network create --driver bridge mason

# 创建容器
sudo docker run -itd --name t_python \
--net mason \
-p 5000:5000 \
-v /home/myflask:/home/myflask \
python:3.8.2

2 前端代码

vue.config.js

// vue.config.js

module.exports = {
    outputDir: 'test',
    devServer:{
        proxy:{
            '/task':{
                target:'http://192.168.108.60:5000',
                changOrigin: true
            }
        }
    },
    publicPath: './' 
}

App.vue

<template>
  <div id="app">
    <div>
      <button v-on:click="getdata()">登录</button>
      <img v-bind:src="imgSrc" />
    </div>
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: 'app',

  data:function(){
    return{
      imgSrc: require("@/assets/logo.png")
    }
  },

  methods:{
    getdata: function(){
      axios.get("/task/login").then(res=>{
        console.log(res.data);
      });
    }
  }
}
</script>

<style>
</style>

3 创建应用nginx

sudo docker run -itd --name t_nginx \
--net mason \
-p 81:80 \
-v /home/nginx/task:/home/static \
nginx:1.20.0

配置应用nginx

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location /task/test {
    	alias /home/static/test;
    	index  index.html index.htm;
    }
    
    location /task/ {
        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_set_header X-Forwarded-Proto $scheme;
 
        proxy_connect_timeout 300;
        # Default is HTTP/1, keepalive is only enabled in HTTP/1.1
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        chunked_transfer_encoding off;
        
        # 设置代理
        proxy_pass http://192.168.108.60:5000/task/;
    }

    #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   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

4 创建公用nginx

sudo docker run -itd --name com_nginx \
--net mason \
-p 80:80 \
nginx:1.20.0

复制nginx

# 从docker中复制nginx配置文件
sudo docker cp com_nginx:/etc/nginx/conf.d/default.conf .

# 从将nginx配置文件复制到docker中
sudo docker cp default.conf com_nginx:/etc/nginx/conf.d/

配置nginx

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location /task/ {
        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_set_header X-Forwarded-Proto $scheme;
 
        proxy_connect_timeout 300;
        # Default is HTTP/1, keepalive is only enabled in HTTP/1.1
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        chunked_transfer_encoding off;
        
        # 设置代理
        proxy_pass http://192.168.108.60:81;
    }

    #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   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}