Angular CLI를 사용하여 로컬에서 https 제공

HTTPS를 사용하여 각도 응용 프로그램을 개발하는 것은 유용합니다. 이것은 Linux 환경에서 이를 수행하는 방법을 설명하는 가이드입니다.

전제 조건

각도 CLI

mkcert

설정

터미널에서 ng new https-dev를 실행하여 각도 애플리케이션을 초기화합니다. 애플리케이션이 생성되면 디렉토리를 여기로 변경하고 ssl라는 폴더를 생성합니다. 여기에는 필요한 인증서가 포함됩니다.



선택적으로 이 폴더를 무시하도록 편집.gitignore하여 커밋되지 않도록 할 수 있습니다.

mkcert 사용

페이지에는 OS에 관계없이 설치mkcert를 안내하는 지침이 있습니다. mkcert가 설치된 상태에서 mkcert -install를 실행하여 로컬 인증 기관(CA)을 생성하고 브라우저를 다시 시작하여 새로 생성된 CA를 등록하십시오.

파이어폭스

기본 설정으로 이동하여 검색창에 certificates를 입력합니다. View Certificates를 클릭하고 Authorities로 이동하여 mkcert development CA를 찾습니다.



크롬

설정으로 이동하여 검색창에 certificates를 입력합니다. Manage certificates까지 아래로 스크롤하고 Authorities로 이동하여 org-mkcert development CA를 찾습니다.

인증서 생성

프로젝트의 루트에서 다음 명령을 실행합니다.

$ mkcert -cert-file <folder/filename.pem> -key-file <folder/filename.pem> <space delimeted domain>
$ mkcert -cert-file ssl/local-cert.pem -key-file ssl/local-key.pem localhost 127.0.0.1 192.168.1.109 172.18.0.1 ::1 

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "192.168.1.109"
 - "localhost"
 - "172.18.0.1"
 - "::1"

The certificate is at "./ssl/local-cert.pem" and the key at ".ssl/local-key.pem" ✅

https로 개발

생성한 인증서를 사용하려면 다음을 사용하십시오.

$ ng serve --ssl <boolean> --ssl-cert <path-to-cert> --ssl-key <path-to-key>
$ ng serve --ssl true --ssl-cert ./ssl/local-cert.pem --ssl-key ./ssl/local-key.pem

애플리케이션이 제공되면 주소 표시줄에 자물쇠가 있는지 확인하세요. localhost에 https가 있음을 나타냅니다.



읽어 주셔서 감사합니다!!