web-dev-qa-db-fra.com

Séparez le frontend et le backend avec Heroku

J'ai une application, appelons-la derpshow, qui se compose de deux référentiels, un pour le frontend et un pour le backend. 

Je voudrais déployer ces derniers en utilisant Heroku, et de préférence sur le même domaine. J'aimerais également utiliser des pipelines distincts pour les deux parties, avec un environnement de transfert et de production pour chacune.

Est-il possible de faire fonctionner les deux applications sur le même domaine, de sorte que le client puisse appeler le serveur sur /api/*? Une autre option serait de servir le serveur sur api.derpshow.com et le client sur app.derpshow.com, mais cela complique quelque peu la sécurité.

Quelles sont les meilleures pratiques pour cela? L’interface étant simplement des fichiers statiques, elle pourrait même être servie à partir de S3 ou similaire, mais j’ai encore besoin des environnements de transfert, de production, de test automatique, etc.

Tout conseil est grandement appréciée!

herokudeployment
13
altschuler

Pour ce que vous essayez, vous devez utiliser un serveur Web pour servir du contenu statique et fournir un accès au conteneur (gunicorn, Tomcat, etc.) contenant votre application. C'est aussi la meilleure pratique.

Supposez que vous utilisez nginx en tant que serveur Web, car il est plus facile à installer. Le fichier de configuration Nginx ressemblerait à ceci

# Server definition for project A
server {
    listen             80;
    server_name        derpshow.com www.derpshow.com;

    location / {
        # Proxy to gUnicorn.
        proxy_pass             http://127.0.0.1:<projectA port>;
        # etc...
    }
}

# Server definition for project B
server {
    listen             80;
    server_name        api.derpshow.com www.api.derpshow.com;

    location / {
        # Proxy to gUnicorn on a different port.
        proxy_pass             http://127.0.0.1:<projectBg port>;
        allow   127.0.0.1;
        deny    all;
        # etc...
    }
}

Et c'est tout.

ANCIENNE RÉPONSE: Essayez d'utiliser nginx-buildpack il vous permet d'exécuter NGINX devant votre serveur d'applications sur Heroku. Ensuite, vous devez exécuter vos applications sur différents ports et configurer un port sur api.derpshow.com et un autre sur app.derpshow.com. Vous pouvez ensuite restreindre les appels vers api.derpshow.com uniquement à partir de localhost.

8
Jozef Dochan

Je voudrais juste contribuer à ce que j'ai récemment fait. J'ai eu un backend NodeJS w/Express et une vieille interface simple Bootstrap/Vanilla (utilisant seulement XMLHttpRequest pour communiquer). Pour connecter ces deux éléments, vous pouvez simplement dire à express de servir des fichiers statiques (c'est-à-dire de transmettre des requêtes à /index.html, /img/pic1.png), etc. 

Par exemple, pour indiquer à Express de servir les actifs dans le répertoire test_site1, procédez comme suit:

app.use(express.static('<any-directory>/test_site1'));

Un grand merci à cet article pour l’idée: https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/

Notez que toutes ces réponses semblent être des variantes de la fusion du code devant être servi par un serveur monolithique. 

La réponse de Jozef semble être l'ajout d'un serveur nginx complet au-dessus de tout (à la fois le front-end et le back-end) pour inverser les requêtes de proxy. 

Ma réponse consiste à laisser votre serveur principal traiter les demandes frontales; Je suis sûr qu’il existe également un moyen de laisser le serveur frontal traiter les demandes d’arrière-plan. 

0
information_interchange