how to deploy angular plus rails on nginx?

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?

Lilylakshi · Accepted Answer · 2019-09-22 14:12:58Z

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.

answered Sep 22, 2019 at 14:12

Lilylakshi

7457 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Venomoustoad Over a year ago

Thanks, yes, I worked on these lines and found a solution based on similar apps that people have worked with react. Just could not find any documentation online for angular.

Venomoustoad · Accepted Answer · 2019-09-23 06:51:59Z

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.

Collectives™ on Stack Overflow

how to deploy angular plus rails on nginx?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related