여보시오, 이 시리즈에서는 HTTPS에서 어떻게 완전한 개발 환경을 가지고 당신의 로컬 개발 영역에 효과적인 인증서를 제공하는지 설명할 것입니다.

왜 나는 개발 중에 HTTPS를 사용해야 합니까?

사실 개발 환경에서 HTTPS를 사용하는 데는 여러 가지 이유가 있습니다.

보안 쿠키를 사용하여 인증 (keyclock, Auth0 등 인증 서비스 사용)→ more here 또는 here 참조

의 개발과 생산 환경은 가능한 한 비슷하다.10th factor의 12-factor app을 참조하십시오.

일부 외부 서비스(SaaS)에는 HTTPS(즉 Webhook용)가 필요합니다.

인증서 설정

루트 CA로 서명된 인증서를 설정해야 합니다. 이 인증서는 시스템과 브라우저에서 식별됩니다.
우선, 우리는 로컬 개발 환경을 위해 호스트 이름을 선택한 다음에awesome 도구 mkcert을 사용하여 유효한 인증서를 생성할 것입니다.

개발자 호스트 이름 선택

개발 환경을 위한 호스트 이름을 선택하십시오.
⚠️ 충돌할 수 있는 기존 도메인 이름을 사용하지 마십시오!
일반적인 localhost 또는 다른 호스트 이름을 사용할 수 있습니다.나는 dev.local을 사용하는 것을 좋아한다. 나는 다음 단계에서 그것을 사용할 것이다.
로컬 dns에 호스트 이름을 추가해야 합니다. Linux와 Mac에서 /etc/hosts입니다.따라서 127.0.0.1 dev.local에 /etc/hosts을 추가합니다.
💡 알림: this gist의 이 스크립트를 사용하여 호스트 이름을 쉽게 추가하고 삭제하고 있습니다👍
🗒️ 참고: api.dev.local, app.dev.local과 같은 하위 도메인을 사용하는 경우...너도 /etc/hosts에 그것들을 추가해야 한다.*.dev.local에 직접 어댑터 (예를 들어 /etc/hosts) 를 사용할 수 없지만 dnsmasq 등 서비스를 사용하여 이 점을 실현할 수 있습니다.

Mkcert 회사

우리는 mkcert을 사용하여 루트CA를 관리하고 인증서를 생성할 것입니다.

설치

🍏 MacOS 회사

acOS에서 Homebrew 사용

brew install mkcert
brew install nss # if you use Firefox

🐧 Linux

Linux에 certutil을 먼저 설치합니다.

sudo apt install libnss3-tools
curl -Lo /tmp/mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.1/mkcert-v1.4.1-linux-amd64
chmod +x /tmp/mkcert
sudo mv /tmp/mkcert /usr/local/bin/mkcert

더 많은 설치 방법 here 참조👌

활용단어참조

먼저 로컬 CA를 시스템 및 브라우저에 설치해야 합니다.

$ mkcert -install
Created a new local CA at "/home/***/.local/share/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

다음으로, 우리는 mkcert를 사용하여 인증서를 생성할 것입니다.내 예시역 dev.local 과 어댑터 *.dev.local을 사용합니다.

$ mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem dev.local *.dev.local
Using the local CA at "/home/***/.local/share/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "dev.local"
 - "*.dev.local"

Reminder: X.509 wildcards only go one level deep, so this won't match a.b.dev.local ℹ️

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

우리는 현재 certs/local-cert.pem과 certs/local-key.pem에 있는 인증서를 사용할 수 있습니다.
다음은 이 인증서를 다른 응용 프로그램에 어떻게 사용하는지 알아보겠습니다.

이점: 개발 창고의 Makefile에 모든 내용을 포장합니다

이것은 내가 어떻게 나의 개발 창고를 조직했는지, 그것은 매우 자신의 의견을 고집하기 때문에, 그 중에서 당신이 필요로 하는 것만 얻는다😉!

📁 폴더 구조

project_root
├── dev-stack
│   ├── certs
│   │   ├── .gitignore
│   │   ├── local-cert.pem
│   │   └── local-key.pem
│   ├── scripts
│   │   ├── get-ip.sh
│   │   └── manage-hosts.sh
│   ├── .env.local
│   ├── .gitignore
│   ├── docker-compose.yml
│   ├── Makefile
│   └── README.md

파일 생성

ifndef DEV_STACK_DIR
DEV_STACK_DIR = $(CURDIR)
endif
SCRIPTS_DIR=${DEV_STACK_DIR}/scripts

ifndef HOSTNAME
HOSTNAME = dev.local
endif
ifndef SUBDOMAINS
SUBDOMAINS = docs \
             traefik \
             mail \
             media \
             portainer \
             graphql \
             auth
endif
ifndef DATABASE
DATABASE = postgres
endif
ifndef INFRA
INFRA = traefik \
        maildev \
        minio \
        mkdocs \
        portainer \
        ${DATABASE} \
        graphql-engine \
        keycloak \
        auth-connector
endif

export HOST_IP := $(shell ${SCRIPTS_DIR}/get-ip.sh)

# HELP
.PHONY: help

help: ## List of the command available, make {command}
    @awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)

.DEFAULT_GOAL := help

start:  ## Start the docker stack
    docker-compose up -d ${INFRA}

up: ## Start the docker stack
    docker-compose up ${INFRA}

stop: ## Stop the docker stack
    docker-compose stop

restart: ## Restart the docker stack
    docker-compose restart

down: ## Down the docker stack and remove all containers and networks
    docker-compose down

build: ## Build or rebuild all docker container
    docker-compose build

pull: ## Pull latest image
    docker-compose pull

add-hosts: ## Add Hosts entries for Dev stack
    ${SCRIPTS_DIR}/manage-hosts.sh addhost ${HOSTNAME}
    $(foreach subdomain, $(SUBDOMAINS), ${SCRIPTS_DIR}/manage-hosts.sh addhost $(subdomain).$(HOSTNAME);)

remove-hosts: ## Remove Hosts entries for Dev stack
    ${SCRIPTS_DIR}/manage-hosts.sh removehost ${HOSTNAME}
    $(foreach subdomain, $(SUBDOMAINS), ${SCRIPTS_DIR}/manage-hosts.sh removehost $(subdomain).$(HOSTNAME);)

certs-generate: ## Generate certs for all our domains
    mkcert -install
    mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem $(HOSTNAME) *.$(HOSTNAME)

certs-uninstall: ## Uninstall the local CA (but do not delete it)
    mkcert -uninstall

스크립트

ip를 가져옵니다.상해

#!/bin/bash

# Get host IP address

if [ "$(uname)" = "Darwin" ];then
    ifconfig en0 | grep "inet "| cut -d ' ' -f 2
else
    ip route get 1.2.3.4 | awk '{print $7}'
fi

호스트 관리상해

#!/bin/bash

# copy from https://gist.github.com/irazasyed/a7b0a079e7727a4315b9

# PATH TO YOUR HOSTS FILE
ETC_HOSTS=/etc/hosts

# DEFAULT IP FOR HOSTNAME
IP="127.0.0.1"

# Hostname to add/remove.
HOSTNAME=$2

removehost() {
    echo "removing host";
    if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
    then
        echo "$HOSTNAME Found in your $ETC_HOSTS, Removing now...";
        sudo sed -i".bak" "/$HOSTNAME/d" $ETC_HOSTS
    else
        echo "$HOSTNAME was not found in your $ETC_HOSTS";
    fi
}

addhost() {
    echo "adding host";
    HOSTS_LINE="$IP\t$HOSTNAME"
    if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
        then
            echo "$HOSTNAME already exists : $(grep $HOSTNAME $ETC_HOSTS)"
        else
            echo "Adding $HOSTNAME to your $ETC_HOSTS";
            sudo -- sh -c -e "echo '$HOSTS_LINE' >> /etc/hosts";

            if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
                then
                    echo "$HOSTNAME was added succesfully \n $(grep $HOSTNAME /etc/hosts)";
                else
                    echo "Failed to Add $HOSTNAME, Try again!";
            fi
    fi
}

$@

인증서 사용

→ 다음 게시물에서는 새로 생성된 인증서를 사용하는 방법을 볼 수 있습니다

Nx 작업공간에 있는 Angular 응용 프로그램의 로컬 HTTPS(또는 Angular cli)

Nx 작업공간에서 React 응용 프로그램의 로컬 HTTPS

Nx 작업공간에서 Express app(api)의 로컬 HTTPS

Nx 작업공간에서 NestJS 응용 프로그램(api)의

로컬 HTTPS

Traefik Docker 서비스를 이용한

로컬 HTTPS

Github 저장소

야간 / 완전한 https 개발 환경

HTTPS의 완전한 개발 환경은 로컬 개발 영역에 적용되는 유효한 인증서를 가지고 있으며 mkcert, Nxworkspace,angular,reactjs,nestjs,express,docker,traefik를 포함한다.

마이어그

이 프로젝트는 Nx을 사용하여 생성됩니다.

🔎 Nx는 Monorepos를 위한 확장 가능한 개발 도구입니다.

작업공간에 기능 추가

Nx는 다양한 유형의 응용 프로그램과 도구를 개발하는 기능을 추가한 많은 플러그인을 지원합니다.
이러한 기능은 응용 프로그램, 라이브러리 생성, 프로젝트 테스트 및 구축에 사용되는 devtools를 포함한다.
다음은 핵심 플러그인입니다.

React

npm install --save-dev @nrwl/react

웹(프레임 프런트엔드 없음)

npm install --save-dev @nrwl/web

Angular

npm install --save-dev @nrwl/angular

Nest

npm install --save-dev @nrwl/nest

Express

npm install --save-dev @nrwl/express

Node

npm install --save-dev @nrwl/node

community plugins도 많이 추가할 수 있습니다.

애플리케이션 생성

nx g @nrwl/react:app my-app을 실행하여 응용 프로그램을 생성합니다.

You can use any of the plugins above to generate applications as well.

Nx를 사용하면 같은 작업공간에서 여러 응용 프로그램과 라이브러리를 만들 수 있습니다.

라이브러리 생성

nx 실행...
View on GitHub