Question

我正在学习Vue.js，从基本模板vue init webpack my-project开始，我希望有一个后端运行。

前端是使用webpack启动的，但我的server.js文件必须使用node server.js单独启动。我怎么能一起开始呢？

我搜索了一些基本的例子，但很难找到。

目前我在package.json这个：

{
  "scripts": {
    "client": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "server": "nodemon src/server/server.js --exec babel-node"
  },
  // ...
}

这很好，但客户端和服务器在不同的端口上运行。在生产应用程序上，我只需要使用一个端口。

怎么可能？

Answer 1

尝试PM2

PM2是一个用于启动，停止和监控Node JS应用程序的流程管理工具。

阅读本指南如何同时运行Express和Webpack Dev Server。

Simultaneously Running Express and Webpack Dev Server

Answer 2

这有点意见但是;理想情况下，您的前端和后端应分开存在。但是，如果您发现组合代码库更容易启动另一个代码库，您可以考虑利用webpack-dev-middleware。

当您说您有单独的server.js文件时，听起来您希望能够将其他中间件挂在webpack设置的服务器上。 webpack-dev-middleware公开一个服务器，让你挂起你想要的任何中间件，这意味着1个服务器而不是2个节点实例。

我之前尝试过这样做，但是我遇到的主要问题是，如果我对我的实际服务器进行了更改，我需要重新启动webpack，这可能需要一段时间才能实际启动，但是每当热时都要快得多由于整个过程没有不断重启，因此使用重新加载。

请注意，除非您使用类似nuxt之类的东西，否则在运行npm build后，您的前端将只是静态内容。您不会在生产中运行webpack。

Answer 3

在生产环境中

这是我通常的部署策略

我使用Nginx作为静态Web服务器和HTTP代理

我使用pm2来管理节点API

PM2是一款出色的流程管理工具，具有多种功能

所以你需要的是构建（可能是npm run build）你的vue js 然后，您将获得静态资产dist / build文件夹仅包含index.html作为入口点的静态内容

使用pm2启动节点服务器，如下所示

pm2 start server.js --name='api'

以下是代理节点API并提供其在/etc/nginx/sites-available/default

处找到的静态内容的示例Nginx配置

server {
    listen *:80;

    server_name localhost; ## could be  www.yourdomain.com

    location / {
          root /home/me/myapp/dist; # your app build path
          try_files $uri index.html;
      }
    location /api {
        proxy_pass http://localhost:5678/api;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 600000;
        proxy_send_timeout 600000;
        proxy_read_timeout 600000;
        send_timeout 600000;

        gzip on;
        gzip_proxied any;
        gzip_types
            application/json;

    }

所以你基本上得到的是你的Vue应用程序在80端口的默认值你不必指定端口，你的API将在/ api 您的vue应用将位于 youdomain.com 和API处于的 youdomain.com/api

在开发环境中

我通常不介意启动我的API并使用两个命令前端。我在一个单独的终端中启动它们来单独调试和开发。

if you really care about starting them in the single command

您可以在package.json
中创建一个新命令
"start":"npm run server && npm run client"

如何使用Node运行后端服务器？

3 个答案: