windows的IIS上发布部署项目(vue前端+python后端项目)

windows的IIS上发布部署项目(vue前端+python后端项目)

项目需求

项目中使用python作为后端并且习惯使用IIS,所以顺理成章的需要将项目发布到IIS上。查看网上的许多部署指南,还是会有一些问题,功夫不负有心人,集百家之长还是解决了困难,所以记录在此。

项目实现

  • IIS安装
    既然部署到IIS上,那就必须要安装好IIS。
    控制面板–>程序–>启用或关闭windows功能(将图中圈住的内容全部勾选)
    在这里插入图片描述
  • 项目组成
    在这里插入图片描述
    运行项目验证:python manage.py runserver 验证没有问题进入下一步
  • 安装wfastcgi模块

pip install wfastcgi

将安装好的wfastcgi.py文件拷贝到工程项目根目录下。
如图所示
在这里插入图片描述

  • 网站配置
    打开IIS,新建网站。
    在这里插入图片描述
  • 添加程序映射
    选中你发布的网站–>处理程序映射–>添加模块映射
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    可执行文件是python.exe路径|wfastcgi.py路径
    填写完参数后选择请求限制将对勾取消
    在这里插入图片描述
  • 进入FastCGI设置
    点击主页
    在这里插入图片描述
    点击添加应用程序
    在这里插入图片描述
    添加环境变量–>增加两个键值对

Name: WSGI_HANDLER Value: django.core.wsgi.get_wsgi_application()
Name: DJANGO_SETTINGS_MODULE
Value:WaterEnvironentRiskManagement_PythonDB.settings(WaterEnvironentRiskManagement_PythonDB是自己的项目名称)

在这里插入图片描述
项目根目录下会自动生成web.config的文件。
在这里插入图片描述
其中文件内容如下,如果没有可复制粘贴,但相应路径内容要替换称自己的

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <appSettings>
      <add key="WSGI_HANDLER" value="django.core.wsgi.get_wsgi_application()" />
      <add key="PYTHONPATH" value="%ROOTDIR%" />
      <add key="DJANGO_SETTINGS_MODULE" value="WaterEnvironentRiskManagement_PythonDB.settings" />
    </appSettings>
    <system.webServer>
        <handlers>
            <add name="DjangoFastCgiModule" path="*" verb="*" modules="FastCgiModule" scriptProcessor="C:\Users\haizhengzheng\AppData\Local\Programs\Python\Python37\python.exe|C:\inetpub\wwwroot\WaterEnvironentRiskManagement_PythonDB\wfastcgi.py" resourceType="Unspecified" />
        </handlers>
    </system.webServer>
</configuration>

DJANGO_SETTINGS_MODULE 的 value 里面 WaterEnvironentRiskManagement_PythonDB是项目的名字
DjangoFastCgiModule是在 IIS 配置时添加模块映射的名字

C:\Users\haizhengzheng\AppData\Local\Programs\Python\Python37\python.exe|C:\inetpub\wwwroot\WaterEnvironentRiskManagement_PythonDB\wfastcgi.py

前面一截是python的路径,后面一截是项目中wfastcgi.py的路径,中间用竖线隔开

到此,没有静态文件的项目就已经部署好了。
真的部署好了吗?
至少在我的项目中是运行不起来的,他还会报错,比如是这样的
在这里插入图片描述
解决方法来了!!!
在这里插入图片描述
将标识中的ApplicationPoolidentity改为LocalSystem
在这里插入图片描述
到此,没有静态文件的项目才部署好。

  • 修改setting.py文件中的ALLOWED_HOSTS
    会出现报错情况
    将ALLOWED_HOSTS = []改为ALLOWED_HOSTS = [’*’]
  • 配置静态文件
    1、在项目settings.py中添加三行代码

STATIC_URL = ‘/static/’
STATICFILES_DIRS=[os.path.join(BASE_DIR,“dist/static”)] STATIC_ROOT =
os.path.join(BASE_DIR, ‘static’)

2、配置静态文件
在项目中新建static文件夹,新建web.config文件。在其中添加以下代码

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
      <!-- this configuration overrides the FastCGI handler to let IIS serve the static files -->
      <handlers>
        <clear/>
	<!-- the configuration document write by Kahn.xiao -->
   <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
     </handlers>
   </system.webServer>
</configuration>

3、收集静态文件
命令行进入到项目中!!!是进入到项目中。

python manage.py collectstatic

发现又会报错。。。尴尬。
一些静态文件被拒绝访问
所以这里通过以管理员的方式打开cmd再执行代码即可

在这里插入图片描述
这时项目中会生成static文件夹,此时的项目结构如下
在这里插入图片描述
此时通过IIS访问网站即可了

效果展示

在这里插入图片描述
在这里插入图片描述

### Vue 配置 Python 后端教程 在 Vue 项目中配置 Python 后端涉及多个方面,包括后端服务的搭建、前后端通信方式的选择以及跨域问题的处理。以下是详细的说明: #### 一、Python 后端环境准备 为了使 Vue 前端能够顺利调用 Python 后端接口,需先完成 Python 后端的基础设置。 1. **下载并安装 Python** 访问官方站点 `https://www.python.org/` 下载适合操作系统的 Python 版本[^1]。推荐使用最新稳定版本以获得更好的兼容性和安全性支持。 2. **创建虚拟环境** 使用 virtualenv 或 venv 创建独立运行环境,避免依赖冲突。 ```bash python -m venv myenv source myenv/bin/activate # Linux/MacOS .\myenv\Scripts\activate # Windows ``` 3. **选择 Web 框架** 推荐选用 Flask 或 Django 构建后端 API。这里以 Flask 为例展示基础框架初始化过程: ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/test', methods=['GET']) def test(): return jsonify({"message": "Hello from backend!"}) if __name__ == '__main__': app.run(debug=True) ``` #### 二、Vue 前端Python 后端交互实现 通过 Axios 库可以轻松发起 HTTP 请求到后端服务器。 1. **安装 Axios** 在 Vue 项目目录下执行命令安装 Axios 插件: ```bash npm install axios --save ``` 2. **编写请求逻辑** 利用 Axios 发送 GET 和 POST 请求至指定 URL 地址[^4]: ```javascript export default { data() { return { response: null }; }, mounted() { const url = 'http://localhost:5000/api/test'; // 替换为实际API路径 this.axios({ method: 'get', url, }).then((res) => { console.log('Response:', res.data); this.response = res.data; }).catch((err) => { console.error('Error:', err); }); } } ``` #### 三、解决跨域访问限制 当 Vue 运行于本地开发服务(e.g., http://localhost:8080),而 Python 后端位于不同域名或端口时,默认情况下浏览器的安全策略会阻止此类请求。因此需要采取措施允许跨域资源共享(CORS)[^3]: 1. **引入 Flask-CORS 扩展** 安装扩展库并通过简单配置开启 CORS 支持: ```bash pip install flask-cors ``` 修改原有代码如下所示: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # 允许所有来源访问资源 ... ``` #### 四、生产环境中部署方案 对于正式上线的应用程序而言,还需考虑性能优化和服务稳定性等问题。 1. **Windows 平台下的 IIS 部署** 参考具体实例,在目标机器上利用 wfastcgi 将 Python 脚本映射给 IIS 处理器[^2]。确保正确指定了解释器位置及入口文件名。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值