Nuxtjs在linux环境下部署笔记

问题：Nuxtjs在linux环境下部署，ip+端口无法访问？

一 、解决方案

方案一：修改package.json文件

添加如下配置：

"config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }

方案二：修改nuxt.config.js

添加如下配置：

server: {
    port: 3000, // default: 3000
    host: '0.0.0.0', // default: localhost
  }

方案三：自建server.js进行服务端口监听（下文会涉及）

二、原因分析

127.0.0.1是本机环回地址，只能在本机进行传输，不进行外部网络传输。而本机IP是本机的局域网IP地址，可以在局域网中进行传输。

这里的port选项是指定服务器监听的端口号，host选项是指定服务器监听的地址。如果不指定host选项，则默认监听localhost地址。

0.0.0.0是一个特殊的IP地址，代表的是本机所有IP地址，不管你有多少个网口，多少个IP，如果监听本机的0.0.0.0上的端口，就等于监听机器上的所有IP端口。

三、拓展知识

Nuxt脚手架server文件与nuxt.config.js中server配置

create-nuxt-app现在已经升级到3.2.0版本了，该版本在构建项目时已经不会自动搭建server文件了。如果需要server文件夹，需要指定对应版本的create-nuxt-app脚手架创建，才有server文件夹。

如果需要server.js文件，可以按照以下模板创建，并在nuxt.config.js中添加自定义配置：

// 使用custom选项来指定自定义的server.js文件的路径。这个选项可以用来配置一些自定义的选项，例如自定义的插件、自定义的中间件
server: {
    custom: {
      serverPath: './server.js'
    }
  }

const express = require('express')
const { Nuxt, Builder } = require('nuxt')
const app = express()
 
// Import and Set Nuxt.js options
const config = require('./nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'
 
async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)
 
  const { host, port } = nuxt.options.server
 
  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }
 
  // Give nuxt middleware to express
  app.use(nuxt.render)
 
  // Listen the server
  app.listen(port, host)
  console.log(`Server listening on http://${host}:${port}`)
}
start()

nuxt.config.js文件中的server选项可以替代自己创建的server.js文件，除了port和host选项之外，还可以配置以下选项：

详细的配置项参考：配置 · 开始使用Nuxt3 Nuxt中文站

● timing: Boolean类型，是否在控制台输出服务器响应时间，默认为false。

● https: Object类型，用于配置HTTPS服务器，包括key和cert两个选项。

● proxy: Object类型，用于配置代理服务器，包括target、pathRewrite、changeOrigin等选项。

● host: String类型，指定服务器监听的地址，默认为localhost。

● port: Number类型，指定服务器监听的端口号，默认为3000。

如果使用自己创建的server.js文件，可以使用Node.js内置的http模块来创建服务器，例如：

const http = require('http')
 
const server = http.createServer((req, res) => {
  // 处理请求
})
 
server.listen(3000, '0.0.0.0', () => {
  console.log('Server is running at http://0.0.0.0:3000')
})

如果需要配置HTTPS服务器，可以使用Node.js内置的https模块，例如：

const https = require('https')
const fs = require('fs')
 
const options = {
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}
 
const server = https.createServer(options, (req, res) => {
  // 处理请求
})
 
server.listen(3000, '0.0.0.0', () => {
  console.log('Server is running at https://0.0.0.0:3000')
})

如果需要配置代理服务器，可以使用http-proxy-middleware中间件，例如：

const http = require('http')
const httpProxy = require('http-proxy-middleware')
 
const proxy = httpProxy.createProxyMiddleware({
  target: 'http://localhost:8080',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
})
 
const server = http.createServer((req, res) => {
  if (req.url.startsWith('/api')) {
    proxy(req, res)
  } else {
    // 处理请求
  }
})
 
server.listen(3000, '0.0.0.0', () => {
  console.log('Server is running at http://0.0.0.0:3000')
})

package.json，nuxt.config.js，server.js配置优先级

在Nuxt.js中，配置服务器可以使用package.json，nuxt.config.js，server.js；

nuxt.config.js文件中的server选项 与 package.json文件中的config.nuxt选项这两种配置的优先级是相同的，但是nuxt.config.js文件中的server选项更加灵活，可以配置更多的服务器选项。而在package.json文件中的config.nuxt选项中，只能配置host和port两个选项。

如果在server.js文件中定义了服务器设置，则它将覆盖nuxt.config.js中的server选项。

pm2 + nuxt部署流程

Nuxt根目录新建ecosystem.config.js文件

内容如下： 注意instances，官网是Max,一般cpu几个核就启动几个，我只需要1个就够了，所以改成了1。name也改成你自己应用的名字就可以。

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: '1', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

启动

调用pm2 start就可以了。这时候Nuxt就可以访问了。使用pm2 list也可以查看到nuxt进程相关的信息。

未来就可以使用pm2管理Nuxt的启动、重启和终止了。

详细配置可以参考如下文档

PM2 配置文件（ecosystem.config.js 字段详细介绍）_卡尔特斯的博客-CSDN博客