nginxについて。フロントとバックエンドで繋ぐ先を振り分ける方法が知りたいです。

Question

保留します

自己解決しそうなのですが、今、細かく書く余裕がないのであとで自己解決書きます！遅くとも月曜には書きます

何かヒントが欲しいです。

現状

reactとrails APIモードで開発をしています。apiには「ホスト名/api/v1」でアクセスできます。

現在、reactとrails APIのそれぞれに1つずつnginxを使っています。それをEC2に載せたのですが、nginx周りの設定が出来ておらずサイトにアクセスしてもエラーは出ないものの何も表示されない状態です。おそらくrailsの方にアクセスしているのかと思います。

問題

・現状railsにしかアクセスできていないこと
しかし、api/v1にアクセスしてもjsonが返ってこないのが気になります。

・nginxを二つ使って良いのかわからない。

実現したいこと

最終的には
http://ホスト名/api/v1にアクセスした時にはrails apiにそれ以外はreactに繋がるようにしたい。

考えたこと

①nginx二つでやるのが普通か。もしくは一つだけ使いnginxの設定で振り分けるのか。
ちょっと調べてみたところlocationというので繋ぐ先を振り分けることができるっぽいので後者かと考えました。

②分けるとした場合どうすれば良いのか。
①の考えが正しかったとしたら

1. nginxを1つにする
2. nginxの設定を1つにまとめる

具体的にはapiのルートが「ホスト/api/v1」なのでバックエンドへのアクセスを「location api/v1」としてフロントエンドのアクセスを「location /」で書く。

という作業を踏むことになると思うのですが、
現状、apiの方のnginxはupstreamというものを用いています。

このupstreamで定義したappをどう「location /api/vi」に置き換えれば良いのかがわからないです。

upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 80;
# =========ローカルと本番切り替え===========

  #server_name ~~~~~~~;
  server_name localhost;

# ======================================

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  root /app/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @app;
  keepalive_timeout 5;

  location @app {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://app;
  }
}

ちなみにフロントの方のnginxの設定はこうなっています。

server {
    listen       80;

    location / {
        root   /var/www;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

ご教示いただけたら幸いです。よろしくお願いします。

追記 nginxを一つにまとめてみました(local)

私が考えたことをローカルで実際に試してみたのですが、reactにしかアクセスできませんでした。reactはまだ一切いじってないので、どのルートにアクセスしてもreactのロゴが回るあの初期画面のままです。
以下の設定では/api/v1にアクセスされた時だけrailsに繋がるようにしたつもりなのですが。。。

改めましてどなたかご教示お願いします。よろしくお願いします！

upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 80;
# =========ローカルと本番切り替え===========

  #server_name 54.95.194.179;
  server_name localhost;

# ======================================

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  root /app/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @app;
  keepalive_timeout 5;

  location / {
      root   /var/www;
      index  index.html index.htm;
      try_files $uri /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
  location /api/v1 {
    location @app {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_pass http://app;
    }
  }
}

Answer 1

以下の設定では/api/v1にアクセスされた時だけrailsに繋がるようにしたつもりなのですが。。。

としたい場合は

location /api/v1 {

location @app {
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_pass http://app;
}

}

ではなく

  location /api/v1 {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_pass http://app;
  }

追記

・nginxを二つ使って良いのかわからない。

好きにすれば良いけど振り分け先が二カ所になるからという理由でnginxを二つ使うのは不適切な対応
今質問者が試している内容が正解

Answer 2

すいません。回答遅れてしまいました。

ポイントは今回、apiの方がサーバー内でしか使わないと言う点です。なのでserver_nameはlocalhostでいけました。

apiの方のconfig

upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 3000;

  server_name 127.0.0.1;


  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  root /app/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @app;
  keepalive_timeout 5;



  location @app {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://app;
  }

}

そして、ユーザーは基本frontの方に流れます。下記です。

その中でもし、api/v1へのアクセスがあればそれは先ほどのapiの方に流れます。この流す部分はlocation /api/v1により設定してます。

frontの方のconfig

server {
  listen 80;


  server_name ^^^^^^^^;

  root   /var/www;
  index  index.html index.htm;
  try_files $uri /index.html;

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
  location /api/v1 {
    proxy_pass http://127.0.0.1:3000;
  }
}