how to deploy angular plus rails on nginx? - ruby-on-rails

Question

I am trying to configure my NGINX, I ham hosting both the Angular and the Rails server on the same instance and would like to know how to get them to work together on the same server. I have alreadt
My NGINX conf file:
#rails config
server {
listen 3000;
server_name www.mysite.com;
root /var/www/mysite/public;
try_files $uri #app;
location #app {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://mysite_prod;
proxy_intercept_errors on;
}
error_page 500 502 504 /500.html;
error_page 503 /503.html;
error_page 404 /404.html;
client_max_body_size 4G;
keepalive_timeout 10;
}
#angular config
server {
listen 80;
listen [::]:80;
server_name www.mysite.com;
root /var/www/my_app/dist;
server_tokens off;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html =404;
}
}
In my rails application, I have addded the IP to the Origins file
config/application.rb
config.middleware.insert_before 0, "Rack::Cors" do
allow do
origins 'localhost:3000', 'www.mysite.com', 'localhost:4200',
resource '*',
headers: :any,
expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
methods: [:get, :post, :options, :put]
end
end
I get a cors error and the front end is unable to talk to the back end.
Error - 'has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value '
How do I get this to work?

Answer 1

I think you should not have two servers running. Only the Rails app should run and Angular app should just be the index.html file that the rails app serves.
Build the Angular app for distribution and replace the Rails' index file with the Angular app build artifacts. One you get this working look for options that enables you to perform this manual steps automatically.

Answer 2

Could not find too much in terms of documentation online for this combination on angular-rails-nginx. Figured it out based on similar apps people had built for react-rails-nginx. Finally this is what worked for me. Did not have any CORS issues etc.
nginx.conf
server {
listen 80;
listen [::]:80;
server_name mysite.com;
root /var/www/my_angular_app/dist;
server_tokens off;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html =404;
}
location /api {
root /var/www/my_app/public;
proxy_pass http://my_app_prod;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
}
Of course, this also means that all the api calls to the rails back-end should go through the route '/api/xxx' so nginx knows it has to route it to the rails app without having to host it on a different port.