如何在一台服务器上部署 nodejs api 和 vuejs 应用程序
how to deploy nodejs api and vuejs app in one server
我开发过 node rest api 和 vuejs web 应用程序，
我正在尝试将这两个项目部署到一个 运行 ubuntu 的 aws 服务器中。
两个应用程序都有不同的端口，
domain 我尝试为 api 配置 api.example.com，为 vue app 配置 example.com。
在 SSH 中 运行 执行命令后，我可以 运行 这两个应用程序一次，但我需要它们永远 运行 它。
我做了什么，
- 单独部署到应用程序
- 应用可以通过端口访问
我需要他们访问
- api.example.com
- example.com
步骤是什么，
任何更改主机文件。
这就是我们从同一台服务器 运行 连接我们的 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 不是 运行ning）。
请注意，将 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 轻松跟踪日志。
我找到了另一种不使用 PM 在一台服务器上部署 vue 应用程序和 express/nodejs 的方法。这就是我所做的
- 使用
npm run build 命令构建你的 vue 代码。这将创建一个文件夹 dist，其中应包含 index.html 文件和 static 文件夹。
- 将
dist 文件夹复制到您的服务器代码存储库中。在我的例子中，我创建了一个文件夹 public 并将 dist 文件夹移动到 public.
在 app.js 文件中 module.exports=app 行之前，复制以下代码行
//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 处理。
我开发过 node rest api 和 vuejs web 应用程序， 我正在尝试将这两个项目部署到一个 运行 ubuntu 的 aws 服务器中。 两个应用程序都有不同的端口， domain 我尝试为 api 配置 api.example.com，为 vue app 配置 example.com。 在 SSH 中 运行 执行命令后，我可以 运行 这两个应用程序一次，但我需要它们永远 运行 它。 我做了什么，
- 单独部署到应用程序
- 应用可以通过端口访问
我需要他们访问
- api.example.com
- example.com
步骤是什么， 任何更改主机文件。
这就是我们从同一台服务器 运行 连接我们的 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 不是 运行ning）。
请注意，将 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 轻松跟踪日志。
我找到了另一种不使用 PM 在一台服务器上部署 vue 应用程序和 express/nodejs 的方法。这就是我所做的
- 使用
npm run build命令构建你的 vue 代码。这将创建一个文件夹dist，其中应包含index.html文件和static文件夹。 - 将
dist文件夹复制到您的服务器代码存储库中。在我的例子中，我创建了一个文件夹public并将dist文件夹移动到public. 在
app.js文件中module.exports=app行之前，复制以下代码行//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 处理。