Mono Works

本日は、前回の予告どおり、hugo serverによる Webサーバ起動とかその辺のスクリプトです。

とりあえず 刺盛り 頼んどいたら間違いなし 磯ぎよし

今回のスクリプト

うちのブログは、VSCode使って書きながら、Chrome使ってプレビュー確認しています。その際にhugo serverで Webサーバを起動して、ローカルで確認したり、ngrok経由で確認したりしています。今回のスクリプトでは、その辺をある程度自動でできるようにしています。

#!/bin/bash

# 環境変数：hugoの作業ディレクトリ
readonly HUGO_DIR="/mnt/c/《自分なりのPath》"
# 環境変数：ローカル環境での確認時テーマファイル
readonly HUGO_LOCAL_THEME="home"
# 環境変数：ローカル環境のURL
readonly HUGO_LOCAL_URL="http://《コンピュータ－名》"

if cd "$HUGO_DIR"; then
  :
else
  echo "存在しないディレクトリがhugoの作業ディレクトリに指定されています。"
  exit
fi

echo -n "Webサーバの起動方法を選択
  a. hugoでローカルWebサーバ起動（ファイル生成しない）
  b. hugoでローカルWebサーバ起動（_localフォルダにファイル生成）
  c. ngrok経由で外部にローカルWebサーバを公開（ファイル生成しない）
  d. ngrok経由で外部にローカルWebサーバを公開（_localフォルダにファイル生成）
  e. キャンセル
選択（a-e）："
read -r select_method

case $select_method in
  [aA]* )
    hugo server -D -w -t $HUGO_LOCAL_THEME -b="$HUGO_LOCAL_URL" --bind="0.0.0.0"
  ;;

  [bB]* )
    rm -r _local/*
    hugo server -d _local -D -w -t $HUGO_LOCAL_THEME -b="$HUGO_LOCAL_URL" --bind="0.0.0.0"
  ;;

  [cC]* )
    cmd.exe /c "start ngrok.exe http 1313"
    echo -n "別ウインドウで開いたプロンプト内の
    https://《8桁の英数字》.ngrok.io 部分の
    8桁の英数字を入力："
    read -r ngrok_adress
      hugo server -D -t ngrok -b="https://${ngrok_adress}.ngrok.io" --bind="0.0.0.0" --appendPort=false --liveReloadPort=443 --navigateToChanged
  ;;

  [dD]* )
    cmd.exe /c "start ngrok.exe http 1313"
    echo -n "別ウインドウで開いたプロンプト内の
    https://《8桁の英数字》.ngrok.io 部分の
    8桁の英数字を入力："
    read -r ngrok_adress
      rm -r _local/*
      hugo server -d _local -D -t ngrok -b="https://${ngrok_adress}.ngrok.io" --bind="0.0.0.0" --appendPort=false --liveReloadPort=443 --navigateToChanged
  ;;

  [eE]* )
    exit
  ;;

  * )
    echo "a から e の半角英字を入力して下さい。"
  ;;

esac

作業環境

VSCodeで記事を書いて、VSCode上のターミナルからWSLを起動してスクリプトを走らせ、hugoは WSLにインストールしたものを使ってます。具体的な環境構築方法は、こちらに書いてます。

ngrokは、windows版の実行ファイル ngrok.exeに Pathを通して使ってます。

ローカル環境でのURL

ローカル環境でのURLとして、localhostを使ってもいいのですが、何やらうまくリンクされないことがあったりしたので、コンピューター名を指定しています。コンピューター名は、Win10の場合、設定 > システム > バージョン情報 > デバイスの仕様 > デバイス名 として記載されている名前です。

# 環境変数：ローカル環境のURL
readonly HUGO_LOCAL_URL="http://《コンピュータ－名》"

ngrok環境でのWebサーバ起動（少し運用でカバー！）

作業自体は、以前書いた記事を踏襲してます。今回のスクリプトでは、この一連の作業をなるべく少ない手数で済ませようと書いたものです。

WSLでスクリプトを走らせ、ngrok経由で...を選択すると、別ウインドウで起動したコマンドプロンプトで ngrokが実行されます。その結果の一部をスクリプトの案内に従ってコピペすると、Webサーバが起動します。

本当は、WSL上の別ターミナルで ngrokを起動して、とか考えてたのですが、その部分だけを別ターミナルで実行、というのができなかったので、今のところ ngrokは Win10上で自動実行させてます。まあ、ターミナルをあらかじめ分割しておき、一方でngrok http 1313しておいてもいいので、その辺はお好みで。

あと、ngrok.exe http 1313の結果から、《8桁の英数字》.ngrok.ioの《8桁の英数字》だけを自動で取り込めればベストなんですが、いかんせん勉強不足なため、今回は 人力コピペで手打ちとしました。

ブラウザでの確認（とても運用でカバー！）

最初は、ブラウザも自動で起動して、自動でプレビューも表示しようとしたのですが、どうしてもサーバ起動前に先にブラウザがURLを叩いてしまい、結局 Ctrl + F5しないといけないとか、今のところうまいやり方が分からなかったので、ローカル環境の場合、お気に入りに登録しておくことに、ngrokの場合は、スクリプト上に表示されるURLをCtrl押しながらクリックすることに。

なぜか、ローカルのURLだとCtrl押しながらクリックができない。

0.0.0.0

WSL上から hugo serverした場合、--bind で 0.0.0.0を指定しないと、ブラウザでローカル確認できません。一度ローカルで確認していると、オプションを付けなくても見えたりするんですが、閲覧履歴削除して、Win10を再起動したりすると、やっぱりオプション付けないと見えなくなります。Windows上の hugo.exeからWebサーバ起動した場合は、0.0.0.0を指定しなくてもよかったので、ハマりました。

ローカルにファイル生成するかどうか

オプションで -d 《フォルダ名》を指定すると、指定した《フォルダ名》内に実ファイルを生成してくれます。生成されたファイルを確認したい場合に使います。スクリプトでは、ローカルにファイルを生成する場合、先に《フォルダ名》内のファイルを削除するようにしてます。くれぐれも hugo で使用するレギュラーフォルダと同じフォルダ名を付けないように気を付けて下さい。

次回は、hugoのビルドとサーバとの同期についてです。