☰

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/ 아래에는 정적 디렉토리가 없습니다.

전자상거래 프로젝트의 소스코드는 다음과 같습니다. https://github.com/kaloraat/react-node-ecommerce

관련 정보