实现公用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;
#}
}
5 截图
公用80端口成功代理
应用nginx代理