Lycolog

Next.js 11から12にしたらHMRが死んだので復活させるための設定を書いておく

確認環境

設定例

標準状態で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;
    }
}

シェルスクリプトが設置されているパスを取得する

• cwd=$(cd $(dirname $0); pwd)
  • $0はシェルスクリプトのフルパス
  • dirnameでスラッシュから始まるファイル名を除去
  • cdで移動
  • pwdで表示

現在のパスを移動せずにシェルスクリプト内でパスを移動する

これはサブシェルを使うと出来る
サブシェルとは()で囲まれた部分で、この中では別のシェルが動いている
例えば次のスクリプトはfoo/に移動し中のファイルリストを表示するが、2行目では現在の位置にあるファイルリストを表示するため移動していない
コマンド展開記法$()もサブシェルが動いている

(cd foo/; ls -la)
ls -la

複数コマンドをワンライナーで実行する

;

• 以下のように書くと連続で線形実行される。手前が異常終了しても続く
  • curl; echo 2;

&

コマンドの末尾に&をつけるとバックグラウンドで実行される

• 以下の例では左がバックグラウンド、右がフォアグラウンドで実行される
  • echo 1 & echo 2

&&

AndAlso的な動きをする

• 以下のように書くと連続で線形実行される。手前が異常終了すると続かない
  • curl && echo 2

|

コマンドの末尾に|をつけると標準出力が次にリダイレクトされる

• 以下のように書くと連続で線形実行される。手前の標準出力が次にリダイレクトされる
  • echo 1 | xargs -I{} echo {}2

||

OrElse的な動きをする

• 以下のように書くと連続で線形実行される。手前が異常終了した場合のみ次が動く
  • curl || echo 1

確認環境

サンプルコード

• ~で正規表現を書けるので後は普通に書くだけ
  • ポイントとしては/foo/のような正規表現リテラルではなく、grepのような書き方をする

location ~ (/foo|/bar) {

パスFooでは直にリバプロしたいけど、Barではローカルを見てからリバプロしたいときなどに使える

確認環境

サンプルコード

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環境で上手くアクセスできないケースがあるのでやる設定

確認環境

サンプルコード

httpセクション

    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;
}