番外篇 vue与django 交互流程

news2024/12/24 11:35:49

学习了一段时间的django和vue，对于前后端开发有了一个初步的了解，这里记录一下编写的流程和思路，主要是为了后面如果遗忘从哪里开始操作做一个起步引导作用

一、Django后端

参考下前面django的文档https://moziang.blog.csdn.net/article/details/130720709

1、安装django环境

//配置清华镜像源
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip config set global.trusted-host pypi.tuna.tsinghua.edu.cn
 
//安装django
pip install django==4.2.1


//创建项目paas
django-admin startproject  PAAS


//登录PAAS目录
cd  PAAS


//创建应用
python manage.py startapp app_demo1
python manage.py startapp app_demo2

目录结构

2、项目添加应用模块

vi test1\PAAS\PAAS\settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_demo1',            #添加
    #'app_demo2'
]

ALLOWED_HOSTS = ['*']  #允许所有请求访问

在理想中我们需要维护一个大的平台项目，也就是paas平台，而app_demo1 和app_demo2 就是我们这个平台下负责某个功能的模块，这种模块可能有多个，为了区分他们不同模块对外提供的功能，我们首先要做的就是设置路由(urls)，app_demo2我这里演示不用，先注释了

3、添加主路由转发到模块路由

PAAS/PAAS/urls.py


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    #添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
    path("app1/",include("app_demo1.urls")),
    #path("app2/",include("app_demo2.urls"))
]

4、添加模块路由配置

上面是将主路由指定到了模块下的子路由，我们模块下默认是没有路由文件的需要手动创建，这里我们只演示一个模块下的路由案例，另一个可以先忽略了，操作都一样

PAAS/app_demo1/urls.py

from django.urls import path


urlpatterns = [
    #添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
    path("info/",函数方法,name="info"),

]



# 假设后端传递了路由名称为 "info" 到前端
#var url = "{% url 'info' %}";  
#在模板中使用Django模板标签获取路由URL
#然后在Vue.js中使用这个url
#例如：
#this.$router.push(url);  // 使用Vue Router进行页面跳转

在上面中的info 是请求接口的路径，当我们请求该接口的时候会去调用该函数，而name=info则是定义了info/这个路径的别名，当需要进行访问跳转时可以根据这个别名去快速访问，不需要考虑路径的问题，比如<a href="{% url 'info' %}">点击这里查看信息</a>

5、添加接口下函数功能

正常来说，我们django是只做后端的逻辑处理，将处理好的数据通过json格式的方法返回给请求方(前端)  然后根据前端的代码做逻辑判断后显示在页面上，现在我们想要对django的/app1/info/这个路径的请求，返回一个json数据。  而这些函数我们定义一个api的目录单独存放

#创建api目录
mkdir   api/

 PAAS/app_demo1/api/info.py

from django.http import JsonResponse

#这里的函数名称开头必须小写
def paasInfo(request):
    # 定义需要返回的数据
    data = {
        "status": "success",
        "message": "Data retrieved successfully",
        "data": {
            "user": {
                "id": 123,
                "username": "张三",
                "email": "123@qq.com"
            }
        }
    }

    #返回json类型数据
    return JsonResponse(ata)

6、补全模块路由配置

from django.urls import path

#通过.做相当路径导入，适用于包内导入
from .api import info

urlpatterns = [
    #添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
    path("info/",info.paasInfo,name="info"),

]

7、测试访问

现在我们的后端基础的格式就完成了，下面我们测试下访问是否能返回json数据

http://127.0.0.1:8000/app1/info

 

 这里可以看到我们已经可以通过访问后端的api接口获取一些数据了，具体的其他逻辑放到下面说，我们下面开始整前端程序

二、 Vue 前端

0、切换目录

#这里的目录是我们上面django的项目根目录
#我们将vue的项目目录和django的项目目录平级，方便迁移
cd C:\Users\Administrator\IdeaProjects\test1

1、安装环境

这块都是页面操作不重复编写，参考我下面的文档装下环境（完成步骤一即可）

​https://moziang.blog.csdn.net/article/details/134414702​

2、目录结构

3、测试访问

#ie浏览器会显示不出来，可以换edge
http://localhost:8080/

 4、添加vue工作目录

我现在想要创建多个页面，每个页面都有独立的功能，首先我们需要先区分开文件存放的位置，没有的目录手动创建下

src/components    #存放 Vue 组件文件的目录。

src/assets         #存放静态资源文件的目录，如图片、字体等。

src/views          #存放路由组件文件的目录，通常用于组织不同路由对应的页面组件。

src/api          #存放与后端 API 交互的文件

src/store        #存放 Vuex 相关的文件，用于状态管理。

src/router      #存放 Vue Router 相关的文件，用于配置路由。

 

5、安装路由插件

npm install -g vue-router

6、定义视图函数(view)

my-vue-app/src/views/index.vue

<template>
    <div>
        我是主页
    </div>
</template>

<script>
export default {
    name: "IndexView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

7、添加路由配置

my-vue-app/src/router/router.js

import { createRouter,createWebHistory } from 'vue-router' //引入路由插件函数

import  IndexView from '@/views/index.vue'   //引入被路由到的页面相关文件

//定义需要路由的组，可以定义多个 （基本都在改这个
const routes = [
    {
        path: '/',
        name: 'IndexView',  //这里是字符串哈
        component: IndexView
    },
]


// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

8、注册路由

my-vue-app/src/main.js

import { createApp } from 'vue'
import App from './App.vue'



const  app = createApp(App)
import router from './router/router'
app.use(router);  //注册路由

app.mount('#app')

9、清理app.vue 视图

// app.vue
<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "App",
}
</script>

<style>
/* 这里可以添加一些全局样式 */
</style>

10、切换目录启动项目

#切换到package.json所在的目录
cd C:\Users\Administrator\IdeaProjects\test1\my-vue-app>

#启动服务
npm run serve

11、访问页面 （IE浏览器打不开）

http://localhost:8081/

 说明：

上面从6-11步都是为了后续开发梳理一个大致的流程

步骤6中定义了单个页面的显示信息，

步骤7定义了我们具体通过访问那个路由来到达视图的位置

举个例子比如说我们现在想要加俩页面，访问/paas  和/log 两个路由到各自的页面

案例

和步骤6一样，先添加视图文件，直接复制改下页面

my-vue-app/src/views/paas.vue

<template>
    <div>
        paas
    </div>
</template>

<script>
export default {
    name: "PaasView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

 my-vue-app/src/views/log.vue

<template>
    <div>
        log
        
    </div>
</template>

<script>
export default {
    name: "LogView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

添加路由，和步骤7类似

my-vue-app/src/router/router.js 

import { createRouter,createWebHistory } from 'vue-router' //引入路由插件函数

import  IndexView from '@/views/index.vue'   //引入被路由到的页面相关文件
import PaasView from '@/views/paas.vue'
import LogView from "@/views/log.vue";

const routes = [
    {
        path: '/',
        name: 'IndexView',
        component: IndexView
    },
    // 新增路由
    {
        path: '/paas',
        name: 'PaasView',
        component: PaasView
    },

    {
        path: '/log',
        name: 'LogView',
        component: LogView
    },
]


// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

访问测试

http://localhost:8081/paas
http://localhost:8081/log

后续编写依此类推

12、定义前台主页文件

没怎么接触过前端，之前我想自己整个前端页面方便使用一些小工具来提升效率，但碰到这块的时候我确不清楚应该怎么去调用各个层级的路由（vue还没学到路由），所以我的方法是利用app.vue文件做一个主页面的显示，通过点击按钮跳转访问vue自身的不同路由

// app.vue
<template>
    <div>
        <router-view></router-view>
          <!--        添加html跳转路由-->
        <router-link to="/">主页</router-link>
        <router-link to="/paas">paas</router-link>
        <router-link to="/log">log</router-link>
    </div>
</template>

<script>
export default {
    name: "App",
}
</script>

<style>
/* 这里可以添加一些全局样式 */
</style>

 

通过上面的方法，我们可以从主页去手动访问各个视图的路由页面实现跳转，关于样式不着急用先放着，下面我们试着通过调用后端的api来请求和接收数据

13、vue调用后端接口

定义接口函数，在vue中通过按钮或者其他方法触发

my-vue-app/src/api/paasinfo.js

export function paasClusterInfo(method, params) {

    if (method === 'GET') {
        // 如果是GET请求，将参数拼接到URL上
        //url += '?' + new URLSearchParams(params).toString();
        return fetch('/app1/info/', {
            method: 'GET',  //可以是post请求 根据你后端逻辑判断即可
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok')
                }
                return response.json()
            });
    } else if (method === 'POST') {
        // 如果是POST请求，将参数放在请求体中
        return fetch('/app1/info/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok')
                }
                return response.json()
            });
    } else {
        throw new Error('Unsupported method')
    }
}

重新编辑paas视图，调用api函数将请求的数据打印到F12 开发工具页面

my-vue-app/src/views/paas.vue

<template>
    <div>
        paas
        <Button @click="getChange">按钮</Button>
    </div>
</template>

<script>
// 导入api
import { paasClusterInfo } from '@/api/paasinfo'

export default {
    name: "PaasView",
    methods: {
        async getChange() {
            console.log("输出个信息，证明函数执行了,再有报错就是下面请求的问题")
            try {
                const data = await paasClusterInfo('GET','action=list')  // 调用paasClusterInfo需要加上括号()
                console.log(data)
            } catch (error) {
                console.error("An error occurred:", error)
            }
        }
    }
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

vue在请求后端的时候会存在一些问题，比如跨域请求问题，需要单独进行配置

当做如下配置后，vue中发起的url请求，比如/app1 开头的请求会直接转发到下面的url中

my-vue-app/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      //环境内请求/app1的请求都转给下面的地址,需要重启
      '/app1': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
})

 修改完上面的文件，必须要重启 ，不重启无法生效

 

14、关于获取的数据显示

我们接口返回的数据格式如下，我们需要在前端页面上显示出来我们需要的值

{
    "status": "success",
    "message": "Data retrieved successfully",
    "data": {
        "user": {
            "id": 123,
            "username": "张三",
            "email": "123@qq.com"
        }
    }
}

console.log(data.status)
console.log(data.message)
console.log(data.data)

这个请求方法就是正常的json值的获取了

 

 关于数据显示就看前面vue的一些使用方法了，比如v-mode 映射数据上去 ，字典加循环之类的

三、vue 构建docker镜像

我们在打包的时候会分为两个部分

1、 nginx + vue

2、python  + Django(Gunicorn)

这两个镜像打包的时候也存在一些区别，nginx+vue 为了性能考虑是以nginx作为主进程运行而不是vue作为主进程，而python + django则是以django为主进程运行

1、vue项目上传linux服务器

我们在实际部署时，需要通过命令npm run build 将vue项目中的public 和src目录下的静态文件、vue文件、图片、字体、css、js等信息经过转换压缩后存放到dist目录下，然后将dist目录直接仍到nginx主页下进行访问，打包文件如下

但是如果我们每次都需要手动操作进行打包，并不利于我们后续做自动化CI/CD的使用，这里我们直接考虑使用一个分段构建的形式，登录linux创建构建目录

我们先将项目拷贝一份出来，将项目中的dist和mode_modules目录删除，这俩一个是打包目录，一个是项目依赖目录，依赖模块我们打包镜像的时候重新下载即可

 

#创建构建目录
mkdir /apps/web -p   
cd /apps/web   #直接将vue项目目录扔进去

2、编写dockerfile

#使用官方node镜像作为基础镜像
FROM node:14 as build-stage

#拷贝项目目录到镜像
COPY ./my-vue-app1 /home/my-vue-app1

#设置工作目录
WORKDIR /home/my-vue-app1

#添加加速源并安装依赖
RUN npm config set registry http://registry.npm.taobao.org/

#这块的3个RUN可以试着合并为一个RUN执行，我这边是跑的时候死活不能用 
#\ + && 一直报错就这样用了，另一台主机可以。 就很烦
RUN npm install

RUN npm run  build




# 使用 Nginx 镜像作为最终镜像
FROM nginx:1.21

# 将构建阶段生成的 dist 目录复制到 Nginx 的默认静态文件目录
COPY --from=build-stage /home/my-vue-app1/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 容器启动时运行 Nginx
CMD ["nginx", "-g", "daemon off;"]

3、构建镜像

docker build . -f Dockerfile  -t web-vue:v1

4、部署镜像

docker run -itd --name test1  -p 30030:80 docker.io/library/web-vue:v1

5、访问测试

http://linux服务器ip:30030/

看起来访问是正常的，但是当我们点击按钮访问后端django时还是有问题的

我们之前配置跨域访问的时候都是在同一台主机上所以直接用的localhost, 之前我们为什么要用则个代理，就是因为有个什么跨域访问的原因，但是我们现在已经将vue部署到了nginx上面，我们就可以把这块的配置去掉，让vue发起请求的时候访问自身，因为他是部署在nginx上的，他实际会访问到nginx，我们只需要在nginx上做反向代理，将vue访问自身的api相关的请求交给对应的服务器上即可，而后续我们修改请求地址就和vue无关，只需要根据请求接口变更代理地址即可

6、去除vue代理配置

vi /apps/web/my-vue-app1/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({



});

7、添加nginx反向代理配置

vi /apps/web/default.conf

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 /app1/ {
        proxy_pass $VUE_APP_API_BASE_URL;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

8、重新构建镜像

vi Dockerfile

#使用官方node镜像作为基础镜像
FROM node:14 as build-stage

#拷贝项目目录到镜像
COPY ./my-vue-app1 /home/my-vue-app1

#设置工作目录
WORKDIR /home/my-vue-app1

#添加加速源并安装依赖
RUN npm config set registry http://registry.npm.taobao.org/

#这块的3个RUN可以试着合并为一个RUN执行，我这边是跑的时候死活不能用
#\ + && 一直报错就这样用了，另一台主机可以。 就很烦
RUN npm install

RUN npm run  build




# 使用 Nginx 镜像作为最终镜像
FROM nginx:1.21

# 将构建阶段生成的 dist 目录复制到 Nginx 的默认静态文件目录
COPY --from=build-stage /home/my-vue-app1/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 拷贝配置文件
COPY ./default.conf /etc/nginx/conf.d/
# 容器启动时运行 Nginx
CMD ["nginx", "-g", "daemon off;"]

重新构建

docker build . -f Dockerfile  -t web-vue:v1

部署

docker rm -f test1
docker run -itd --name test1  -p 30030:80   docker.io/library/web-vue:v1

9、访问nginx 调用后端接口

图里的报错说明我们请求已经能正常发送了，没有出现跨域报错，没有404，报错信息是返回的数据不是一个json格式，说明我们目前位置请求是正确的，关于那个nginx的配置文件的变量可以通过挂载的形式来调整，就不在动镜像了 ，开始做django后端镜像

（上面那个地址案例不太好，后面找个好看的案例贴上去 溜了溜了）

四、django镜像构建

 django 部分参考之前文章 https://moziang.blog.csdn.net/article/details/134195331

 架构子系统协同分析

1、nginx  
   #Nginx 运行起来是多个进程, 接收从客户端（通常是浏览器或者手机APP）发过来的请求
   #它会根据请求的URL进行判断, 如果请求的是静态资源, 比如HTML文档、图片等
   #它直接从配置的路径进行读取, 返回内容给客户端
   #如果请求的是动态数据, 则转发给Gunicorn+Django进行处理
 
 
2、Gunicorn/Django
    #Gunicorn和Django是运行在同一个 Python进程里面的, 它们都是用Python代码写的程序。
    #启动Gunicorn的时候,它会根据配置加载Django的入口模块,这个入口模块里面提供了WSGI接口。
    #当Gunicorn接收到Nginx转发的HTTP请求后, 就会调用Django的WSGI入口函数,将请求给Django进行处理
    #Django框架再根据请求的URL和我们项目配置的URL路由表,找到我们编写的对应的消息处理函数进行处理。
    #我们编写的消息处理函数，就是前面章节大家学习到的，处理前端请求。如果需要读写数据库，就从MySQL数据库读写数据。

1、添加项目权限及导入Gunicorn 功能

PAAS/PAAS/settings.py

#添加导入应用
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_demo1',           
    'gunicorn',           #新增
    #'app_demo2'
]
 
 

DEBUG = False   #改成False

2、拷贝项目目录

3、删除拷贝项目中数据库配置

PAAS1/app_demo1/migrations     将目录下除init以外的都删掉，这个是django生成的数据库相关文件，如果不删除带到其他环境可能会因为同步数据库结构发生意料之外的问题

4、修改数据库变量

我们在不同环境中使用django的都需要配置对应环境的数据库，默认配置如下

 PAAS/PAAS/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

我们用django去链接mysql数据库，正常情况配置如下

PAAS/PAAS/settings.py 

DATABASES = {
    'default':
        {
            'ENGINE': 'django.db.backends.mysql',    # 数据库引擎
            'NAME': 'paas', # 数据库名称
            'HOST': '101.43.156.78', # 数据库地址
            'PORT': 30013, # 端口
            'USER': 'root',  # 数据库用户名
            'PASSWORD': '123456', # 数据库密码
        }
}

为了方便我们构建镜像后在不同环境获取数据库的值，做一下改造 通过获取变量来配置数据库，同时给一个默认值

 PAAS/PAAS/settings.py

import os
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': os.environ.get('DB_NAME', 'paas'),
        'HOST': os.environ.get('DB_HOST', '101.43.156.78'),
        'PORT': int(os.environ.get('DB_PORT', 30013)),
        'USER': os.environ.get('DB_USER', 'root'),
        'PASSWORD': os.environ.get('DB_PASSWORD', '123456'),
    }
}

为了使用数据库，我们还需要另外装一些的东西

pip3 install pymysql
pip3 install cryptography

PAAS1/PAAS/__init__.py

import pymysql
pymysql.install_as_MySQLdb()

5、添加Gunicorn启动配置文件

PAAS1/gunicorn_conf.py

# gunicorn/django  服务监听地址、端口
bind = '0.0.0.0:8000'
 
# gunicorn worker 进程个数，建议为： CPU核心个数 * 2 + 1
workers =  3 
 
# gunicorn worker 类型， 使用异步的event类型IO效率比较高
worker_class =  "gevent"  
 
# 日志文件路径
#errorlog = "/home/gunicorn.log"
errorlog = "-"
loglevel = "info"
 
import sys,os
 
cwd = os.getcwd()
sys.path.append(cwd)

6、添加镜像启动脚本

vi PAAS1/main.sh

#!/bin/bash
DIR="$( cd "$( dirname "$0" )" && pwd )"
echo $DIR
 
cd $DIR
 
# ulimit -n 50000
#这里就是指定一下我们定义的配置文件
#PAAS.wsgi  就是我们这个项目的项目名称+ .wsgi就行
gunicorn --config=$DIR/gunicorn_conf.py PAAS.wsgi 
 
#后台运行用下面这个
#nohup gunicorn --config=$DIR/gunicorn_conf.py Django_demo.wsgi &> /dev/null &

7、导出项目所需依赖

#切换paas项目目录
cd C:\Users\Administrator\IdeaProjects\test1\PAAS1

#导出依赖
pip freeze > requirements.txt

8、添加额外库

vi requirements.txt

#添加
Gunicorn
gevent
greenlet 
os  #给那个data获取变量用的

说明

Gunicorn 是一个 Python WSGI HTTP 服务器，用于运行 Python Web 应用程序。它可以处理并发请求，提供了稳定、快速的性能，适合用于部署生产环境的 Web 应用。
 

gevent 是一个基于 libev 的并发库，它提供了协程和事件循环的机制，可以用于高性能的网络应用程序。gevent 可以在 Python 中实现异步 I/O，通过协程实现并发处理，从而提高网络应用程序的性能和吞吐量。
 

greenlet 是 gevent 的底层实现，它提供了轻量级的协程机制，允许在 Python 程序中实现协作式多任务处理。gevent 是基于 greenlet 实现的，它提供了更高级的接口和功能，使得在 Python 中实现高性能的并发处理变得更加容易

9、创建app项目目录

mkdir /apps/app

#将PAAS1 项目仍进去

10、编写dockerfile

FROM python:3
#这里导入的时候换下目录名称，因为项目本身还是PAAS
COPY  ./PAAS1 /home/PAAS/
WORKDIR /home/PAAS/

RUN python3 -m pip config set global.index-url  https://pypi.douban.com/simple/ \
    && python3 -m pip config set global.trusted-host pypi.douban.com \
    && pip3 install -r requirements.txt \
    && chmod +x main.sh

CMD ["./main.sh"]

构建

docker build . -f Dockerfile -t test-app:v1

部署

#不带数据库变量（不带就用默认变量）
docker run -itd --name test2 -p 30031:8000    docker.io/library/test-app:v1


#带数据库信息启动
docker run -itd --name test2 -e DB_NAME=mydb -e DB_HOST=192.168.1.100 -e DB_PASSWORD=strongpassword   docker.io/library/test-app:v1

11、查看日志是否报错

docker logs test2

返回

/home/PAAS
[2024-02-02 03:05:44 +0000] [9] [INFO] Starting gunicorn 21.2.0
[2024-02-02 03:05:44 +0000] [9] [INFO] Listening at: http://0.0.0.0:8000 (9)
[2024-02-02 03:05:44 +0000] [9] [INFO] Using worker: gevent
[2024-02-02 03:05:44 +0000] [10] [INFO] Booting worker with pid: 10
[2024-02-02 03:05:44 +0000] [11] [INFO] Booting worker with pid: 11
[2024-02-02 03:05:44 +0000] [12] [INFO] Booting worker with pid: 12

写这块的时候比较忙，本来想演示的时候把数据库配置带上但忘记没做数据库相关的配置，上面有部分是后改的没有验，不确定是否有漏写的配置，有大兄弟做到这块了日志有报错私信发我下，会看

12、访问测试

http://服务器ip:30031/app1/info/

13、指定web容器nginx代理到django

cd /apps/web

vi default.conf

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 /app1/ {
        proxy_pass 127.0.0.1:30031;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

重构镜像

docker build . -f Dockerfile  -t web-vue:v1



docker rm -f test1
docker run -itd --name test1  -p 30030:80   docker.io/library/web-vue:v1

14、验证从vue访问后通过nginx代理到django

#访问vue
http://101.43.156.78:30030

可以看到我们基本已经可以实现前后端容器的访问了，但是还是存在一些问题

nginx代理地址需要我们手动配置，我们更希望通过一种域名的方法去访问，但在实际环境中我申请个域名访问太费劲了，如果我自己个人使用的，那么直接使用docker network 创建一个网络，然后nginx通过容器name就可以实现访问，但这并不适用于较大的环境，处于考虑我们还是使用docker容器的编排部署工具K8S

五、服务上云（需先部署K8S环境）

环境搭建参考下前面的搭建文档 https://moziang.blog.csdn.net/article/details/132618086


 

六、服务注册ETCD + HA 对外提供访问

参考文档Haproxy+etcd+confd+Docker搭建节点自动发现的高可用负载均衡框架-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1429474.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Web实战丨基于django+hitcount的网页计数器

Web实战丨基于django+hitcount的网页计数器

文章目录 写在前面Django简介主要程序运行结果系列文章写在后面 写在前面 本期内容 基于djangohitcount的网页计数器 所需环境 pythonpycharm或vscodedjango 下载地址 https://download.csdn.net/download/m0_68111267/88795611 Django简介 Django 是一个开源的、基于 …
阅读更多...
六、Nacos源码系列：Nacos健康检查

六、Nacos源码系列：Nacos健康检查

目录 一、简介 二、健康检查流程 2.1、健康检查 2.2、客户端释放连接事件 2.3、客户端断开连接事件 2.4、小结 2.5、总结图 三、服务剔除 一、简介 Nacos作为注册中心不止提供了服务注册和服务发现的功能&#xff0c;还提供了服务可用性检测的功能&#xff0c;在Nacos…
阅读更多...
【QT+QGIS跨平台编译】之二十二：【FontConfig+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

【QT+QGIS跨平台编译】之二十二：【FontConfig+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

文章目录 一、FontConfig介绍二、文件下载三、文件分析四、pro文件五、编译实践 一、FontConfig介绍 FontConfig 是一个用于配置和定制字体的库&#xff0c;广泛应用于基于X Window系统的操作系统中&#xff0c;尤其是在Linux和Unix-like系统中。它为应用程序提供了一种统一的…
阅读更多...
在VM虚拟机搭建NFS服务器

在VM虚拟机搭建NFS服务器

NFS共享要求如下&#xff1a; &#xff08;1&#xff09;共享“/mnt/自已姓名的完整汉语拼音”目录&#xff0c;允许XXX网段的计算机访问该共享目录&#xff0c;可进行读写操作。&#xff08;说明&#xff1a;XXX网段&#xff0c;请根据你的规划&#xff0c;再具体指定&#xf…
阅读更多...
2024美赛数学建模B题思路分析 - 搜索潜水器

2024美赛数学建模B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…
阅读更多...
STM32F1 - 存储器映射

STM32F1 - 存储器映射

Memory mapping 1> 外设内存地址映射2> GPIO寄存器映射3> 存储器访问 1> 外设内存地址映射 1> STM32F103ZET6的地址线位宽为32位&#xff0c;所以寻址空间为4GB &#xff08;2 ^ 32 4GB&#xff09;&#xff1b; 2> STM32将&#xff0c;Flash&#xff0c;SR…
阅读更多...
数仓建模维度建模理论知识

数仓建模维度建模理论知识

0. 思维导图 第 1 章 数据仓库概述 1.1 数据仓库概述 数据仓库是一个为数据分析而设计的企业级数据管理系统。数据仓库可集中、整合多个信息源的大量数据&#xff0c;借助数据仓库的分析能力&#xff0c;企业可从数据中获得宝贵的信息进而改进决策。同时&#xff0c;随着时间的…
阅读更多...
【经典项目】Java小游戏 —— 弹力球

【经典项目】Java小游戏 —— 弹力球

一、功能需求 设计一个Java弹球小游戏的思路如下&#xff1a; 创建游戏窗口&#xff1a;使用Java图形库&#xff08;如Swing或JavaFX&#xff09;创建一个窗口&#xff0c;作为游戏的可视化界面。 绘制游戏界面&#xff1a;在游戏窗口中绘制游戏所需的各个元素&#xff0c;包括…
阅读更多...
同城外卖跑腿app开发：重新定义城市生活

同城外卖跑腿app开发：重新定义城市生活

随着科技的发展和人们生活节奏的加快&#xff0c;同城外卖跑腿app应运而生&#xff0c;成为现代城市生活中的重要组成部分。本文将探讨同城外卖跑腿app开发的意义、市场需求、功能特点以及未来的发展趋势。 一、同城外卖跑腿app开发的意义 同城外卖跑腿app作为一种便捷的生活…
阅读更多...
Visual Studio 2022 查看类关系图

Visual Studio 2022 查看类关系图

这里写自定义目录标题 右键要查看的项目 -“查看”-“查看类图”效果展示&#xff1a; 原文地址 www.cnblogs.com 步骤1&#xff1a;勾选扩展开发 步骤2: 勾选类设计器 右键要查看的项目 -“查看”-“查看类图” 效果展示&#xff1a;
阅读更多...
使用 WebSocket 发送二进制数据：最佳实践

使用 WebSocket 发送二进制数据：最佳实践

WebSocket 技术提供了一种在客户端和服务器间建立持久连接的方法&#xff0c;使得双方可以在打开连接后随时发送数据&#xff0c;而不必担心建立复杂的持久连接机制。同时&#xff0c;使用二进制数据&#xff0c;如ArrayBuffer&#xff0c;可以更有效率地传送图像、声音等信息。…
阅读更多...
MySQL知识点总结（四）——MVCC

MySQL知识点总结（四）——MVCC

MySQL知识点总结&#xff08;四&#xff09;——MVCC 三个隐式字段row_idtrx_idroll_pointer undo logread viewMVCC与隔离级别的关系快照读和当前读 MVCC全称是Multi Version Concurrency Control&#xff0c;也就是多版本并发控制。它的作用是提高事务的并发度&#xff0c;通…
阅读更多...
西瓜书学习笔记——主成分分析（公式推导+举例应用）

西瓜书学习笔记——主成分分析（公式推导+举例应用）

文章目录 算法介绍实验分析 算法介绍 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种常用的降维技术&#xff0c;用于在高维数据中发现最重要的特征或主成分。PCA的目标是通过线性变换将原始数据转换成一组新的特征&#xff0c;这些新…
阅读更多...
web前端--------渐变和过渡

web前端--------渐变和过渡

线性渐变&#xff0c;是指颜色沿一条直线进行渐变&#xff0c;例如从上到下、从左到右。 当然&#xff0c;CSS中也支持使用角度来设置渐变的方向&#xff0c;角度单位为deg。 0deg&#xff0c;为12点钟方向&#xff0c;表示从下到上渐变。 90deg&#xff0c;为3点钟方向&…
阅读更多...
C++ | 部分和函数partial_sum的使用技巧

C++ | 部分和函数partial_sum的使用技巧

如果你需要处理一个数组的前缀和&#xff0c;或者数组中某一段元素的前缀和&#xff0c;你会怎么做呢&#xff1f; partial_sum函数是STL中的函数&#xff0c;用于计算范围的部分和&#xff0c;并从结果开始分配范围中的每个元素&#xff0c;range[first,last)中相应元素的部分…
阅读更多...
nest.js实现登录验证码功能(学习笔记)

nest.js实现登录验证码功能(学习笔记)

安装express-session npm i express-session 引入 注册session import * as session from express-session;import { NestFactory } from nestjs/core; import {DocumentBuilder,SwaggerModule, } from nestjs/swagger;import { AppModule } from ./app.module;async functio…
阅读更多...
（五）springboot 配置多数据源连接mysql和hive

（五）springboot 配置多数据源连接mysql和hive

项目结构如下 mysql 执行如下建表语句&#xff0c;并插入一条测试数据 1 2 3 4 5 CREATE TABLE user ( id int(11) NOT NULL, name varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_ge…
阅读更多...
计算机服务器中了DevicData勒索病毒如何解密，DevicData勒索病毒解密流程

计算机服务器中了DevicData勒索病毒如何解密，DevicData勒索病毒解密流程

网络数据安全一直是企业关心的主要话题&#xff0c;近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了DevicData勒索病毒攻击&#xff0c;导致企业计算机服务器瘫痪无法正常工作&#xff0c;严重影响了工作业务开展。经过云天数据恢复中…
阅读更多...
【C语言】大小写字母的相互转化：多种方法解析及原理说明

【C语言】大小写字母的相互转化：多种方法解析及原理说明

在 C 语言编程中&#xff0c;我们经常需要进行大小写字母的相互转化。这种转化可以用于实现字符串的大小写转换、字符的大小写比较等操作。本篇博客将介绍多种方法来实现大小写字母的相互转化&#xff0c;并说明其原理和使用场景。 目录 方法一&#xff1a;标准库函数 方法二…
阅读更多...
C# Onnx yolov8 水表读数检测

C# Onnx yolov8 水表读数检测

目录 效果 模型信息 项目 代码 训练数据 下载 C# Onnx yolov8 水表读数检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-01-31T10:18:10.141465 author&#xff1a;Ultralytics task&#xff1a;detect license&#xff1a;AGPL-…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023