How to deploy backend and frontend projects if they are separate?

I am developing a web application with a small team, and after researching and studying a bit we discovered it is a good practice to separate back-end and front-end projects. So we will develop the back-end as a REST API with hapijs and mysql database, and the front-end using angularjs.

But in the production environment they must be at the same server, right? How do we deploy them to the same server if they are in separate repositories?

We are a fairly new team, starting our adventures in web development, so we are studying a lot to get things right.

Our technology stack will be:

Hapijs for the webserver

sequelize for orm

socket.io for chat functions

mocha for unit testing

angularjs for frontend

We will use microsoft azure for hosting our web app.

Thank You for the answers and help.

---

They don't have to be in the same server. It is perfectly fine to have the backend in a different server, it is also handy if you need to scale your backend/frontend but not the other.

There are a few possibilities:

You could use a message broker like RabbitMQ to communicate between the two micro-services

Your frontend app could expose the url of your backend and you use that in your AJAX requests, this requires your backend to enable CORS. Not a fan of this approach.

Use relative urls in your frontend and then pipe the requests with a particular pattern (like /api/*) to your backend. Is your AngularJs app served by a Node.js server or is it a Hapi.js server too? If Node.js something like

:

app.all(['/api/*', '/fe/*'], function(req, res) {
    console.log('[' + req.method + ']: ' + PROXY + req.url);
    req.pipe(request({
        url: PROXY + req.url,
        method: req.method,
        body: req.body,
        rejectUnauthorized: false,
        withCredentials: true
    }))
    .on('error', function(e) {
        res.status(500).send(e);
    })
    .pipe(res);
});

Where PROXY_URL is the url/ip of your backend server. Haven't done it in hapi.js but it should also be possible.

I'm sure there are more options, those are the ones I'm familiar with.

---

As you guys are starting out now I think you can handle this by creating two server instances with hapi. This addresses your requirement to have only one server in production:

const server = new Hapi.Server();
server.connection({ port: 80, labels: 'front-end' });
server.connection({ port: 8080, labels: 'api' });

This is really easy to implement, however, it comes with a downside: you need to accept down time form both the client and server app whenever you rollout updates.

You can find more info in this post: https://futurestud.io/blog/hapi-how-to-run-separate-frontend-and-backend-servers-within-one-project

In regards to deployment, whatever you use to build a release (continuous integration tools, manual scripts, etc.) can be git pushed to azure: https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control. For instance, a manual script would fetch your code from the two separate repositories (front-end and back-end), copy the relevant files, update config values and push the end result to git.

链接地址: http://www.djcxy.com/p/78192.html

上一篇: 如何部署分离的前端和后端？

下一篇: 如果将后端和前端项目分开，如何部署？