如何在一台服务器上部署 nodejs api 和 vuejs 应用程序

Posted 2023-02-22

【中文标题】如何在一台服务器上部署 nodejs api 和 vuejs 应用程序

【英文标题】：how to deploy nodejs api and vuejs app in one server

【发布时间】：2019-02-21 11:43:24

【问题描述】：

我已经开发了 node rest api 和 vuejs web 应用程序， 我试图将这两个项目部署到一个运行 ubuntu 的 aws 服务器上。 两个应用程序都有不同的端口， 域我尝试为 api 配置 api.example.com 为 vue 应用程序配置 example.com。 在 SSH 中运行命令后，我可以运行这两个应用程序一次，但我需要它们永远运行它。 我做了什么，

单独部署到应用程序 应用可以通过端口访问

我需要他们访问

api.example.com example.com

步骤是什么， 任何更改主机文件。

【问题讨论】：

你需要一个反向代理，比如 nginx 或 Amazon ELB。

我已经安装了nginx，

您需要将其配置为将每个域转发到不同的端口。

感谢您接受我的回答。很高兴我能帮忙。弄明白这是一个有趣的实验。

【参考方案1】：

我找到了另一种在不使用 PM 的情况下在一个服务器中部署 vue app 和 express/nodejs 的方法。这是我做的

使用npm run build 命令构建您的vue 代码。这将创建一个文件夹dist，其中应该有index.html 文件和static 文件夹。 将dist 文件夹复制到您的服务器代码存储库中。在我的例子中，我创建了一个文件夹 public 并将 dist 文件夹移动到 public 中。

在module.exports=app 行之前的app.js 文件中，复制以下代码行

//These 2 lines make sure that vue and express app are coming from the same server. 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 文件夹可访问，第二行将在您运行节点服务器时提供index.html 文件。组件之间的路由将由 vue 负责。

【参考方案2】：

这就是我们在同一台服务器上运行 VueJS UI 和 ExpressJS REST API 的方式。

我们正在使用PM2 管理我们的服务。

VueJS（开发环境，您可以将相同的设置添加到生产环境中）

在package.json 中，将"start": "HOST='0.0.0.0' PORT=80 npm run dev", 添加到"scripts": .. 数组中，其中80 是VueJS 正在侦听的端口。然后，在安装 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 以及 pm2 logs APPNAME --lines 100 轻松跟踪日志。

【讨论】：

嗨，--name 是什么？

运行此命令时出错：sudo pm2 start npm run dev --name Vue --start |错误：未知选项`--start'

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"

--name 选项告诉 PM2 在您使用诸如pm2 logs AppName 之类的命令或查看诸如pm2 list 之类的状态以查看所有应用程序的简要概述时如何引用应用程序/服务由 PM2 管理。

那么您在 POST 请求中定义哪个 url 以访问 API？