如何在一台服务器上部署Node.js API和Vue.js应用程序

9
我已经开发了Node REST API和Vue.js Web应用程序,现在我正在尝试将这两个项目部署到一个运行Ubuntu的AWS服务器上。这两个应用程序具有不同的端口和域名,我希望配置api.example.com为API,example.com为Vue应用程序。我可以通过SSH运行这两个应用程序,但我需要它们一直运行。我的操作如下:
  1. 分别部署两个应用程序
  2. 应用程序可以通过端口访问
我希望能够访问以下网址:
  1. api.example.com
  2. example.com
请问我需要采取哪些步骤?是否需要更改host文件?

4
你需要一个反向代理,例如nginx或Amazon ELB。 - SLaks
我已经安装了nginx。 - Sampath
1
你需要配置它将每个域名转发到不同的端口。 - SLaks
感谢您接受我的答案。很高兴能够帮助到您。这是一个有趣的实验,让我弄清楚了它。 - Marvin WordWeaver Parsons
2个回答

12

我找到了一种不使用PM的方法来在同一台服务器上部署Vue应用和Express/Node.js。以下是我的做法:

  1. 使用npm run build命令构建您的Vue代码。这将创建一个名为dist的文件夹,其中应该包含index.html文件和static文件夹。
  2. dist文件夹复制到您的服务器代码存储库中。在我的情况下,我创建了一个名为public的文件夹,并将dist文件夹移动到public内部。
  3. 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处理。


4

这是我们如何在同一台服务器上运行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跟踪日志。


嗨,--name是什么? - noyruto88
我在运行这个命令时遇到了错误:sudo pm2 start npm run dev --name Vue --start | error: unknown option `--start'。 - noyruto88
startdev选项需要在./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
1
--name选项告诉PM2如何引用应用程序/服务,当您使用命令例如pm2 logs AppName或查看状态,例如pm2 list以查看由PM2管理的所有应用程序的简要概述时。 - Marvin WordWeaver Parsons
你在发送POST请求时,需要定义哪个URL才能访问API呢? - Miguel Stevens

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接