Nuxt.js 服务端渲染部署

下面对Nuxt.js实现服务端渲染部署过程进行介绍。

官方文档相关介绍:命令

1. npm run build命令打包

服务器部署Nuxtjs项目之前,第一步先通过npm run build命令打包项目,执行该命令后可以看到生成一个.nuxt文件夹。

2. 复制文件

服务器上新建一个文件,比如我命名为SSR,把Nuxtjs项目代码中.nuxtstaticnuxt.config.jspackage.json 四个文件复制到服务器上新建的文件SSR中。

nuxt

3. npm install安装

服务端命令行进入到新建文件SSR目录下,执行命令npm install,nodejs会根据nuxt项目的package.json文件自动安装相关模块。

4. nuxt start运行

在服务端最后执行命令nuxt start运行起来Nuxt程序,就可以完成Nuxt项目的服务端部署。

  "scripts": {
    "start": "cross-env NODE_ENV=production node server/index.js",
    "start": "nuxt start",
  },

nuxt.config.js配置

nuxt start运行Nuxt项目的时候,注意nuxt.config.js文件中关于服务IP和端口号的配置。

如果你想nuxt部署的项目,外网可以直接访问,你可以进行如下设置。

  server: {
    port: 80, // 端口号默认: 3000
    host: '0.0.0.0', // IP地址设置为0.0.0.0或者阿里云主机内网IP
  },

如果你想使用Nginx反向代理Nuxt服务,也可以不设置host,直接设置一个端口,保证不占用别的端口号就可以,如果你的服务器3000端口号是空余的,也可以不设置使用默认的端口号。

  server: {
    port: 3002, // 默认: 3000
    // 如果不设置,host默认值是: localhost
  },

5. 反向代理

因为项目中已经存在一个端口号80外网可以直接访问的IP地址,所以我在部署Nuxt项目的时候,nuxt.config.js配置的server地址是localhost:3002,nodejs、java任何后端服务器直接设置一个反向代理,然后根据前端请求的URL地址,导向Nuxt的地址localhost:3002即可。

反向代理可以通过Nginx设置,当然我是直接通过express设置的。

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
//所有访问路径是api开头的自动转向请求nuxt项目的服务地址http://localhost:3002
app.use(
    '/api',
    createProxyMiddleware({ target: 'http://localhost:3002', changeOrigin: true })
  );

设置反向代理的时候,可以把nuxt项目static目录中的文件复制到服务器后端静态根目录,在服务器后端静态根目录创建一个_nuxt文件,把.nuxt/dist/client.nuxt/dist/server两个文件夹下的文件复制粘贴到新建的_nuxt文件文件中。

配置router的情况

如果你在nuxt.config.js文件中配置了router,注意服务端部署nuxt项目的时候,反向代理方案中,_nuxt文件外需要再嵌套一个文件,文件名称就是router设置的名称,比如下面配置对应的nuxtssr名称。

module.exports = {
  router: {
    base: '/nuxtssr/'
  }
}