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博客

你可能感兴趣的:(vue,前端)