Nuxtjs在linux环境下部署笔记

news/2024/7/24 11:59:05 标签: 前端

问题: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博客


http://www.niftyadmin.cn/n/5018709.html

相关文章

信息系统工程监理课程内容

第一部分 卢学哲专家1-5天内容 Day01 1 信息监理的发展史 发展史 背景 对数字敏感 时间:是否有交叉 重叠 成本:各种相关费用 工程量:硬件软件的数量,工作量的大小 1988年出现的信息监理2 信息监理工程师的职业素养 公平 公…

怎样做思维导图?教你这样轻松制作

怎样做思维导图?思维导图是一种非常有用的工具,它可以帮助你更好地组织和展示你的想法。无论是个人使用还是团队协作,思维导图都是一个非常好的选择。在制作思维导图时,有很多工具可以使用,那么今天就给大家来介绍一下…

记录socket的使用 | TCP/IP协议下服务器与客户端之间传送数据 | java学习笔记

谨以此篇,记录TCP编程,方便日后查阅笔记 注意:用BufferedWriter write完后,一定要flush;否则字符不会进入流中。去看源码可知:真正将字符写入的不是write(),而是flush()。 服务器端代码&#…

华为回击:制裁无法阻挡中国科技创新 | 百能云芯

华为最新推出的Mate 60 Pro手机引发了中国市场的抢购热潮,这一成功的举措为华为带来了信心。华为在这个背景下再度推出两款新机,其中包括高阶版的Mate 60 Pro和折叠式手机Mate X5。这两款手机在首批预购开始后迅速售罄,不仅取得了市场的热烈欢…

java并发编程 ConcurrentLinkedQueue详解

文章目录 1 ConcurrentLinkedQueue是什么2 核心属性详解3 核心方法详解3.1 add(E e)3.2 offer(E e)3.3 poll()3.4 size()3.5 并发情况分析 4 总结 1 ConcurrentLinkedQueue是什么 ConcurrentLinkedQueue是一个无界的并发队列,和LinkedBlockingQueue相比&#xff0c…

Ubuntu22.04安装及显卡驱动问题

自己有window系统,想搞个ubuntu系统玩玩 一、Ubuntu22.04安装 首先去官网下载ubuntu系统,我下载的是22.04 https://cn.ubuntu.com/download/desktop 准备一个启动盘制作器Rufus,将下载好的镜像烤制到U盘 制作完u盘,进入bios更…

字符编码(idea)

File----------settings-------------Editor------------File Encodings

Java8实战-总结24

Java8实战-总结24 用流收集数据收集器简介收集器用作高级归约预定义收集器 用流收集数据 流可以用类似于数据库的操作帮助你处理集合。可以把Java 8的流看作花哨又懒惰的数据集迭代器。它们支持两种类型的操作:中间操作(如filter或map)和终端操作(如count、findFir…