开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
记录IIS部署vue的全过程,本来个人认为IIS应该已经退出了,但是还是有老项目在使用,特别是政府项目....
最近有个新需求,开发了几个静态页面,使用vue做的,本来部署贼简单,nginx上一放就行了,结果客户那边说只有一台服务器,还是windows server + IIS的.
之前没遇到过这样的,也有一点经验积攒把,记录一下.
前置环境
- 服务器: windows server R2
- IIS 8.5
- vue打包好的包: 一个
部署过程
客户直接把生产环境给我了,但是一个优秀的程序员怎么能直接在生产环境开怼呢,所以我在阿里云上搞一个8c32g的window server 作为测试环境.
购买服务器及安装IIS不再赘述.
主要步骤如下:
1. 上传vue的打包结果dist目录至某一个目录
2. 打开IIS管理器,网站-右键-新增
网站名称随意
物理路径选择刚才上传的静态文件目录
端口选80(域名默认映射80服务)
主机名: 填写最终配置的域名
确定后即启动网站
3. 访问
至此,不出意外的话,应该是完成了.
我们先测试下在服务器上本地访问,由于我们配置了主机名(域名), 所以直接在本地用域名访问的话,需要配置一下hosts文件,将域名映射到127.0.0.1 hosts文件路径: C:\Windows\System32\drivers\etc
本地访问如果没问题,在外网配置域名解析,即可完成部署.
4. 错误总结
上文说不出意外的情况下,可以完成了
但是第一次部署还是有很多问题的.
4.1 IIS错误：加载配置文件时出错: 由于访问被拒绝,未能开始监视对 XX 文件的更改
这个错误一看就是对文件/目录没权限. 但是对于IIS应该怎么配置,确实没研究过.
百度一番后: 如下操作即可
将内置账户改为LocalSystem即可,我的理解是用本地系统账号来操作目录,这样的话才有权限.
4.2 IIS HTTP 错误 401.3 - Unauthorized
解决了4.1的错误后,又来了一个新错误,401一看还是没权限.
再次折腾一番后:
修改对应权限,其实是添加一个Everyone的用户,并赋予全部权限
再次刷新网站后,发现可以正常访问了
4.3 vue页面404
发现从首页跳转其他页面时出现404的情况,经过排查和百度后,确认是因为vue路由跳转的问题,并且网上有完善的解决办法,记录如下:
- 安装IIS服务 urlrewrite组件,这个比较简单,一键安装即可,下载路径:www.iis.net/downloads/m…, 注: 安装完需要重启IIS服务
- 找到对应网站,进入urlrewrite菜单,添加对应规则,其实就是将所有请求转发到index.html,因为vue是一个单页面应用.
双击进入,添加规则,空白规则
主要配置如下:条件: 选择添加-不是文件即可
最后应用该规则,重启该网站,即可生效.
4.4 防火墙
如果是云服务器,比如我测试使用的阿里云ecs,需要做两步操作:
- 开放云服务器安全组 增加对应端口的白名单
- 在服务器内防火墙设置,新增对应端口的入站规则.
如果是物理服务器,那么只需要修改入站规则即可.
5. 域名配置
这个是部署后,配置对应域名,搜集了一些文档,也记录一下.
最开始对IIS的认知不够,一直在想,一个IIS服务部署了多个网站,我的域名该怎么映射? 域名可只能映射80端口,网站如何配置,域名又如何设置?
后来百度+实践后得出,是可以做到的.
其中,上文新增网站时我已经指定了两个配置,这两个配置就是 端口:80 主机名:域名
经过实测: 当填写了主机名时,每个网站都可以设置端口为80,当不写主机名时,所有无主机名的网站端口不可重复
因此: 一个IIS服务可以有多个端口为80的服务.
然后通过给一个域名增加多个A记录的方式,来指定到多个网站服务即可.
注: A记录的域名地址要与IIS服务的主机名一致.
举例说明:
我的域名为zy.com
IIS上有两个网站: A和B
此时域名新增两天A记录解析: a.zy.com 和 b.zy.com
这两个二级域名与两个网站一一对应,主机名就填写这两个二级域名即可
总结
本来我是想劝说客户直接部署一个nginx拉到了. 但是客户说上面还有其他服务,所以没办法,只能研究一下了.
总结一下:
- IIS虽然有点老,但是还是很方便的,操作起来还是很快的.
- IIS服务的文档很充分,基本上问题都能找到解决办法.
- IIS的映射与Nginx有异曲同工之妙.
