Nginx 같은 도 메 인 이름 의 여러 Vue 항목 설정

Nginx 같은 도 메 인 이름 의 여러 Vue 항목 설정
nginx 설정 을 만 들 기 시 작 했 습 니 다. 저 는 파일 을 나 누 는 방식 으로 만 들 었 습 니 다.
우선 ngix. conf 파일 에 include 의 모든 설정 이 들 어 왔 습 니 다:

http {
	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	include /etc/nginx/mime.types;
	default_type application/octet-stream;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
	ssl_prefer_server_ciphers on;
	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
	gzip on;
	gzip_disable "msie6";
    
  
	include /etc/nginx/conf.d/*.conf; #    conf.d      conf      
}

그리고 conf. d 디 렉 터 리 에서 각 항목 에 대응 하 는 nginx 프로필 을 만 듭 니 다.
1. 다 중 포트 를 통 해 실현
이것 은 사실 매우 간단 합 니 다. 도 메 인 이름 이 다른 포트 로 서로 다른 항목 에 들 어가 면 nginx 가 해당 하 는 포트 를 감청 한 다음 에 해당 하 는 디 렉 터 리 를 지정 하면 됩 니 다. 코드 는 다음 과 같 습 니 다.
프로젝트 1 에 대해 서 는 기본 도 메 인 이름 으로 들 어가 고 싶 습 니 다. 즉, 80 포트 를 연결 하 는 것 입 니 다.

####   nginx    	

server {

        #    (      )
        listen 80;
        server_name xxx;

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
            root html;
        }

        location / {
            #        
            root /x/x/x/x/dist;
            index index.html;
        }
		
		location /** {
            #        
            root /x/x/x/x/dist;
            index index.html;
        }

		#          
        #         spi    ‘/api         ’
        #              ‘  id:    /api/xxx/xxx’
        
        location /api {

            #         

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #    (         )

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

프로젝트 2. 도 메 인 이름. com: 8081 과 같은 방식 으로 접근 하고 싶 습 니 다. 코드 는 다음 과 같 습 니 다.

	server {

        #    (      )
        listen 8081;
        server_name localhost;

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
            root html;
        }

        location / {
            #        
            root /x/x/x/x/dist;
            index index.html;
        }
		
		location /** {
            #        
            root /x/x/x/x/dist;
            index index.html;
        }

		#          
        #         spi    ‘/api         ’
        #              ‘  id:    /api/xxx/xxx’
        location /api {

            #         

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #    (         )

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

2. 같은 포트 와 도 메 인 이름 이 다른 디 렉 터 리 방식 으로 다른 항목 에 접근 합 니 다.
공중 번호 의 권한 리 셋 은 도 메 인 이름 을 검증 하 는 것 이기 때문에 포트 번호 가 작용 하지 않 기 때문에 현재 한 캠퍼스 상점 에는 세 개의 vue 프로젝트 가 있 는데 그것 이 바로 공중 번호 프론트, 백 스테이지 관리 시스템 웹 페이지, 배달 원 배 송 시스템 이다.
먼저 도 메 인 이름 의 기본 경로 에 접근 하 는 것 은 공중 번호 프론트 데스크 톱 프로젝트 입 니 다. 2 급 디 렉 터 리 를 통 해 배 송 시스템 에 위치 합 니 다. 우 리 는 다음 과 같이 설정 합 니 다.

	server {

        #    (      )
        listen 80;
        server_name senfancollege.com;
		#root /usr/local/www/;
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
            root html;
        }
    ##   ，        
		location / {
            #       
            alias /x/x/x/x/dist/;
            index index.html;
        }
    ##   ，    .com/YYY  
        location /YYY {
            #        
            alias  /x/x/x/x/dist/;
			try_files $uri $uri/ @router;
			index index.html;
        }
		#           
        #         spi    ‘/api         ’
        #              ‘  id:    /api/xxx/xxx’
        location /api {

            #         

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #    (         )

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

여기 서 나 는 서 류 를 배치 하지 않 았 으 니, 관심 있 는 학우 들 은 시험 해 볼 수 있다.
설정 파일 다시 불 러 오기 명령

service nginx reload