继续上一篇的nuxt/express项目部署,还是windows上要把nuxt的服务端渲染项目跑起来,这次的目的是用已经有的域名windows服务器上一个虚拟目录反向代理部署在其他端口nuxt项目。

情况说明:

1.现有的服务器只有windows server的服务器

2.服务器IIS已经部署了多个站点,80端口毫无疑问被占用

尝试的方案:

1.nginx使用虚拟目录监听80端口,反向代理本地其他端口,例如需要的3000端口,nginx的服务无法启动,80端口已经被占用

2.iis有个iisnode可以直接运行node.js的环境,这个尝试过写个express的demo,确实可以运行,但是nuxt的项目编译后也找不到怎么去在这种环境下部署,官方文档暂时也没有提到过,先放弃

3.iis有自己的反向代理配置,Application Request Routing简称ARR,这个是已经运行通过的方案,下面就主要记录一下这个,希望对有相同问题的朋友有帮助。

环境准备:

1. 能运行nuxt的项目的相关环境,确保本地localhost能运行起来

2.ARR(Application Request Routing)下载地址:https://www.iis.net/downloads/microsoft/application-request-routing

配置详细说明:

1. 安装ARR,安装后IIS根配置页会多出来两个配置项,那么就安装成功了。

2.确保host在其他端口的nuxt项目能正常反问

不管你是在cmd的node启动的服务还是pm2挂载的服务,首先确保http://127.0.0.1:3000/本地访问正常,然后再开始配置iis的反向代理

3.站点下创建应用程序

ARR的配置实际上会在站点的web.config文件里面写入一些配置内容,如果是独立应用程序的话,会在相应的目录下创建一个新的文件,不影响已有的主站点web.config的配置内容,保证互补影响。

4.配置ARR反向代理

双击ARR打开配置

打开代理设置

启用代理的勾上,应用设置

选择上面站点下创建的应用程序,打开主页设置,打开URL重写设置

添加规则,选择反向代理

填写本地需要代理的地址

然后使用http://localhost/app访问主页

这里其实是有问题的,因为我们用的是虚拟目录代理的是一个站点的根目录,所以引用的js,css和图片等资源的地址是相对路径的话就无法访问了,网上有一些解决办法是配置出站规则,但是对于nuxt编译后的项目来说,代理访问的内容gzip压缩,无法应用出站规则,而且微软的这项配置复杂,需要配置每个标签的出站规则。

这里其实就是一个路径引用问题,既然用到了vue-ruter,路由的根配置修改为虚拟目录名字一样就可以了

配置好编译,继续发布运行后,保证http://127.0.0.1:3000/app正常访问,然后修改iis代理配置

然后就可以访问80端口的虚拟目录了,资源无法加载的问题解决了。

nuxt.js express模板项目IIS部署的更多相关文章

  1. nuxt.js express模板项目服务器部署

    nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进 ...

  2. nuxt.js express模板项目虚拟目录部署问题汇总

    声明环境 反向代理:nginx或者iis的ARR 模板项目:nuxt-express 部署环境:windows 经过了一段时间在windows环境部署项目来看,关于虚拟目录的问题汇总如下, 发布场景假 ...

  3. Node.js Express+Mongodb 项目实战

    Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...

  4. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  5. [转] node.js express的安装与部署,以及pm2下的运行启动。

    node.js 下的express 安装可以参考官方网站的 http://www.expressjs.com.cn/ 这里主要讲一下一些不同的地方,将我们生成的dist文件夹里的文件放在public里 ...

  6. 总结在Visual Studio Code创建Node.js+Express+handlebars项目

    一.安装node.js环境. Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 32 位安装包下载地址 : https://nodejs.org/d ...

  7. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  8. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  9. Nuxt.js的踩坑指南(常见问题汇总)

    本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...

随机推荐

  1. 转 用Oracle自带脚本 重建WMSYS用户的WMSYS.WM_CONCAT函数

    https://blog.csdn.net/huaishuming/article/details/41726659?locationNum=1

  2. 012 Integer to Roman 整数转换成罗马数字

    给定一个整数,将其转为罗马数字.输入保证在 1 到 3999 之间. 详见:https://leetcode.com/problems/integer-to-roman/description/ cl ...

  3. Washing Plates 贪心

    https://www.hackerrank.com/contests/101hack41/challenges/washing-plates 给定n个物品,选这个物品,贡献 + p, 不选的话,贡献 ...

  4. [技术交流ppt]babel7中preset-env的优化使用

    备注 pdf在这里

  5. NeatUpload 的使用

    1 <httpModules> 2 <add name="UploadHttpModule" type="Brettle.Web.NeatUpload. ...

  6. oracle报错:ORA-01658(转自52斋347)

    在oracle里创建表,报出错:ORA-01658: 无法为表空间space中的段创建 INITIAL 区:或者: ORA-01658: unable to create INITIAL extent ...

  7. 三、css 和 js 的装载与执行

    一个网站在浏览器端是如何渲染的? 一.html 页面加载渲染的过程. 请求回来最先应该是HTML,从一个字节流转换成字符流,浏览器拿到字符流,然后浏览器端进行相应的词法分析成相应的token,然后不断 ...

  8. VMware Workstation Pro 14注册码,亲测可用

    ** VMware Workstation Pro 14注册码 ** 作者网上搜集整理 作者使用的密钥是: AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 亲测可用 以下密钥未测试 CG5 ...

  9. LNA与PA

    LNA是低噪声放大器,主要用于接收电路设计中.因为接收电路中的信噪比通常是很低的,往往信号远小于噪声,通过放大器的时候,信号和噪声一起被放大的话非常不利于后续处理,这就要求放大器能够抑制噪声.PA(功 ...

  10. webstorm下载激活汉化

    下载 官方下载地址:https://www.jetbrains.com/webstorm/ 激活 参考http://blog.csdn.net/it_talk/article/details/5244 ...