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

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

一、连接服务器

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

1. 直接在服务器信息界面点登陆
   
2. 使用系统远程连接功能。win +R，输入mstsc，首次登录可能需要用户名密码啥的，输入公网ip。
   

二、配置环境

2.1 IIS配置

1. 打开服务器管理器（第一次应该是打开的，没打开可以在左下角打开）
2. 选择添加角色和功能
   
3. 选择自己需要的角色，最重要的是Web服务器（IIS），其他的看自己需要
   
4. 安装完成后点击右上角工具，选择IIS
   
5. 建议安装一下Web平台组件，进入后可能会提示，不提示的话，点击左边树形目录起始页下面的带有服务器内网ip的目录，右边会有获取平台。
   
   
6. 安装自己需要的组件，这里我用到了CGI、URL重写。打开默认的网站看看是否可以看到界面，如果能，说明IIS配置的差不多了，可以将其删掉（它占用了80端口，也可以不删，后面用其他端口）。

2.2 配置前端Vue环境

1. 在自己的系统上先生成build文件夹(npm run build)，我的项目是用vue-cli生成的，使用了node.js，所以等会儿还需要安装node.js。
2. 在服务器上C盘创建目录，其结构如下：
   ++wwwroot
   ++++myWeb
   ++++++web(放前端dist文件夹中的内容)
   ++++++be(放后端文件)
   将前后端文件都放到对应的文件夹中。
3. 安装Node.js，傻瓜式安装。Windows 64位安装地址：https://nodejs.org/dist/v14.17.1/node-v14.17.1-x64.msi

2.3 配置后端Python环境

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

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

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

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

pip install wfastcgi

三、搭建站点

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

3.1 前端站点搭建

1. 创建应用程序池myAppPool。点击应用程序池，点击右上角添加应用程序池，输入名称myAppPool(可以自己随便起)。选择.Net CLR版本(了解更多请移步)，托管管道模式选择集成，点击确定。
   
2. 创建站点。右键点击网站，选择添加网站。
   
3. 完善网站信息。填写网站名称，选择刚刚创建的应用程序池，选择前端项目所在的文件夹，到web即可（就本项目而言）。绑定可暂不填写。
   
4. 下面进行非常重要的一个步骤，点击刚刚创建的网站，双击IIS中的身份验证，开启匿名身份验证，点击右上角编辑，选择应用程序池标识。然后返回。
   
   
   
   点击右上角编辑权限。点击安全->点击编辑->点击添加，输入iis apppool\myAppPool，(myAppPool是自己创建的应用程序池名称)，点击检查名称，没问题可以添加，然后编辑他的权限，选择完全控制，然后应用。
   
   
5. 绑定ip，点击右上角绑定，点击添加，输入自己服务器公网ip。点击右边浏览http://公网ip:端口号/可在浏览器中查看网页。如果正常，可以搭建后端站点。

3.2 搭建后端站点

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

1. 右键点击网站，添加网站，和上面操作一样，应用程序池选择另外一个，物理路径就是后端文件夹be(我的项目是这个)，端口号设为其他没被占用的端口号，我这里用了8080。
2. 用同样的方法设置身份验证。
3. 绑定ip，也同上。
4. 这是后端搭建最重要一步，在终端中进入前面安装的wfastcgi目录，运行wfastcgi-enable文件，正常的会输出如下结果。
   已配置…路径\python.exe | 路径\wfastcgi.py
   记住这两个完整的路径，包括中间的 ‘|’。在IIS管理器中，点击后端站点，双击处理程序映射。
   
   点击右上角添加模块映射，请求路径输入*，模块输入FastCgiModule，可执行文件输入刚刚得到的两个路径，中间用 “|” 隔开，然后起一个名字，请求限制取消默认选中的。
   
   
5. 在后端文件夹中会有一个web.config配置文件

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="handlePython" path="*" verb="*" modules="FastCgiModule" scriptProcessor="C:\Miniconda3\envs\python38\python.exe|C:\Miniconda3\envs\python38\lib\site-packages\wfastcgi.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的形式。

6. 浏览器中输入请求路径，查看有没有返回结果，如果有说明后端搭建成功。

3.3 连接前后端

---

----------------------------2021.6.24更新--------------------

今天更新服务器上的文件，然后因为前端URL写错了，出了点故障，才让我明白一点URL怎么工作的，发现之前写的下面的内容不是必须的，是否需要URL重写取决于自己的URL到底是什么样的，如果直接请求后端，那么不需要重写，如果不能直接请求到后端则考虑重写。

---

-------------------------------------以下是URL重写-----------------------------

现在前端后端都可以被访问了，那么如何将其联系起来呢？
这就要用到刚刚提到的URL重写工具了。我个人理解的这个工具就是将，入站的URL修改为另一个想要访问的URL。我的项目里URL都是“http://公网ip/api”的形式

1. 点击前端站点，双击URL重写，点击右上角添加规则，选择入站规则的空白规则。
   
2. 输入规则名称，选择与模式匹配，使用正则表达式，匹配模式为（^(http://公网ip/)(.*)）这里会匹配出三个结果
   {R:0} 是 输入的URL
   {R:1} 是 去掉api的URL
   {R:2} 是 api，后面会用到
   我这里想达到这样一个目的：当我传过来一个URL以后，判断api是不是空的，如果是空的就是页面本身，如果不是空的，则重写到后端。
   那么我就需要添加条件，当他与模式不匹配（模式为：^(http://公网ip/)$）这个意思就是以http://公网ip/开头结尾的URL，也就是他本身。当不满足这个条件时，重写为：http://公网ip:后端端口号/{R:2}，点击右上角应用即可。
   这里根据自己的需要进行编写正则表达式。
   

文章只记录了过程，并没有解释很多概念上的的东西，如果有不懂的地方欢迎讨论，也欢迎批评指正！