Ant Design + nginx 배치

1. build Ant Design 프로젝트

npm run build

build 에 성공 하면 프로젝트 경로 아래 dist 디 렉 터 리 를 생 성 합 니 다. 이 디 렉 터 리 아래 는 정적 파일 입 니 다.
2. 원 격 ubuntu 서버 에 배치 파일 업로드
저 는 아 리 클 라 우 드 ECS 의 ubuntu 서버 를 사용 합 니 다.
2.1 dist 디 렉 터 리 를 zip 로 압축 하여 scp 명령 을 통 해 ubuntu 지정 디 렉 터 리 에 업로드 합 니 다.

scp /Users/AC/code/netx-web-ui/dist.zip [email protected].*.*:/data/netx-web-ui/dist.zip 

이 명령 을 실행 하면 서버 의 로그 인 비밀 번 호 를 입력 하 라 고 알려 줍 니 다.제 서버 IP 가 * 번 호 를 쳤 습 니 다. 독자 서버 의 IP 로 바 꿔 주세요.
2.2 ssh 를 통 해 원 격 ubuntu 서버 에 로그 인

ssh [email protected].*.*

로그 인 비밀 번 호 를 입력 하여 로그 인 합 니 다.
2.3 아까 dist. zip 을 놓 은 디 렉 터 리 에 들 어가 dist. zip 를 압축 해제 합 니 다.

cd /data/netx-web-ui

unzip dist.zip

알림 에 unzip 명령 이 없 으 면 알림 에 따라 unzip 을 먼저 설치 합 니 다.
설정 nginx
nginx 설치 절 차 를 생략 하고 독자 스스로 nginx 설 치 를 완성 합 니 다.

server {
    listen     16667;

    root /data/netx-web-ui/dist;

    location / { 
        root /data/netx-web-ui/dist;
        index index.html;
    }                                                                                                             
} 

112.74.: / 16667 을 방문 하면 로그 인 페이지 를 볼 수 있 습 니 다.사용 하 는 아 리 운 이 라면 먼저 안전 팀 에 가서 16667 포트 를 개방 해 야 합 니 다.
4. 리 셋 404 문제 해결
새로 고침 404 가 나 왔 습 니 다. 이것 은 웹 단일 페이지 개발 모델 로 인 한 것 입 니 다.현재 주류 의 전단 프레임 워 크 는 기본적으로 단일 페이지 이다.예 를 들 어 react, vue 등.
한 페이지 는 쉽게 말 하면 모든 자원 경 로 를 방문 하 는 것 입 니 다. 사실은 페이지 내용 이 하나 밖 에 없습니다 (보통 index. html).이 페이지 에 도 입 된 js 프레임 워 크 는 현재 방문 한 url 에 따라 해당 하 는 하위 페이지 구성 요소 (페이지 세 션 으로 이해 가능) 로 논리 적 처리 와 페이지 렌 더 링 을 합 니 다.
그래서 112.74.: / 16667 / login 을 방문 하면 웹 사이트 에 login 이라는 페이지 자원 이 없습니다.그래서 404 를 신 청 했 습 니 다.
해결 방안: nginx 설정 추가

    location /login {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }  

    location /console {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }  

nginx 전체 설정 은

server {
    listen     16667;
 
    root /data/netx-web-ui/dist;

    location / { 
        root /data/netx-web-ui/dist;
        index index.html;
    }   

    location /login {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }   

    location /console {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }   
                                                                                                                          
} 

메모: nginx 프로필 을 수정 한 후 nginx 서 비 스 를 다시 시작 해 야 합 니 다.
nginx 설정 을 참고 하여 react, vue 단일 페이지 새로 고침 404 문 제 를 해결 합 니 다.