バッチファイルで公開を1クリックにする（ビルド失敗時は公開しない）

なぜバッチファイルにしたか

私は複数のサイトを、Cloudflare Pages に直接アップロードする方法で公開しています。最初は毎回、コマンドプロンプトでビルドと公開のコマンドを手で打っていました。

サイトが増えると、どのサイトでどのコマンドを打つのかを覚えておくのが大変になり、打ち間違いも心配になりました。そこで、サイトごとに公開用のバッチファイルを作り、ダブルクリックするだけで公開できるようにしました。

用語の説明

• バッチファイル：Windows で、コマンドを順に実行するためのファイル。拡張子は .bat
• errorlevel（エラーレベル）：直前のコマンドが成功したか失敗したかを表す数字。0 なら成功
• call：バッチファイルの中から、別のコマンドのファイルを呼び出すときに使う書き方
• 文字化け：文字の扱い方の違いで、文字が読めない記号になってしまうこと

バッチファイルの例

次のような内容のファイルを、サイトのフォルダに置いています。プロジェクト名は自分のものに置き換えます。

@echo off
cd /d %~dp0
call npm run build
if errorlevel 1 (
  echo Build failed. Deploy was cancelled.
  pause
  exit /b 1
)
call npx -y wrangler pages deploy dist ^
  --project-name=my-site --branch=main
pause

それぞれの行の意味

• cd /d %~dp0：バッチファイルが置いてあるフォルダに移動する。どこから実行しても同じ場所で動くようにするため
• call npm run build：サイトをビルドする
• if errorlevel 1：ビルドが失敗したら、メッセージを出して止まる。公開はしない
• call npx -y wrangler pages deploy：dist フォルダの中身を Cloudflare Pages に公開する
• pause：最後に画面を止めて、結果を読めるようにする

ビルドが失敗したら公開しない理由

ビルドが失敗したまま公開のコマンドが動くと、前回のビルドの古いファイルや、途中までしかできていないファイルが公開されるおそれがあります。壊れたサイトを公開してしまう事故を防ぐため、ビルドの結果を確かめてから公開に進むようにしています。

よくあるつまずき

• npm や npx の前に call を付け忘れ、ビルドが終わったところでバッチファイル全体が終わってしまう
• バッチファイルに日本語のメッセージを書いて、文字化けする。私はメッセージも含めて英語（半角の文字）だけで書くようにした
• pause がなく、エラーが出ても画面がすぐ閉じて読めない
• 別のサイトのバッチファイルをコピーして、プロジェクト名を直し忘れる

セキュリティソフトに止められたこと

公開とは別の用途で、パソコンの起動時にバッチファイルを自動で動かそうと、Windows のスタートアップのフォルダに置いたことがあります。私のパソコンでは、これがセキュリティソフトに止められました。

自動で動くバッチファイルは、不正なプログラムと同じような動きに見えることがあるのだと思います。公開用のバッチファイルのように、自分でダブルクリックして動かす使い方では、私の環境では問題は起きていません。

確認のチェックリスト

• バッチファイルの中身が英語（半角の文字）だけになっているか
• プロジェクト名が、そのサイトのものになっているか
• わざとビルドを失敗させたときに、公開されずに止まるか
• 公開の後に、ブラウザでサイトの表示を確認したか

私の場合

今は、サイトを直したら、バッチファイルをダブルクリックして、最後に表示された URL をブラウザで開くだけになりました。コマンドを覚えておく必要がなくなり、更新の心理的な負担がかなり軽くなりました。

サイトが増えたときの工夫

サイトごとにバッチファイルを置くと、中身はほとんど同じで、違うのはプロジェクト名だけになります。新しいサイトを作るときは、ひな形のバッチファイルをコピーし、プロジェクト名だけを書き換えています。書き換え忘れを防ぐため、コピーした直後に一度開いて、名前を確認するようにしています。

また、初めて公開するときのプロジェクトの作成は、最初の一度だけ手でコマンドを打つ方法もあります。毎回のバッチファイルには公開のコマンドだけを書いておくと、中身が単純になり、読み返したときにも分かりやすくなります。

次にやること

バッチファイルができたら、一度わざとビルドが失敗する状態にして、公開されずに止まるかを試しておくと安心です。正しく止まることを確かめてから、普段の更新に使い始めてください。

ほかの記事