🔐 完全なHTTPS開発環境
18273 ワード
おい、このポストシリーズでは、あなたのローカル開発ドメインのための有効な証明書でHTTPSの完全な開発環境を持つ方法を説明します.
なぜ開発にHTTPSを使うべきですか？
認証用の安全なクッキーを使うには( keycloack , auths ,→ 参照more here or here
可能な限り開発・生産環境を持つ.参照10th factor の12-factor app . いくつかの外部サービス( SaaS )はHTTPSを必要としました( webhookの場合) 証明書の設定
NXワークスペース(または角度CLI)の角度アプリケーションのためのローカルHTTPS NXワークスペースの反応アプリのためのローカルHTTPS NXワークスペースのExpressアプリのAPI NSXワークスペースのNESTJSアプリ(API)のためのローカルHTTPS を使用したDockerサービスのローカルHTTPS githubリポジトリ
React Web (フレームワークのフロントエンド)
Angular
Nest
Express
Node その他多数community plugins あなたが追加できます.
ラン
NXを使用する場合、同じワークスペースに複数のアプリケーションとライブラリを作成できます.
ラン
View on GitHub
なぜ開発にHTTPSを使うべきですか？
実際には、開発環境にhttpsを使用する理由がたくさんあります.
証明書の設定
我々のシステムとブラウザによって認識されるrootcaで署名された証明書を設定する必要があります.
まず、ローカル開発環境のホスト名を選択しますmkcert 有効な証明書を生成します.
ホスト名を選択
開発環境のホスト名を選択します.
⚠️ コンフリクトを作成できる既存のドメイン名を使用しないでください!
いつでも使えますlocalhost または別のホスト名.私のようにdev.local 次の手順に従ってください.
ホスト名をローカルDNSに追加する必要があります/etc/hosts LinuxとMacで.だから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 Rootcaを管理し、証明書を生成します.
インストール
🍏 MacOS
MacOSでは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でラッピングする
私がどのように私のdevスタックを組織したか、それはあなたがそれから必要なものだけを取るように、非常に独断的です😉!
📁 フォルダ構造
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
Makefile
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アドレスを取得します。sh
#!/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
ホストの管理sh
#!/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
}
$@
証明書の使用
→ 次の記事では、この新しい生成された証明書を使用する方法を参照してください
開発環境のホスト名を選択します.
⚠️ コンフリクトを作成できる既存のドメイン名を使用しないでください!
いつでも使えますlocalhost または別のホスト名.私のようにdev.local 次の手順に従ってください.
ホスト名をローカルDNSに追加する必要があります
/etc/hosts LinuxとMacで.だから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 Rootcaを管理し、証明書を生成します.
インストール
🍏 MacOS
MacOSでは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でラッピングする
私がどのように私のdevスタックを組織したか、それはあなたがそれから必要なものだけを取るように、非常に独断的です😉!
📁 フォルダ構造
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
Makefile
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アドレスを取得します。sh
#!/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
ホストの管理sh
#!/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
}
$@
証明書の使用
→ 次の記事では、この新しい生成された証明書を使用する方法を参照してください
brew install mkcert
brew install nss # if you use Firefox
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
$ 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 -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" ✅
私がどのように私のdevスタックを組織したか、それはあなたがそれから必要なものだけを取るように、非常に独断的です😉!
📁 フォルダ構造
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
Makefile
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アドレスを取得します。sh
#!/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
ホストの管理sh
#!/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
}
$@
証明書の使用
→ 次の記事では、この新しい生成された証明書を使用する方法を参照してください
githubリポジトリ
ナイトベルト
/
完全なHTTPS開発環境
MKCert、NXワークスペース、角度、reactjs、NESTJS、エクスプレス、Docker、traefikを使用してローカル開発ドメインの有効な証明書を持つHTTPSの完全な開発環境。
マイロ
このプロジェクトはNx .
🔎 NXはmonoreposのための拡張可能なdevツールのセットです.
ワークスペースに機能を追加する
NXはさまざまな種類のアプリケーションと異なるツールを開発するための機能を追加するプラグインをサポートしています.
これらの機能には、アプリケーション、ライブラリなどを生成するだけでなく、devtoolツールを生成し、プロジェクトを構築するなどがあります.
以下はコアプラグインです.
このプロジェクトはNx .
🔎 NXはmonoreposのための拡張可能なdevツールのセットです.
ワークスペースに機能を追加する
NXはさまざまな種類のアプリケーションと異なるツールを開発するための機能を追加するプラグインをサポートしています.
これらの機能には、アプリケーション、ライブラリなどを生成するだけでなく、devtoolツールを生成し、プロジェクトを構築するなどがあります.
以下はコアプラグインです.
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 アプリケーションを生成する
ラン
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
Reference
この問題について(🔐 完全なHTTPS開発環境), 我々は、より多くの情報をここで見つけました https://dev.to/nightbr/full-https-ssl-development-environment-4damテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol