☰

nginxプロキシパスはルート位置でのみ機能します。

tag-icon • tag-icon nginx proxy
nginxプロキシパスはルート位置でのみ機能します。

vps内でNode jsアプリケーションを実行しています。

これは私のnginx設定です。

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location /ecapp/ {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

localhost:8000/apimongodb atlasを使用するバックエンドサーバー。 Postmanを使用してリクエストを送信してこれを確認しました。

localhost:3000フロントエンドアプリケーションです。

フロントエンドアプリケーションは、次の場合に私のvpsのパブリックIPを介してのみ実行できます。

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location / {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

/あなたが好きな場所以外の場所は動作しません/ecapp/。場所/職場のみ。

http://my_vps_ip/私はこれ以外の方法でフロントエンドアプリケーションにアクセスしたいと思いますhttp://my_vps_ip/ecapp。

助けてくれてありがとう。

答え1

私はそれを見つけたので、ここに解決策を投稿しています。

目的

create-react-appサイトはhttp://my_public_vps_addr:port/sub_pathでホストされています。

プログラム

  1. .envファイルで：a）NODE_ENV = productを設定します。 b) PUBLIC_URL を http://my_public_vps_addr:port/sub_path に設定します。
  2. デフォルト名の設定：<Router basename=’/sub_path’></Router>
  3. npm run build a) これにより、build/ ディレクトリに静的ファイルが生成されます。
  4. build/* 内容を /var/www/sub_path/html/sub_path/ にコピーします。
  5. /var/www/sub_path/html/ cd a) sudo find . -type d -exec chmod 755 {} \; b)sudo find . -type f -exec chmod 644 {} \;
  6. touch /etc/nginx/sites-available/sub_path a) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. /etc/nginx/sites-available/sub_pathの内容
    server {
      listen port;
      listen [::]:port;
      root /var/www/sub_path/html;
      index index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      location /sub_path {
        try_files $uri $uri/ /index.html =404
      }
    }
  1. nginxサービスを再起動します。 a) sudo systemctl restart nginx.service
  2. あなたのウェブサイトはhttp://my_public_vps_addr:port/sub_pathからアクセスできる必要があります。
  3. それだけです！

答え2

場所を/ecapp/に設定してhttp://my_vps_ip/ecappをロードしてコンソールを確認すると、次の結果が表示されます。

GET http://my_public_vps_addr/static/js/bundle.js
GET http://my_public_vps_addr/static/js/0.chunk.js
GET http://my_public_vps_addr/static/js/main.chunk.js
Loading failed for the <script> with source “http://my_vps_public_ip/static/js/bundle.js”.
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/0.chunk.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/main.chunk.js”. ecapp:30:1

静的ファイルを見つけるのはなぜですか？ /var/www/html/ の下に静的ディレクトリはありません。

eコマースプロジェクトのソースコードは次のとおりです。 https://github.com/kaloraat/react-node-ecommerce

関連情報