如何使用 expressjs 虚拟主机功能 运行 多个 nuxt 实例
How to run multiple nuxt instances using expressjs vhost feature
我正在尝试 运行 2 个或更多使用 expressjs 及其虚拟主机功能的 nuxt 应用程序。我的目标是 运行 在一个端口中将多个 nuxt 应用程序分配给不同的域。
这是我试过的。
- 我设置了 2 个 nuxt 示例应用程序
- 我在 package.json
中添加了 vhost 模块来设置 expressjs
这里是server.js for expressjs
的内容
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);
然后我在两个应用程序的服务器目录下添加了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 加载网页并停在那里。控制台内没有错误或消息。我被困在这一点上,有人可以帮助我吗?
所以我成功了。这是我的做法。
- 设置 2 个 nuxt 示例应用程序
- 我在 package.json
中添加了 vhost 模块来设置 expressjs
这里是server.js for expressjs
的内容
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}!`))
使用以下命令使用 expressjs 服务器创建了 2 个 nuxt
npx create-nuxt-app <project-name>
编辑了两个应用程序中的 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;
现在我转到每个特定于应用程序的文件夹,然后我 运行 下面的命令来构建文件
npm run build
- 完成这两个应用程序后。我添加了更改应用程序的 package.json 文件,并设置了 expressjs vhost。
我包含了我的子应用程序所需的模块,因为出于某种原因,没有这些模块它就无法工作。
{
"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"
}
}
- 然后我更改了两个子应用程序的 nuxt.config.js 文件以包含构建目录。我需要将构建目录更改为 expressjs vhost 安装应用程序的相对路径。所以我将这个配置选项添加为两个子应用程序配置文件中的最后一项。
对于第一个应用程序
buildDir: "app_one/.nuxt"
对于第二个应用程序。
buildDir: "app_two/.nuxt"
- 在此之后,我 运行
node server.js
并且可以从各自的域访问这两个应用程序,即 appone.com:3000
和 apptwo.com:3000
,没有任何问题
我正在尝试 运行 2 个或更多使用 expressjs 及其虚拟主机功能的 nuxt 应用程序。我的目标是 运行 在一个端口中将多个 nuxt 应用程序分配给不同的域。
这是我试过的。
- 我设置了 2 个 nuxt 示例应用程序
- 我在 package.json 中添加了 vhost 模块来设置 expressjs
这里是server.js for expressjs
的内容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);
然后我在两个应用程序的服务器目录下添加了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 加载网页并停在那里。控制台内没有错误或消息。我被困在这一点上,有人可以帮助我吗?
所以我成功了。这是我的做法。
- 设置 2 个 nuxt 示例应用程序
- 我在 package.json 中添加了 vhost 模块来设置 expressjs
这里是server.js for expressjs
的内容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}!`))
使用以下命令使用 expressjs 服务器创建了 2 个 nuxt
npx create-nuxt-app <project-name>
编辑了两个应用程序中的 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;
现在我转到每个特定于应用程序的文件夹,然后我 运行 下面的命令来构建文件
npm run build
- 完成这两个应用程序后。我添加了更改应用程序的 package.json 文件,并设置了 expressjs vhost。
我包含了我的子应用程序所需的模块,因为出于某种原因,没有这些模块它就无法工作。
{
"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"
}
}
- 然后我更改了两个子应用程序的 nuxt.config.js 文件以包含构建目录。我需要将构建目录更改为 expressjs vhost 安装应用程序的相对路径。所以我将这个配置选项添加为两个子应用程序配置文件中的最后一项。
对于第一个应用程序
buildDir: "app_one/.nuxt"
对于第二个应用程序。
buildDir: "app_two/.nuxt"
- 在此之后,我 运行
node server.js
并且可以从各自的域访问这两个应用程序,即appone.com:3000
和apptwo.com:3000
,没有任何问题