로컬에서 HTTPS를 통해 정적 파일을 쉽게 제공하는 방법

Google 프론트 엔드 및 백엔드 개발자가 있습니다. 현재 프론트 엔드 개발자는 자신의 컴퓨터에서 모든 백엔드를 실행해야하는데, 실행/컴파일하는 데 꽤 어려울 수 있습니다.로컬에서 HTTPS를 통해 정적 파일을 쉽게 제공하는 방법

프런트 엔드 개발자가 로컬로 제공되는 파일을 연결할 수있는 통합 서버를 설정하여이 dev 프로세스를 밝게하는 방법을 알아 보려고합니다.

기본적으로 프런트 엔드 개발자는 https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocalhost%3A8080과 같은 URL로 이동하므로 개발자는 백엔드에서 JS/CSS 파일을 가져올 위치를 지정할 수 있습니다.

백엔드 HTML 파일이 HTTPS로로드 된 경우 JS 파일을 HTTP로로드 할 수 없으므로 HTTPS를 제외하고는 제대로 작동합니다.

크롬은 불평 :

이

[차단] 페이지가 에서 'https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocal.host%3A8080은' 가 HTTPS를 통해로드했지만, 'http://local.host:8080/app.css' 에서 안전하지 않은 내용을 실행 :이 내용은 또한 HTTPS를 통해 을로드해야합니다.

Google 비즈니스와 관련된 이유로 HTTPS를 계속 사용하도록 설정했습니다 (HTTP에서 HTTPS로 전환하면 브라우저 보안으로 인해 예기치 않은 오류가 발생 함).

이러한 이유 때문에 로컬로 HTTPS 서버를 쉽게 설정할 수 있는지 궁금합니다.

HTTP의 경우 매우 간단합니다 (python -m SimpleHTTPServer $PORT).하지만 HTTPS의 경우 간단한 해결책이 있습니까 (아니면 Apache와 같은 것을 사용해야합니까?). localhost 도메인이나 다른 것에 대한 인증서를 얻어야 할 것 같습니까?

내 문제를 해결할 수있는 파일을 HTTPS에서 제공하는 다른 방법이 있습니까?

출처

2014-12-15 Sebastien Lorber

당신은 ngrok를 사용할 수있는이 주제에 대한 블로그 포스트를 작성 -c localhost.ssl

nginx -p PWD로 nginx를 시작하고 https 프록시 주소를 얻으십시오.

ngrok http $port

출처

2016-04-01 07:37:59

감사합니다. 이미 Ngrok을 알고 있지만 https로 쉽게 로컬 콘텐츠를 노출하는 데 사용하지는 마십시오 :) nice trick :) –

사실 저는 지금까지 알지 못했지만 Chrome에 제한이있을 때 Chrome url 바에 작은 방패 아이콘이 있습니다. 이를 클릭하면 제한 사항을 제거 할 수 있으므로 사용자가 실제로 원하면 HTTPS가 제공되는 페이지에서 HTTP 내용을로드 할 수 있습니다. HTTPS 파일을 로컬로 제공 할 필요가 없어지면 내 문제가 해결됩니다.

출처

2014-12-15 12:53:19

더 많은 언어/프레임 워크/시스템을 기반으로하는 몇 가지 방법이 있습니다.

기본 단계는 다음과 같습니다

가 원하는 폴더에서 파일을 제공하기 위해 생성 된 인증서와 (원하는 도메인 CN = localhost.ssl 교체) SSL 인증서 openssl req -nodes -sha256 -days 365 -newkey rsa:2048 -new -x509 -subj \ "/C=GC/ST=Garbage/L=Collector/O=ProgrammerMan/OU=Codeland/CN=localhost.ssl/[email protected]" \ -keyout localhost.ssl.key -out localhost.ssl.cert
시작 웹 서버를 생성합니다. Nginx에 대한 예제 설정은 포트를 통해 동일한 웹 애플리케이션 폴더를 봉사의 nginx를 얻기 위해

예 설정 아래에 제공됩니다. Https는 ssl 키워드가 의 수신 명령어로 켜져 있습니다. 또한 ssl_certificate 및 ssl_certificate_key이 중요합니다.startstop 및 reload 파일이 편의를 위해 제공됩니다. 그것들은 nginx 예제를 독립적 인 방식으로 시작하는 것을 허락하고 nginx가 이미 머신에서 실행되고있는 경우에는 격리됩니다.

error_log error.log; 
pid  nginx.pid; 

events { 
    worker_connections 1024; 
} 

http { 
    # Usually nginx has much more comprehensive list of mime types 
    # But to keep the example self contained, here are some essential 
    # definitions 
    types { 
    text/html        html htm shtml; 
    text/css        css; 
    text/xml        xml; 
    image/gif        gif; 
    image/jpeg       jpeg jpg; 
    application/javascript    js; 
    image/png        png; 
    } 

    server { 
    listen    3002 ssl; 
    server_name   localhost.ssl; 
    ssl_certificate  ../localhost.ssl.cert; 
    ssl_certificate_key ../localhost.ssl.key; 

    root ../webapp; 

    location/{ 
     autoindex on; 
     index index.html; 
    } 
    } 
}

저장 localhost.ssl 파일의 설정은, webapp 폴더에 파일을 넣어 나는 또한 Serving web application locally over https

출처

2016-03-30 11:35:41

로컬에서 HTTPS를 통해 정적 파일을 쉽게 제공하는 방법

답변

관련 문제