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

Question

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

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

我需要他们访问

1. api.example.com
2. example.com

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

Answer 1

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

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

3. 在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 负责。

Answer 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 轻松跟踪日志。