Apache部署Django+vue记录

最新推荐文章于 2022-11-22 21:48:20 发布

原创最新推荐文章于 2022-11-22 21:48:20 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#django #vue.js #apache

Python 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何将Vue前端与Django后端部署到Apache服务器的过程。包括端口设置、Python环境配置、虚拟站点配置及Vue静态文件部署等内容，并记录了解决加载异常、跨域等问题的方法。

前言

业务需要，选定 Vue+Django 搭建了个数据管理平台。功能开发完成后，正式部署上线。由于历史遗留，选择部署至Apache服务器。

前端Vue 端口设置8080
后端Django 端口设置8081

一、Apache参数设置

参数文件 Apache/conf/httpd.conf**

1.端口设置

开启端口监听（66行左右）

	Listen 8080
	Listen 8081

Server端口开启

	ServerName localhost:8080
	ServerName localhost:8081

2.Python环境及项目路径

配置python路径及工程django关联模块

	LoadFile "c:/python37/python37.dll"
	LoadModule wsgi_module "c:/python37/lib/site-packages/mod_wsgi/server/mod_wsgi.cp37-win32.pyd"
	WSGIPythonHome "c:/python37"

指向项目路径

	WSGIPythonPath "K:/Frontend-Tools/01_Product_Dev_Aux_Tools/20200811_CapabilitiesSetWeb/Trunk/FrontendCapSite

3.Django虚拟站点

<VirtualHost *:8081 >
    ServerAdmin example@company.com
	WSGIScriptAlias / K:/FrontendTools/01_Product_Dev_Aux_Tools/Trunk/FrontendCapSite/FrontendCapSite/wsgi.py
    DocumentRoot K:/Frontend-Tools/01_Product_Dev_Aux_Tools/Trunk/FrontendCapSite/FrontendCapSite 
    <Directory "K:/Frontend-Tools/01_Product_Dev_Aux_Tools/Trunk/FrontendCapSite">
        Require all granted
    </Directory>
</VirtualHost>

4.Vue部署

前端部署时，conf文件加下新建webqd.conf，设置前端静态路径

	Listen 10.2.194.225:8080
	ServerName 10.2.194.225:8080
	LoadModule rewrite_module modules/mod_rewrite.so
	#配置网页路径
	<Directory "K:/@capwww/front">
		AllowOverride none
		Require all granted
	</Directory>

httpd.conf文件中将该参数导入

	Include conf/webqd.conf

最后，httpd.conf中DocumentRoot和Directory（260行左右）指向目标前端静态文件（被坑了好久…）。

二、问题记录

1.加载异常

若后端开发引用了numpy，cv2等库在python子解释器里调用不了，加上那句话就强制使用python的主解释器。

	WSGIApplicationGroup %{GLOBAL}

参考：https://blog.youkuaiyun.com/wuchunquan123/article/details/107486330

2.跨域设置

涉及到跨域问题，需要加载mod_headers

	LoadModule headers_module modules/mod_headers.so

3.Django 、Vue参数配置

工程部分参数需要提前在Django工程setting.py和Vue工程conf/index.js中完成，然后进行Apache部署设置。