Nuxt服务端部署需要注意什么?
发布于 1 个月前 作者 MarquisF 912 次浏览 来自 问答

本人是前端开发者,我司的前端项目本是一个Vue项目,后来为了提升用户体验使用Nuxt进行了SSR重构,之后我们尝试在服务器上部署我们的项目。

我们一开始采取的方式是在Nuxt项目中使用npm run generate命令生成一套静态目录,之后将这套静态目录直接丢在Nginx中,前端根据指定的路由结构就可以访问到静态目录下的index.html文件。

但遇到了动态路由处理方面的一些障碍,比如我们的商品详情路由是 /details/:id。 用户访问 id 为 103254 的商品时,Nginx会试图查找/details目录下的名为103254的目录,但我们的项目目录中并不存在103254这个目录, 导致nginx无法查找到相应目录。于是客户端看到的效果就是先会被重定向到首页之后又被前端重定向到/details/103254这个路由下,浏览器才会显示出商品详情。

在网上看了一些别人的解决方案,被提到的比较多的方案是在nuxt.config文件的generate属性中写一个函数,用来在执行generate命令构建项目的时候在node的构建程序里向后台接口发一个请求,以获取到全部商品的id组成的列表,再根据此id列表生成相应的目录。比如我数据库里有两万个商品,这种方案就会在details目录下生成两万个用商品id名命名的目录。我认为这种方案首先听起来不太现实,而且后台商品每次发生增添或被移除的变化时前端都需要重新构建一次,操作性很差。

另外的方案是通过类似 /details?id=103254 这样的queryString去描述商品id,但这样前端代码需要改写,而且同页面不同商品之间相互跳转需要写更多的逻辑去控制组件状态,因为queryString发生变化时组件默认不会重新加载。而且我不认为前端程序员对动态路由使用的意愿应该受到这种部署时引发的问题的干涉。

其他的说法就是,目前这种通过generate命令生成静态文件的方式本身就应该用在静态网站中,我们这样的动态网站应该通过在服务器中用npm run start命令启动 /server/index.js 中的node服务器(koa)来运作。但公司目前还处于起步阶段,没有node程序员,前端程序员对node服务又不太了解,都是Node小白。我想知道如果在服务器中用pm2在某一端口开启nuxt的node服务并通过nginx对其进行代理,为了维持这个node服务的稳定性以及可观的承载能力需要注意些什么?

2 回复

我司用的就是nuxt,通过pm2自动重启。如果不需要缓存,内存消耗是比较小的,top查看大约100M。 我们暂时没有高负载,所以CPU表现不太明确。 加缓存可以在nuxt使用nuxt-ssr-cache,或者用express起服务加中间件,或者使用其他的缓存服务

@noe132 好的,谢啦~

回到顶部