Question

我今天遇到的问题与路由有关。我有两个主要代码：一个是前端，另一个是后端。

前端是使用 Vue.js 编写的，因此它是 SPA 。这个webapp很复杂，涉及很多路由和后端 AJAX API调用。

// All imports
import ...

loadMap(Highcharts);
loadDrilldown(Highcharts);
boost(Highcharts);

Vue.config.productionTip = false

Vue.use(VueCookie);
Vue.use(ElementUI, {locale});
Vue.use(VueRouter);
Vue.use(VueHighcharts, {Highcharts });
Vue.use(HighMaps);

// This is a global component declaration
Vue.component('app-oven', Devices);
Vue.component('app-sidebar', SideBar);
Vue.component('app-header', Header);
Vue.component('app-footer', Footer);
Vue.component('app-query', Query);
Vue.component('app-deviceproperties', DeviceProperties);
Vue.component('app-device', Device)
Vue.component('app-queryselection', QuerySelection)
Vue.component('app-index', Index)
Vue.component('app-index', Error)
Vue.component('app-realtime', RealTime);
Vue.component('app-login', Login)
Vue.component('app-preferences', Preferences)

const routes = [
  { path: '/index', component: Index},
  { path: '/', component: Login},
  { path: '/device/:deviceId', component: Device},
  { path: '/preferences', component: Preferences},
  { path: '*', component: Error}
];

const router = new VueRouter({
  routes: routes,
  mode: "history" // Gets rid of the # before the path
})

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})

后端是使用 Node.js 上的 Express 编写的，它可以回应来自前端 AJAX 调用>

// All imports import ... function prepareApp() { let app = new Express(); app.use(cors({ origin: "*", allowedHeaders: "Content-type", methods: "GET,POST,PUT,DELETE,OPTIONS" })); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.use(helmet()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})); // Get all parameters app.get('/params', params.parameters); // Get all devices ever seen on the databases app.get('/devices', params.devices); app.get('/organizeData', organizer.updateAll); // WebApp used services to access various things app.post('/customQuery', stats.query); app.post('/statistics', stats.statistics) app.post('/getUserInfo', stats.getUserInfo) app.post('/setUserInfo', stats.setUserInfo) app.post('/genericQuery', stats.genericQuery) app.post('/NOSQLQuery', stats.NOSQLQuery) // Users check and insertion app.get('/insertUser', stats.insertUser) app.post('/verifyUser', stats.verifyUser) app.get('/', errors.hello); // Returns a normal "hello" page app.get('*', errors.error404); // Catch 404 and forward to error handler app.use(errors.error); // Other errors handler return app; } let app = prepareApp(); //App listener on localhost:8080 app.listen(8080, () => { console.log("App listening on http://localhost:8080"); });

我在开发过程中只使用了这个设置，所以我在同时在localhost上运行，两者都有不同的端口。现在我想开始生产循环，但我不知道从哪里开始。

最重要的是，我正在将这两个应用程序部署到在外部服务器上运行的 V irtual M 机器上。它已经具有DNS关联和静态IP地址，因此已经涵盖。当我尝试在此生产计算机上同时运行两个程序时出现问题，因为它的开放端口只是端口 80 和端口 443 。我认为这在生产环境中非常正常，但我不知道如何调整我的应用程序，这样他们仍然可以相互通信并从数据库中检索有用的信息，同时仍然使用单个端口

我希望我能很好地解释这个问题。期待一个很好的（也许很长的）答案。

Answer 1

我建议在内部在端口3000上运行后端，并在80和443上监听nginx，并以＆＃39; / api＆＃39;开头代理网址。到3000并直接传送前端，因为它只是一堆静态文件。

这将是你的nginx配置。只需确保后端服务器有一些api前缀，如＆＃39; / api＆＃39;。使用＆＃39; npm run build＆＃39;构建您的vuejs应用程序并将文件夹复制到/ opt / frontend。

upstream backend {
    server 127.0.0.1:3000;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    location /api/ {
        proxy_pass         http://backend;
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
    }

    location / {
        root /opt/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

或者，您可以使用后端来托管前端。但是，像nginx这样的网络服务器在提供静态文件方面比后端api服务器更有效。

Answer 2

如果您无法打开更多端口，可以将前端构建到生产模式，然后将其index.html和dist文件夹放到nodejs应用程序所在的文件夹中。然后创建一个快速应用程序，监听端口80并发送HTML文件。

var express = require('express');
var app = express();
var path = require('path');
var dir = '//vm//path//here';

app.get('/', function(req, res) {
    res.sendFile(path.join(dir + '/index.html'));
});

app.listen(80);

Answer 3

在我的情况下，我的后端服务器未在群集模式下运行（例如与3001、3002 ...以及80端口一起运行）

我的案例：rails服务器与乘客一起运行（mydomain.com，80端口）我需要使用相同的域，相同的端口运行我的Vuejs项目。

因此，唯一的解决方案是在指定的URL中运行vue。

这是我的解决方案：

1。更改您的nginx配置。

http {
    # our backend app is passenger( rails server, running on 80 port)
    passenger_root /usr/local/rvm/gems/ruby-2.2.10/gems/passenger-6.0.0;
    passenger_ruby /usr/local/rvm/gems/ruby-2.2.10/wrappers/ruby;

    include       mime.types;
    default_type  application/octet-stream;

    server {
     listen 80;
     passenger_enabled on;
     # we are using this folder as the root of our backend app.
     root /mnt/web/php/public;
     charset utf-8;

     location ~ ^/(images|javascripts|stylesheets|upload|assets|video)/  {
       root /mnt/www/php/public;
       expires 30d;
       add_header Cache-Control public;
       add_header ETag "";
     }

     # vuejs related content
     location /vue.html {
       root   /mnt/web/vuejs/h5/dist;
     }
     location /static {
       root   /mnt/web/vuejs/h5/dist;
     }
    }
}

2。在vue项目的dist文件夹中：

$ mv index.html vue.html

3。应该根据nginx配置更改vuejs项目中所有请求的url。

在同一端口上运行前端和后端

3 个答案: