AngularJS and Rails Applications on Same Domain
Running different technologies stack on the same domain
“We are stuck!!!” — One of team member shouts.
Let me share some background behind this,
we are in development where the entire system is developed using AngularJS except Content Management System(CMS) module. We are developing a CMS module in Ruby On Rails.
Now, we started to draft planning of release architecture — Question arises
“How we can run both systems on same domain”.
One of the options is to do it by using sub-domain. We have experience doing the same in past like, AngularJS will be “example.com” and CMS will be “cms.example.com”
But, here we wanted to do it on the same domain (differentiated by access URL path) — So how it is done? Here it is,
server {
listen 80 default_server;
listen [::]:80 default_server;root /var/www/html/ab-cd-ui;index index.html index.htm index.nginx-debian.html;server_name abcd-staging.com;
return 302 https://$server_name$request_uri;location / {
try_files $uri $uri/ /index.html;
}location ~* /amp-cms {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://abcd-staging.com:8080/$uri$is_args$args;alias /var/www/html/amp-cms/current/public;
passenger_enabled on;
passenger_app_env production;
passenger_min_instances 3;
}
}
Now let's see what we have done here,
We are listing on port 80. We have used “location” to set different configurations.
Syntax:
location [ = | ~ | ~* | ^~ ] uri { ... }location @name { ... }
Sets configuration depending on a request URI.The matching is performed against a normalized URI, after decoding the text encoded in the “
%XX” form, resolving references to relative path components “.” and “..”, and possible compression of two or more adjacent slashes into a single slash.A location can either be defined by a prefix string, or by a regular expression. Regular expressions are specified with the preceding “
~*” modifier (for case-insensitive matching), or the “~” modifier (for case-sensitive matching). To find location matching a given request, nginx first checks locations defined using the prefix strings (prefix locations). Among them, the location with the longest matching prefix is selected and remembered. Then regular expressions are checked, in the order of their appearance in the configuration file. The search of regular expressions terminates on the first match, and the corresponding configuration is used. If no match with a regular expression is found then the configuration of the prefix location remembered earlier is used.
locationblocks can be nested, with some exceptions mentioned below.
Settings above allowed us to run both systems using the following,
URL contains “/amp-cms/” then it will be handled by a passenger through nginx else nginx will handle the request from a user.
Example: www.example.com/amp-cms/somepage — passenger(Rails)
This was the solution we found and worked for us.
I would love to hear your solutions — Please share in comments below.
Thanks for reading. Happy coding!! 😄
P.S. links for references
