1

我正在尝试使用 expressjs 及其虚拟主机功能运行 2 个或更多 nuxt 应用程序。我的目标是在一个端口中运行分配给不同域的多个 nuxt 应用程序。

这是我尝试过的。

  1. 我设置了 2 个 nuxt 示例应用程序
  2. 我使用添加到 package.json 的 vhost 模块设置 expressjs

  3. 这是 expressjs 的 server.js 的内容

    var vhost = require("express");
var vhost = require("vhost");

var app = (module.exports = express());

var app_one = require("./app_one/server/index.js");
var app_two = require("./app_two/server/index.js");

app
    .use(vhost("appone.com", app_one.start_app_one))
    .use(vhost("apptwo.com", app_two.start_app_two))
    .listen(3000);

  4. 然后我在两个应用程序的服务器目录下添加了 index.js。

应用一

const express = require("express");
const consola = require("consola");
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
  await nuxt.ready();

  // Give nuxt middleware to express
  app.use(nuxt.render);

  // Listen the server
  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

exports.start_app_one = function () {
  start();
};

应用二

const express = require("express");
const consola = require("consola");
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;

  await nuxt.ready();

  // Give nuxt middleware to express
  app.use(nuxt.render);

  // Listen the server
  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

exports.start_app_two = function () {
  start();
};

然后我跑node server.js。当我尝试访问appone.com:3000它时，它只会显示 nuxt 加载网页并停在那里。控制台内没有错误或没有消息。我被困在这一点上，有人可以帮助我吗？

4

1 回答 1

1

所以我让它工作。这是我的做法。

  1. 设置 2 个 nuxt 示例应用程序
  2. 我使用添加到 package.json 的 vhost 模块设置 expressjs

这是 expressjs 的 server.js 的内容

const express = require('express')
var vhost = require('vhost')
const app = express()
const port = 3000

const appone = require('./app_one/server/index.js')
const apptwo = require('./app_two/server/index.js')

// app.get('/', (req, res) => res.send('Hello dear world, this is the host app to show vhost capabilities!'))
app
    .use(vhost('appone.com', appone))
    .use(vhost('apptwo.com', apptwo))
    .listen(3000);

// app.listen(port, () => console.log(`Example app listening on port ${port}!`))

  1. 使用以下命令使用 expressjs 服务器创建 2 个 nuxt

    npx create-nuxt-app <project-name>

  2. 编辑了两个应用程序中的 server/index.js 文件，删除了 app.listen 部分，因为我们已经在使用 expressjs server.js 文件监听所需的端口和主机。

这是两个应用程序的 index.js 文件。

const express = require("express");
const consola = require("consola");
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
  // port = 3005
  // app.listen(port, host)
  // consola.ready({
  //   message: \`Server listening on http://${host}:${port}\`,
  //   badge: true
  // })
}
start();
module.exports = app;

  1. 现在我去了每个特定于应用程序的文件夹并运行以下命令来构建文件

    npm run build

  2. 一旦这两个应用程序都完成了。我添加了使用 expressjs vhost 设置更改了应用程序的 package.json 文件。

我包含了我的子应用程序所需的模块，因为由于某种原因没有这些模块就无法工作。

{
  "name": "webclient_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "node-fetch": "^2.6.0",
    "nuxt": "^2.10.2",
    "vhost": "^3.0.2",
    "vue-meta": "^2.3.1"
  }
}
  1. 然后我更改了两个子应用程序中的 nuxt.config.js 文件以包含构建目录。我需要将构建目录更改为 expressjs 虚拟主机设置应用程序的相对路径。所以我将此配置选项添加为两个子应用程序配置文件中的最后一项。

对于第一个应用程序

buildDir: "app_one/.nuxt"

对于第二个应用程序。

buildDir: "app_two/.nuxt"
  1. 在此之后，我运行node server.js并且两个应用程序都可以从各自的域访问，即appone.com:3000没有apptwo.com:3000任何问题
于 2019-12-13T06:48:08.047 回答