前后端分离WEBAPI + VUE项目部署阿里云IIS详解

做了一个后台管理系统项目，前端是Vue+element-ui，后端是ASP.NET WEPAPI+SQLSERVER数据库。这两个项目需要分别部署在阿里云服务器的两个端口号上。

一、发布WEBAPI项目

打开VS,WEBAPI项目上右击-》发布。发布到电脑的磁盘里

远程连接阿里云服务器电脑，安装IIS服务和SQL数据库，然后将刚刚发布的项目文件夹拷贝到阿里云上。 打开IIS，右击添加网站

输入网站名称与物理路径等信息，物理路径选择刚刚拷贝的文件夹，IP地址填写阿里云外网IP地址，端口号我这里填写的是8090。然后点击浏览网站，如果看得到这个界面就代表成功。
打开阿里云控制台，创建安全组规则，端口号为你刚刚在IIS部署项目里填写的，比如我是8090，则填写8090/8090。授权IP地址为：0.0.0.0/0。

这个时候还有两件事要做：
1.设置阿里云服务器防火墙出入站规则
2.跨域允许

跨域设置：

打开IIS选择发布后的webapi，选择网站–>选择HTTP 响应表头–>添加。以下其中name为名称，value为值。

<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>

<add name="Access-Control-Allow-Headers" value="x-requested-with,Content-Type"/>

<add name="Access-Control-Allow-Origin" value="*" />

接下来可以在自己的电脑用PostMan测试，能否接通。记得改Web.config里的数据库连接字符串。

二、发布Vue前端项目

在打包之前，把axios请求地址改为已经部署的API项目的IP地址。

打包完后将生成的dist文件夹拷贝到阿里云服务器。

打开IIS，右击添加网站-》选择dist文件夹-》填写端口

同样的，配置阿里云安全规则和网络防火墙出入站规则。

没什么问题的话就完事了。