Windows服务器使用IIS部署Vue+Flask网页项目

一、连接服务器
二、配置环境
- 2.1 IIS配置
- 2.2 配置前端Vue环境
- 2.3 配置后端Python环境
三、搭建站点
- 3.1 前端站点搭建
- 3.2 搭建后端站点
- 3.3 连接前后端
- ----------------------------2021.6.24更新--------------------

最近嫖了一个服务器，想把项目放到服务器上，搞了一天半啥也没弄出来，光服务器就重置了好几次，后来理清了思路，很快就部署好了，现记录一下，防止以后忘记。我嫖的是腾讯云的轻量服务器，第一次使用，所以还是选择了自己熟悉的Windows系统。

一、连接服务器

可以通过以下两种方式操作服务器：

直接在服务器信息界面点登陆 :::hljs-center

:::

使用系统远程连接功能。win R，输入mstsc，首次登录可能需要用户名密码啥的，输入公网ip。 :::hljs-center

二、配置环境 2.1 IIS配置

打开服务器管理器（第一次应该是打开的，没打开可以在左下角打开）
选择添加角色和功能 :::hljs-center

选择自己需要的角色，最重要的是Web服务器（IIS），其他的看自己需要 :::hljs-center

安装完成后点击右上角工具，选择IIS

建议安装一下Web平台组件，进入后可能会提示，不提示的话，点击左边树形目录起始页下面的带有服务器内网ip的目录，右边会有获取平台。

6. 安装自己需要的组件，这里我用到了CGI、URL重写。打开默认的网站看看是否可以看到界面，如果能，说明IIS配置的差不多了，可以将其删掉（它占用了80端口，也可以不删，后面用其他端口）。

2.2 配置前端Vue环境

在自己的系统上先生成build文件夹(npm run build)，我的项目是用vue-cli生成的，使用了node.js，所以等会儿还需要安装node.js。
在服务器上C盘创建目录，其结构如下：

wwwroot

myWeb

web(放前端dist文件夹中的内容)

be(放后端文件)

将前后端文件都放到对应的文件夹中。

安装Node.js，傻瓜式安装。Windows 64位安装地址：https://nodejs.org/dist/v14.17.1/node-v14.17.1-x64.msi

2.3 配置后端Python环境

Python我使用Miniconda创建的虚拟环境，下载安装Miniconda（参考我的另一篇博客）

安装完环境后，切换到自己创建的Python虚拟环境，安装使用到的第三方库（使用pip）。
将后端文件放到2.2中所说的文件夹中，在终端中进入be文件夹（后端文件）测试一下项目是否能正常运行（主要是检测一下是否有第三方库漏掉了）。

代码语言：javascript复制

python mian.py #输入自己的入口文件名

没有问题的话，在浏览器中输入运行的ip和端口，看一下是否有返回结果。flask默认的是http://127.0.0.1:5000/。如果正常的话，说明后端环境配置完成。
安装wfastcgi第三方库

代码语言：javascript复制

pip install wfastcgi

三、搭建站点

这里我前端（http://公网ip/默认80端口）和后端(http://公网ip:8080/)放在了两个不同的站点（我的项目不好放在同一个站点下，后面我会再试试放在同一个站点行不行）。

3.1 前端站点搭建

创建应用程序池myAppPool。点击应用程序池，点击右上角添加应用程序池，输入名称myAppPool(可以自己随便起)。选择.Net CLR版本(了解更多请移步)，托管管道模式选择集成，点击确定。

创建站点。右键点击网站，选择添加网站。

完善网站信息。填写网站名称，选择刚刚创建的应用程序池，选择前端项目所在的文件夹，到web即可（就本项目而言）。绑定可暂不填写。

下面进行非常重要的一个步骤，点击刚刚创建的网站，双击IIS中的身份验证，开启匿名身份验证，点击右上角编辑，选择应用程序池标识。然后返回。

点击右上角编辑权限。点击安全->点击编辑->点击添加，输入 ==iis apppoolmyAppPool== ，(myAppPool是自己创建的应用程序池名称)，点击检查名称，没问题可以添加，然后编辑他的权限，选择完全控制，然后应用。

5. 绑定ip，点击右上角绑定，点击添加，输入自己服务器公网ip。点击右边浏览http://公网ip:端口号/可在浏览器中查看网页。如果正常，可以搭建后端站点。

3.2 搭建后端站点

先安装好Web平台组件CGI（安装后可能不显示，关闭IIS管理器重新进入即可）。

右键点击网站，添加网站，和上面操作一样，应用程序池选择另外一个，物理路径就是后端文件夹be(我的项目是这个)，端口号设为其他没被占用的端口号，我这里用了8080。
用同样的方法设置身份验证。
绑定ip，也同上。
这是后端搭建最重要一步，在终端中进入前面安装的wfastcgi目录，运行wfastcgi-enable文件，正常的会输出如下结果。已配置......路径python.exe | 路径wfastcgi.py 记住这两个完整的路径，包括中间的 ‘|’。在IIS管理器中，点击后端站点，双击处理程序映射。

点击右上角添加模块映射，请求路径输入*，模块输入FastCgiModule，可执行文件输入刚刚得到的两个路径，中间用 “|” 隔开，然后起一个名字，请求限制取消默认选中的。

5. 在后端文件夹中会有一个web.config配置文件

代码语言：javascript复制

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="handlePython" path="*" verb="*" modules="FastCgiModule" scriptProcessor="C:Miniconda3envspython38python.exe|C:Miniconda3envspython38libsite-packageswfastcgi.py" resourceType="Unspecified" />
        </handlers>
    <security> 
        <requestFiltering allowDoubleEscaping="true"></requestFiltering> 
    </security> 
    </system.webServer>
    <appSettings>
        <!-- Required settings -->
        <add key="WSGI_HANDLER" value="main.app" />
        <add key="PYTHONPATH" value="~/" />
    </appSettings>
</configuration>

其中的参数大概能看懂，WSGI_HANDLER的value设置成入口文件.app的形式。