继续上一篇的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. c++概念字符串操作 (转)

    本文转自:http://www.jb51.net/article/37410.htm 一.char_traits 字符特征类 1)意义:包装特定串元素的通用行为界面,以便容器实现时依据特征信息而执行特 ...

  2. 初学makefile

    makefile 需要用到 常用命令.shell.正则表达式.gcc,比较综合. 今天写了一个做一个记录,以后系统总结一下. 目录结构:russia---------include.src.mian. ...

  3. WebGL之物体选择

    原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择.比如鼠标点击后判断是否选中了某个图形或图形的某个部分. 本节实现的效果: ...

  4. PHP面试题及答案(五)

    1. 禁用COOKIE 后 SEESION 还能用吗? 答案: 不能. 2. 抓取远程图片到本地,你会用什么函数? 答案: fsockopen(). 3.求两个日期的差数,例如2007-2-5 ~ 2 ...

  5. node安装启动服务

    一.下载安装包: node下载地址:https://nodejs.org/en/download/,根据自己电脑的配置下载相应的windows64位安装包,下载完成后,进行安装.下面我用的8.9.0版 ...

  6. HTTPS与SSL(二)

    CA Ca介绍 电子商务认证授权机构(CA, Certificate Authority),也称为电子商务认证中心,是负责发放和管理数字证书的权威机构,并作为电子商务交易中受信任的第三方,承担公钥体系 ...

  7. Mvc重写JsonResult

    用了mvc有一段时间了,慢慢的熟悉起来了,也渐渐的发现了mvc的一些缺点,比如当我们返回 Json(new{})的时候没办法做到将首字母转换成小写.日期再序列化过后是时间戳需要到前台重新处理或者提在在 ...

  8. [Rails学习之路]Rails路由配置

    如果是使用Rails的默认约定,那么几乎是零配置. 但有些时候,我们可能不得不(或者更喜欢)进行一些特殊的配置. 其实Rails在路由功能中也有很丰富的配置选项. routes.rb文件中靠前的规则优 ...

  9. mac上Apache修改目录浏览权限

    sudo vim /etc/apache2/httpd.conf <Directory "/Library/WebServer/Documents"> # # Poss ...

  10. lnmp一键安装 nginx

    官网: https://lnmp.org/install.html 1.下载完整版:http://soft.vpser.net/lnmp/lnmp1.5-full.tar.gz文件大小:715MB M ...