Nginx에 Create-React-App 배포

Ubuntu 14.04 및 Nginx가 포함 된 Digital Ocean 드롭 렛에 create-react-app SPA를 배포하려고합니다. 정적 서버 deployment instructions에 따라 serve -s build -p 4000을 실행하면 제대로 작동하지만 터미널을 닫으면 응용 프로그램이 종료됩니다. create-react-app repo 추가 정보에서 영원히 계속 실행하는 방법은 분명하지 않습니다. forever과 유사합니다.Nginx에 Create-React-App 배포

serve을 실행하지 않으면 Nginx의 502 잘못된 게이트웨이 오류가 발생합니다.

Nginx에 컨퍼런스의 주요 장점 중

server { 
    listen 80; 
    server_name app.mydomain.com; 
    root /srv/app-name; 
    index index.html index.htm index.js; 
    access_log /var/log/nginx/node-app.access.log; 
    error_log /var/log/nginx/node-app.error.log; 
    location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ { 
    root /srv/app-name/build; 
    } 
    location/{ 
    proxy_pass http://127.0.0.1:4000; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection 'upgrade'; 
    proxy_set_header Access-Control-Allow-Origin *; 
    proxy_set_header Host $host; 
    proxy_cache_bypass $http_upgrade; 
    } 
}

출처

2017-10-23 Kwhitejr

nginx를 사용하여 정적 파일을 직접 제공하지 않는 이유는 무엇입니까? – Ginkoid

하지만 ... 작동하지 않습니다. 502 오류를 얻는 이유는 명확하지 않습니다. 오류 로그는 "111 : connection refused"만 표시합니다. – Kwhitejr

[백그라운드로 프로세스를 실행하고 죽지 않는 방법]과 중복 될 수 있습니까? (https://stackoverflow.com/questions/4797050/how-to-run-process-as-background) - 그리고 결코 죽지 않는다) –

하나는 반작용 (및 응용 프로그램 반응 만들기) 당신이 (Nginx에와 그것을 또는 프록시)이 노드의 서버를 실행의 오버 헤드를 필요가 없다는 것입니다; 정적 파일을 직접 제공 할 수 있습니다. Deployment documentation 당신이 연결 한에서

는 응용 프로그램이 무엇을 설명 반작용 만들기 :

npm run build 앱의 생산 빌드와 build 디렉토리를 생성합니다. 사이트 방문객에게 index.html을 제공하고 /static/js/main.<hash>.js과 같은 정적 경로 요청은 /static/js/main.<hash>.js 파일의 내용과 함께 제공되도록 즐겨 찾는 HTTP 서버를 설정하십시오. 귀하의 경우에는

는 build/ 디렉토리를 만든 다음 Nginx에 그들을 액세스 할 수있는 위치에있는 파일을 사용할 수 있도록 npm run build를 실행합니다. 빌드가 로컬 시스템에서 가장 좋을 것입니다. 그런 다음 파일을 서버로 안전하게 복사하십시오 (SCP, SFTP 등). 서버에 npm run build을 실행할 수 있지만 다음에 빌드를 실행할 때 build/ 디렉토리에 직접 서비스하려는 유혹에 빠지면 클라이언트가 일관성없는 리소스 집합을 수신 할 수 있습니다. 당신의 build/ 디렉토리 서버에 일단

당신이 선택하든, 다음 파일을 읽고 구성 할 수 있습니다 Nginx에 있도록 권한을 확인하여 nginx.conf과 같이 :

server { 
    listen 80; 
    server_name app.mydomain.com; 
    root /srv/app-name; 
    index index.html; 
    # Other config you desire (logging, etc)... 
    location/{ 
    try_files $uri /index.html; 
    } 
}

이 구성 파일이에있는에 근거 /srv/app-name. 즉, try_files 지시어가 CSS/JS/images 등을 먼저로드하고 다른 모든 URI를로드하려고하면 빌드에 index.html 파일을로드하여 앱을 표시합니다.

포트 80의 안전하지 않은 HTTP 대신 HTTPS/SSL을 사용하여 배포해야합니다. Certbot은 Nginx에 대한 자동 HTTPS를 무료로 제공합니다. 인증서를 얻는 데 드는 비용이나 프로세스가 너를 뒤로 잡아라.

출처

2017-11-27 06:59:07 davidjb

Nginx에 Create-React-App 배포

답변

관련 문제