ローカル環境用の開発ドメインをhttps化する時に使えるやつ
例えばローカル環境に複数のサービスがいて、それぞれをhttps://*.example.com/のようなドメインで管理したい時に使える
同じことをすればLinuxとかでも応用できると思う
| Env | Ver |
|---|---|
| nginx | 1.19.8 |
| mkcert | 1.4.3 |
| Windows 10 Pro | 19043.1415 |
choco install mkcert
# mkcertを認証局として登録
mkcert -install
# 証明書を作成するドメインを列挙
mkcert example.test *.example.test
mv _wildcard.example.com+1.* C:/nginx/conf/.ssl/
nginxの設定に証明書を記載
server {
server_name dev.example.com;
listen 443 ssl;
ssl_certificate ssl/_wildcard.example.com+1.pem;
ssl_certificate_key ssl/_wildcard.example.com+1-key.pem;
...
}
Next.js 11から12にしたらHMRが死んだので復活させるための設定を書いておく
| Env | Ver |
|---|---|
| nginx | Windows-1.21.4 |
| Next.js | 12.0.4 |
標準状態でnpx nextを叩いた状態を想定している
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:3000;
}
}
パスFooでは直にリバプロしたいけど、Barではローカルを見てからリバプロしたいときなどに使える
| Env | Ver |
|---|---|
| nginx | 1.19.8 |
location @prox {
proxy_set_header Authorization "Basic xxxxxxxxxxxxxxxxxxxxx==";
proxy_pass https://example.com;
}
# 直遷移させたい
location ^~ /foo {
try_files /dev/null @prox;
}
# 内部に当ててから遷移したい
location ^~ /bar {
try_files $uri @prox;
}
Proxy headerを設定しないとiOS Safari環境で上手くアクセスできないケースがあるのでやる設定
| Env | Ver |
|---|---|
| nginx | 1.19.8 |
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
location @prox {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass https://example.com;
}