Deploy Yeoman full-stack app with Apache2 Reverse Proxy?

Question

I have a Yeoman full-stack app @2.0.13 with the exact same directory structure as in this tutorial.

Everything works fine - grunt serve:dist etc works without any errors. Now I want to go in production and deploy the app on a apache server as example.com/xxx using mod_proxy. I copy the grunt build generated /dist directory to a home directory and start up the server app :

NODE_ENV=production node server/app.js

The app starts up, populating users and so on. Everything works well. Now I setup virtual host settings for the node app :

<Location /html/xxx/>
  ProxyPass http://127.0.0.1:9000/
  ProxyPassReverse http://127.0.0.1:9000/
</Location>

This sort of works. The weird thing is, that index.html from the dist directory is loaded correct

  dist
    ├── public
    │   ├── app                 
    │   ├── assets              
    │   ├── bower_components          
    │   └─ index.html <---
    |
    └── server
        ├── api                 
        ├── auth                
        ├── components          
        ├── config              
        ├── views              
        ├─ app.js              
        └─ router.js

The proxyPass works, index.html is loaded - but the files index.html is referring to (the 4 assembled public/app files/ vendor.js, app.js and so on) is not. I get a 404 no matter what I have tried, no matter what setup from any guide I have tested

Have really spent many hours on this. To me it seems that the reverse proxy somehow alters the internal urls? The setup works if i replace dist/ with a node script that just listens on port 9000 and returns hello world.

What am I missing? Is there another way to do this?

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

So I was looking all over the place for quite some time as well but finally found this link:
Apache and Yeoman built NodeJS app on the Same Server... Virtual Hosts?
Which brought me on the right track, so I think what should fix it is to change the base tag in your header section of the index.hml file to:

    <base href="/xxx/">

And they should be accessible, at least for me.
My vhost settings look like this:

    <Proxy /xxx/*>
            Order deny,allow
            Allow from all
    </Proxy>

    ProxyPass /xxx http://127.0.0.1:6969/
    ProxyPassReverse /xxx http://127.0.0.1:6969/

edited May 23 '17 at 12:33

Community

1
1

answered Apr 02 '16 at 21:51

Brueni92

137
1
9

+1 for the idea; though have already played with that. As OP concludes in the question you are referring to, then he ends up with broken server scripts instead, also my experience, I believe the answer is in editing `Gruntfile.js` so grunt itself makes the paths correct in the build phase, but have not had the time yet to experiment with that. If I found a solution, then I post it. – davidkonrad Apr 03 '16 at 07:59
1

ok I got it to work now using the settings in the edited answer for me, so what happens if you install pm2 locally and run your app just on localhost/9000 on your machine locally, if it still does not work then, you can eliminate the apache proxy settings, If it does work however, then I do not think that grunt is messed up... – Brueni92 Apr 03 '16 at 11:07

davidkonrad · Accepted Answer · 2016-12-20T07:14:25.113

For anyone else having this problem I ended up using port 80. This works. In a node environment you not need or use a /www or apache / nginx anyway. So get rid of this and use

 // Server port
 port:     process.env.OPENSHIFT_NODEJS_PORT ||
           process.env.PORT ||
           80,

in the yeoman production.js file. Thats it. An entire application can be served from within a user home/ directory without installing any kind of server http software. Just upload dist to anywhere on your server and use forever to run :

sudo NODE_ENV=production forever start server/app.js

Deploy Yeoman full-stack app with Apache2 Reverse Proxy?

2 Answers2