Nginx 설정 단일 페이지 적용

지난 회 에 우 리 는 새로운 서버 에서 Nginx 로 전단 프로젝트 를 어떻게 시작 하 는 지 에 대해 이 야 기 했 지만 아직도 많은 결함 이 있다. 예 를 들 어 우 리 는 이 Nginx 에서 여러 프로젝트 를 어떻게 뛰 고 싶 은 지, spa 단일 페이지 프로젝트 에서 흔히 볼 수 있 는 공백 원인 과 처리 등 이 있 는데 이 편 은 일일이 소개 할 것 이다.
포트 다 중 항목 설정
만약 에 우리 가 두 개의 단일 페이지 프로젝트, 하나의 pc 홈 페이지, 하나의 mobile 홈 페이지 가 있다 고 가정 하면 우 리 는 모두 지난 8082 포트 에 달 려 가 고 싶 습 니 다. 이때 우리 가 지난 번 에 배치 한 폴 더 는 www 디 렉 터 리 에 직접 놓 여 있 는 것 을 발 견 했 습 니 다. 이것 은 안 됩 니 다. 파일 을 모두 여기에 놓 아 도 어떤 항목 의 것 인지 구분 할 수 없습니다. 만약 에 폴 더 나 파일 이름 이 같 으 면 덮어 씁 니 다.
그러면 두 가지 방안 이 있다.

각 클 리 어 비계 에는 출력 폴 더 의 설정 이 있 습 니 다. 예 를 들 어 vue - cli outputDir 는 폴 더 이름 을 설정 할 수 있 습 니 다.

ww 디 렉 터 리 에 해당 하 는 항목 의 폴 더 를 새로 만 들 고 scp 는 해당 폴 더 에 업로드 합 니 다.

여기 서 우 리 는 방안 1, 방안 2 가 유사 하고 경로 가 다 를 뿐이다.
패키지 설정 수정
우 리 는 같은 포트 에서 뛰 는 종목 이기 때문에 경 로 를 통 해 서로 다른 항목 을 구분 할 수 밖 에 없다.
예 를 들 어 우리 의 프로젝트 가 http://localhost:8082/mobile 에서 달리 면 vue - router 는 base 설정 을 추가 합 니 다.

new VueRouter({
  mode: 'history',
  base: '/mobile', // pc  
  ...
)}

물론 이 경로 값 을. env 파일 에 넣 는 것 을 권장 합 니 다. .env.dev:

BASE_URL=/mobile

설정 변경:

new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  ...
)}

// history: createWebHistory(process.env.BASE_URL) // 4.0+

vue.config.js：

module.exports = {
  publicPath: process.env.BASE_URL,  //                ，  '/mobile'，     js css   '/mobile/js/xxxx.js'
  outputDir: 'mobile', //            
  ...
}

프로젝트 포장 을 진행 하면 모 바 일 폴 더 를 얻 을 수 있 습 니 다. scp 를 사용 하여 파일 업로드 (pc 동 리)

scp -r ./mobile root@$host:~/nginx/www/;  #   mobile

Nginx 설정 수정

location /pc {
  alias   /usr/share/nginx/html/pc/;
  index  index.html;
}

location /mobile {
  alias   /usr/share/nginx/html/mobile/;
  index  index.html;
}

nginx 를 다시 시작 합 니 다. docker restart web 이때 방문 http://localhost:8082/mobile/ 하면 웹 페이지 가 정상적으로 열 릴 수 있 습 니 다. 그 당시 에 우리 가 방문 http://localhost:8082/mobile 했 을 때 이상 하 게 80 포트 로 재 설정 되 었 습 니 다. 즉, http://localhost/mobile/ 브 라 우 저 요청 을 살 펴 보 니 301 에 의 해 영구적 으로 재 설정 되 었 습 니 다.
이것 은 Nginx 가 URI 에 접근 할 때;접근 자원 이 하나의 디 렉 터 리 이 고 끝 에 / 가 없 으 면 Nginx 는 301 에서 끝 에 '/' 가 있 는 주 소 를 재 설정 합 니 다. 점프 할 때 port_in_redirec 를 통 해 점프 포트 번 호 를 설정 할 수 있 습 니 다. 없 으 면 listen 에서 80 을 가 져 옵 니 다. 그래서 여기 서 80 의 재 설정 을 했 습 니 다. 우 리 는 server 모듈 에 absolute_redirect off; 을 추가 할 수 있 습 니 다.이 방향 을 닫 습 니 다.
설정 후 Nginx 를 다시 시작 합 니 다. 저 희 는 http://localhost/mobile 과 http://localhost/pc 를 통 해 해당 항목 에 접근 할 수 있 습 니 다.
spa 단일 페이지 점프 리 셋 화이트 스크린
우 리 는 위 에서 여러 프로젝트 설정 을 했 지만 해결 되 지 않 은 문제 가 하나 더 있 습 니 다. 이 문 제 는 흔히 볼 수 있 습 니 다. 바로 뛰 어 넘 은 후에 새로 고침 하 는 백 스크린 문제 입 니 다. 많은 학생 들 이 hash 경로 에서 history 경로 로 전환 하지 못 하 는 것 도 이런 이유 가 있 습 니 다.
문 제 를 간단하게 설명 합 시다. 우 리 는 프로젝트 의 루트 주 소 를 직접 열 어서 정상 적 인 방문 을 합 니 다. 예 를 들 어 위의 http://localhost/mobile, 새로 고침 도 정상적으로 표 시 됩 니 다. 우 리 는 http://localhost/mobile/list 로 넘 어가 기 를 클릭 합 니 다. 이때 도 정상적으로 넘 어 갑 니 다. 그러나 우리 가 이 주 소 를 제자리 에서 새로 고침 할 때 404 오류 가 발생 하거나 브 라 우 저 로 직접 열기 http://localhost/mobile/list 도 404 가 발생 합 니 다.이 문 제 는 비교적 심각 한 편 입 니 다. 즉, 우리 가 직접 열거 나 새로 고 칠 수 있 는 것 은 루트 경로 뿐 이 고 다른 경로 에 404 문제 가 발생 할 수 있 습 니 다.
404 원인
우선, 우리 의 웹 페이지 방문 은 모두 get 요청 입 니 다. 정적 자원 을 얻 는 것 으로 이해 할 수 있 습 니 다. Nginx 의 location 설정 을 보 겠 습 니 다.

location /pc {
  alias   /usr/share/nginx/html/pc/;
  index  index.html;
}

우리 의 URI 주소 가 / pc 에 일치 하면 alias 의 경로 에서 찾 을 수 있 습 니 다. 기본 파일 은 index 명령 뒤의 index. html 를 찾 습 니 다. 예 를 들 어 우리 가 방문 http://localhost/mobile 할 때 정상적으로 접근 할 수 있 는 것 은 mobile 디 렉 터 리 에 index. html 라 는 실체 파일 이 있 기 때 문 입 니 다. 그러면 정상적으로 되 돌 아 왔 습 니 다. 방문 http://localhost/mobile/list 하면 Nginx 는 찾 습 니 다 mobile/list/index.html. 이것 이 없 는 것 이 분명 합 니 다.돌아오다
요약 하면 spa 의 길 은 js 에 의 해 생 성 되 고 해당 경로 의 실체 파일 이 없 으 며 Nginx 가 웹 페이지 를 방문 하 는 실체 자원 은 찾 지 못 하면 404 로 돌아 갑 니 다. 그러면 이 경 로 는 Nginx 에 의 해 처리 되 는 것 이 아니 라 우리 의 js 에 의 해 처리 되 는 것 입 니 다.그래서 우 리 는 Nginx 에서 경 로 를 찾 을 수 없 는 실체 파일 을 찾 을 때 우리 의 index. html 를 되 돌려 주면 됩 니 다.

location /pc {
  alias   /usr/share/nginx/html/pc/;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}

try_files 명령 은 뒤에 있 는 서 류 를 찾 아 찾 지 못 할 때 까지 순서대로 찾 습 니 다. $uri 는 원래 주소 입 니 다. $uri/ 는 $uri/index.html 이 고 나머지 는 /pc/index.html 입 니 다. 예 를 들 어 http://localhost/pc/aaa.png 먼저 찾 습 니 다 http://localhost/pc/aaa.png. 찾 지 못 하면 조회 http://localhost/pc/aaa.png/index.html, 마지막 은 http://localhost/pc/index.html 입 니 다.
ok, 이렇게 spa 화이트 스크린 문 제 는 해결 되 었 습 니 다. 그러나 또 하나의 작은 문제 가 있 습 니 다. 바로 우리 가 방문 하 는 경로 가 존재 하지 않 는 다 는 것 입 니 다. (spa - router 도 없 음) 경 로 는 Nginx 가 처리 하지 않 았 습 니 다. 그러면 이때 404 도 존재 하지 않 고 화이트 스크린 이 나타 날 것 입 니 다. 그러나 똑똑 한 동학 은 많은 router 가 마지막 에 404 페이지 와 일치 하 는 마스크 를 추가 할 것 이 라 고 생각 했 습 니 다.그럼 404 페이지 는 저희 가 직접 작성 하도록 하 겠 습 니 다.
루트 와 alias
이것 은 보충 이 라 고 할 수 있 습 니 다. root 와 alias 의 차 이 를 말 해 보 세 요. 왜냐하면 많은 배치 용 root 은 alias 에서 만 사용 할 수 있 고 location 은 root, http 에서 만 사용 할 수 있 습 니 다. server 에서 사용 할 수 있 습 니 다.
사실 location 과 root 는 모두 Nginx 가 파일 경 로 를 지정 하 는 명령 입 니 다. 위의 예 를 들 어:

# root
location /pc {
  root   /usr/share/nginx/html;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}
# alias
location /pc {
  alias   /usr/share/nginx/html/pc/;
  try_files $uri $uri/ /pc/index.html;
  index  index.html;
}

이 두 개의 일치 규칙 은 똑 같 습 니 다. 쉽게 말 하면 root 는 location 뒤에 설 정 된 경 로 를 추가 하고 alias 는 제거 합 니 다. 즉, 두 사람의 파일 경 로 는 모두 루트 디 렉 터 리 아래 alias 폴 더 를 가리 키 는 것 입 니 다. 즉, pc 를 사용 하 는 location 에 맞 는 경 로 는 실제 존재 해 야 합 니 다 (추가 되 었 기 때 문). 만약 root404 가 나 왔 습 니 다. path 디 렉 터 리 가 존재 하 는 지 확인 하 시 면 됩 니 다.
그러나 주의해 야 할 것 은 바로 alias 의 경로 끝 에 root 가 있어 야 한 다 는 것 이다. 여기 서 추가 하 든 안 하 든 문제 가 없 지만 이것 은 좋 은 습관 입 니 다. 유지 하 세 요. 그렇지 않 으 면 다음 과 같은 상황 에 부 딪 히 면 실 수 를 할 수 있 습 니 다.다음 예 를 들 어 각각 방문 / 하고 마지막 회 의 는 404:

location /image/ {
  alias   /usr/share/nginx/html/image/;
}
location /image {
  alias   /usr/share/nginx/html/image/;
}
location /image {
  alias   /usr/share/nginx/html/image;
}
location /image/ { #    404
  alias   /usr/share/nginx/html/image;
}

다음 편 은 Nginx 에 적용 되 는 한 페이지 의 로 딩 최적화 에 대해 소개 하 겠 습 니 다. 기대 하 세 요.
이번 시즌 업 데 이 트 는 주말 과 퇴근 시간 에 만 정리 되 며, 많은 콘 텐 츠 는 업데이트 가 느 릴 수 있 습 니 다. 도움 이 되 셨 으 면 좋 겠 습 니 다. 스타 나 좋아요 모음 집 많이 눌 러 주세요.
본문 주소: https://xuxin123.com/web/nginx-spa

Nginx 설정 단일 페이지 적용

좋은 웹페이지 즐겨찾기