nginx 도메인 간 문제를 해결하는 방법

프런트엔드와 백엔드를 분리하고, nginx를 사용하여 도메인 간 문제를 해결하세요.

프런트엔드: vue.js+nodejs+webpack

백엔드: springboot

역방향 프록시 서버: nginx

아이디어: 프론트엔드 패키지 -end 코드를 사용하고 nginx가 정적 리소스를 가리키도록 합니다.

1. 프런트 엔드 코드를 패키징합니다.

npm run build

는 dist 폴더를 생성합니다. index.html 파일과 정적 폴더가 포함되어 있습니다. 내 로컬 경로를 예로 들어 보겠습니다.

/users/xxx/ideaprojects/webtest/dist

2.

/usr/local/etc/nginx 디렉터리를 엽니다. nginx.conf, 서버에 다음 추가 /1 , 실제 액세스는 http://localhost:8080/demo/1입니다.

백그라운드로 직접 요청 보내기: http://localhost/api/demo/1 방문, 실제 방문: http://localhost:8080/demo/1콘텐츠 확장에 대한 생각:

# 프록시 서버 인터페이스

listen  80; #原为8080，避免冲突，更改为80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /users/xxx/ideaprojects/webtest/dist;

   index index.html;

    

   # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  # 代理服务端接口

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

2).js는 위와 같이 요청됩니다. nginx는 위와 같이 구성되지만 요청 오류는 http://148.70.110.87/api/index2 404(찾을 수 없음)

location /api/ {
proxy_pass http://localhost:8080/;# 代理接口地址
}

위 내용은 nginx 도메인 간 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!