質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ドメイン

ドメインとは本来、領域や範囲の意味を持ち、インターネット上では特定の部分領域を指します。ネットワークやコンピュータの識別に利用され、所得することでホームページを公開したり、メールアドレスを作成できます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2456閲覧

Nginxでドメインを設定してReact × ExpressのWebサービスに飛ばしたい

usawb

総合スコア26

ドメイン

ドメインとは本来、領域や範囲の意味を持ち、インターネット上では特定の部分領域を指します。ネットワークやコンピュータの識別に利用され、所得することでホームページを公開したり、メールアドレスを作成できます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/11/16 16:42

編集2019/11/19 12:27

【開発環境】

  • ローカル開発環境(Centos7)
  • バックエンド(Express)
  • フロント(React)

現在上記の内容でWebサイトの開発を行っています。
バックエンド http://localhost:5000
フロント http://localhost:3000
を同時に立ち上げて、フロントからバックエンドのAPIを取得しています。

WebサーバーにNginxを使用し、特定のドメイン(hosts登録)してそのドメインでアクセスしたときに http://localhost:3000に飛ばしたいと考えています。

Nginx側で下記の用に設定を行っても上手くいかず、また参考になるサイトもあまりなく原因もわかりません。

[/etc/nginx/conf.d/coodig_http.conf] upstream coodig.com { server 192.168.33.11:3000; } server { charset utf-8; listen 80; server_name coodig.com; root /home/vagrant/public_html/react-test/client/public/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; add_header "Access-Control-Allow-Credentials" "true"; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "X-Frame-Options" "SAMEORIGIN"; location / { proxy_pass http://coodig.com; }

ちなみにNginx側でhttp://localhost:5000に飛ばすことはできました。
こちらの内容が分かる人はぜひ教えていただきたいです。
よろしくお願いいたします。

【追記】

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maai

2019/11/17 05:55

> ちなみにNginx側でhttp://localhost:5000に飛ばすことはできました。 貼り付けられたコードの192.168.33.11:3000 の 3000 を 5000 に変えたら動くということでしょうか
usawb

2019/11/17 07:44

そうです! 5000に変えると、Express側の方には指定したドメインでアクセスできるようになりますが、 React側の3000にはアクセスできない状況です、、、。
maai

2019/11/18 13:49

アクセスできないとの事なので502 bad gatewayと考えていましたが、nginxの画面ですか?
usawb

2019/11/19 12:29

上記の画像のように、ステータスコードが200でアクセスは成功しているのですが、画面に「Invalid Host header」と表示されてWebサイトが表示されていない状況です。 どこかでアクセスの制限がかかっているのでしょうか( T o T )
guest

回答1

0

ベストアンサー

root /home/vagrant/public_html/react-test/client/public/;

この行を消すとどうなりますか…?(rootとproxy_passを同時に指定するとどうなるのか自分はよく知らないです)

投稿2019/11/18 13:49

maai

総合スコア463

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2019/11/19 12:37 編集

``` upstream coodig.com { server 192.168.33.11:3000; } server { charset utf-8; listen 80; server_name coodig.com; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; add_header "Access-Control-Allow-Credentials" "true"; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "X-Frame-Options" "SAMEORIGIN"; location / { proxy_pass http://coodig.com/; } } ``` 上記の内容で実行しましたが、無理でした、、、。
usawb

2019/11/20 13:39 編集

かしこまりました。 一度その方法でやってみて、それでも無理なようでしたら再度改めて質問を立てたいと思います。 親身になって答えていただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問