- 分别部署两个应用程序
- 应用程序可以通过端口访问
- api.example.com
- example.com
我找到了一种不使用PM的方法来在同一台服务器上部署Vue应用和Express/Node.js。以下是我的做法:
npm run build
命令构建您的Vue代码。这将创建一个名为dist
的文件夹,其中应该包含index.html
文件和static
文件夹。dist
文件夹复制到您的服务器代码存储库中。在我的情况下,我创建了一个名为public
的文件夹,并将dist
文件夹移动到public
内部。在app.js
文件中,在module.exports=app
行之前,复制以下代码:
// 这两行代码确保Vue和Express应用程序来自同一服务器。
app.use('/static', express.static(path.join(__dirname, "../public/dist/static/")));
app.get('/', function(req,res) {
res.sendFile('index.html', { root: path.join(__dirname, '../public/dist/') });
});
第一行代码确保/static
文件夹可访问,第二行代码将在运行Node服务器时提供index.html
文件。组件之间的路由将由Vue处理。
这是我们如何在同一台服务器上运行VueJS UI和ExpressJS REST API。
我们使用PM2管理我们的服务。
VueJS(开发环境,您可以将相同的设置添加到生产环境)
在package.json
中添加"start": "HOST='0.0.0.0' PORT=80 npm run dev"
,其中80是VueJS侦听的端口,添加到"scripts": {..}
数组中。然后,在安装PM2之后,(对于开发环境),我们可以通过cd /location/of/vue/root; sudo pm2 start npm run dev --name Vue -- start
来启动VueJS。(请确保没有运行Apache)。
请注意,将HOST设置为0.0.0.0很重要。不要将其设置为localhost或服务器IP地址,否则可能会遇到问题。
ExpressJS
在/ location/of/express/app.js
中添加类似以下内容到文件底部: app.listen(process.env.PORT || 8081)
,其中8081是您的REST API应侦听的端口。然后我可以通过sudo pm2 start / location/of/express/app.js --name Express
来启动它。
此时,VueJS应该在www.example.com(隐含端口80)上可用,而REST API则应在www.example.com:8081上可用。
如果您想让api.example.com/指向API,则需要确保您的DNS将“api”子域指向所需的端口,否则您可能必须像上面那样将端口添加到URL中。
此外,您还可以使用pm2 logs APPNAME --lines 100
轻松地通过PM2跟踪日志。
start
和dev
选项需要在./package.json
文件的scripts
数组中定义。 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "HOST='0.0.0.0' PORT=80 npm run dev" }
- Marvin WordWeaver Parsons--name
选项告诉PM2如何引用应用程序/服务,当您使用命令例如pm2 logs AppName
或查看状态,例如pm2 list
以查看由PM2管理的所有应用程序的简要概述时。 - Marvin WordWeaver Parsons