Environment Setup

2026 Git ワーク ツリーを使用して、クラウド Mac 上で HTML/CSS ブランチを並行して維持する

MacHTML Lab2026.03.27 読むのに約 11 分かかります

静的サイトまたはコンポーネント ライブラリをオンラインにする前に、それらを同時に変更する必要があることがよくあります。2つの緊急ブランチ: 1つは本番環境のCSSを修正すること、もう1つは来週ランディングページを作成することです。別のリポジトリのクローン作成はディスク容量を消費し、手間がかかります。Git worktree同じオブジェクト ライブラリ上で複数のブランチを並行してチェックアウトできます。特に、「2 番目のマシン」を SSH 可能なマシンに置き換えるのに適しています。クラウドMac mini、Safari を実行してその上にビルドする一方で、ノートブックはコードを記述するためのマスター クローンのみを保持します。

HTML/CSS チームがワークツリーを使用する理由

従来のプロセス - スタッシュ、チェックアウト、プル、再実行npm install——多くの場合、変化のためだけに十数行のヒーローエリアCSS、コンテキストが完全に失われます。 Worktree では、各ブランチを別個のディレクトリに保持でき、履歴は引き続き共有されるため、ディレクトリ A を常に開くことができます。npm run dev、Bディレクトリ並列npm run build、枝を前後に切る必要はありません。

Apple Silicon では、依存関係のインストールには依然として時間がかかります。Git オブジェクトが共有されている場合でも、各ワークツリーはnode_modules「ヴァイト+追い風」などのスタックも占有することが多い250–400 MB。 3 つのアクティブ ツリーを計画すると、1.2 GB構築された製品である Cloud Mac と組み合わせると、ディスクが十分であれば簡単ですが、256 GB のノートブックに写真や Docker イメージもインストールする必要がある場合は厳しいでしょう。

デザイン ドラフトと DOM を同時に比較する必要があるフロントエンドの場合、worktree では「ホット リペア ブランチ」と「フィーチャー ブランチ」がそれぞれ一連のローカル URL を使用できるようにすることもでき、マージされていないスタイルを誤って間違ったブランチに送信する可能性を減らします。レビュー中に、チェックアウトを繰り返し切り替えることなく、2 つのディレクトリの差分を並べてデザイナーに示すこともできます。

日常的に必要なコマンド

メイン リポジトリ パスの下に兄弟ディレクトリのチェックアウトを追加します。

git fetch origin
git worktree add ../site-hotfix origin/hotfix/css-hero
git worktree list

マージが完了したら、対応するディレクトリを削除します。

git worktree remove ../site-hotfix

未送信の変更があることを示すメッセージが表示された場合は、先に変更を送信するか、続行する前に変更が役に立たないことを確認してください。--force。手が滑りやすい場合rm -rfディレクトリを削除した後、次を使用しますgit worktree prune避けるべきクリーンなメタデータgit worktree listゴーストエントリが表示されます。

ワーキングツリー、フルクローン、独立したウェアハウス

方法Git オブジェクトの占有複雑該当する
2 番目の完全なクローン.git を複製する低いマシンを物理的に隔離する
worktree共有オブジェクトライブラリ真ん中リモートおよび複数のブランチと並列
独立倉庫(フォーク)独立した歴史高いサプライヤーコードがリモートのメイン倉庫と一致していません

開発サーバー、ポート、Safari タグ

各ワークツリーは独立したルート ディレクトリであり、1 つのディレクトリで実行できます。npx vite --port 5173、別の--port 5174。 README またはチームのドキュメントに明確に記載してください。ホットフィックス → 5173、カード機能 → 5174。 Safari の固定タブはリモート セッションで失われやすいです。 2 つの URL をブックマークとして保存することも、サービスの開始後にリンクをエコーする小さなスクリプトを作成することもできます。

SSH を使用してコマンドを実行し、時々 VNC を使用してピクセルを表示する場合は、次を参照してください。Cloud Mac での SSH と VNC の比較、長いタスクを SSH セッションに配置し、2 つのブランチの Safari のパフォーマンスを並べて比較する必要があるときにグラフを開きます。

ポートの競合は、古いプロセスを閉じるのを忘れた場合によく発生します。lsof -i :5173占有者を見つけて終了すると、やみくもにポートを変更するよりも、CI とローカル ドキュメント間の不一致を回避できます。

ディレクトリを削除する前のクリーンアップ チェックリスト

  1. ブランチが Git ホスティング プラットフォームでマージまたは破棄されたことを確認します。
  2. 監視プロセスを停止します (Ctrl+C) ファイルハンドルが解放されないようにします。
  3. 優先度git worktree remove <path>、マニュアルの使用を減らしますrm -rf
  4. 手動で削除した場合は、残っていないか確認してください。dist/.viteキャッシュ。
  5. 実験用インストールが多すぎる場合に実行できますnpm cache verifyスペースを取り戻します。

3 番目のステップをスキップすると、簡単に次のような問題が発生する可能性があります。git worktree list実際のディレクトリと一致しません。自動化されたスクリプトに次の内容が含まれている場合、30秒タイムアウトになると、ツリーのトラバースが不可解にも失敗します。人間と同じように、メタデータも定期的にクリーンアップする必要があります。

Prettier、ESLint、および Stylelint のキャッシュは常に独自のキャッシュにあります。node_modules/.cache;キャッシュ ディレクトリのハード リンクが共有されている場合、あるブランチでプラグインのメジャー バージョンをアップグレードした後、別のブランチのフォーマット結果が汚染される可能性があります。ディスク モニターが上記を超えるまでは、重複キャッシュを受け入れる方が安全です。85 %統合キャッシュ戦略についてもう一度説明しましょう。

メジャー バージョンのリリース日に各ツリーに対して静的エクスポート (イレブンティ、Astro 静的モード) を使用できます。注文埋め込むnpm run build: 4本の木がそれぞれ咲いたらワーカー並列処理により、M4 Pro の CPU がいっぱいになる可能性があります。ノード起動パラメータに追加できます。--max-old-space-size=4096, Console.app にメモリ圧迫ログが表示されるかどうかに注目してください。

なぜ、レンタルした Mac で worktree を実行するのでしょうか?

コンピューター室でApple Silicon Mac mini共有ビルド キャビネットのように、全員が同じマシンにブランチをプッシュします。/Users/ci/sites/正規パスをクリックしますgit worktree add、確認後に削除します。ノートブックにはマスター クローンの書き込みロジックが保持されます。負荷の高い並列インストールは時間によって料金が請求されるクラウドに配置されるため、ディスクや電気代への負担が軽減されます。

SSH キーと設定がまだ整理されていない場合は、最初にお読みください。リモート Mac 構成ガイド次に、ワークツリーを自動的に追加するスクリプトを作成します。派手なディレクトリの名前付けよりも、安定した認証の方が重要です。

成熟したチームは、git worktree addMakefile に含まれるか、30行以内シェル:ところでnpm ciそして開発URLを出力します。パスは次のように統一できます。/var/tmp/worktrees/$BRANCH_SLUG、ナメクジは切り捨てられます48文字、深い一時ファイルを書き込むときに Webpack が macOS のパスの長さ制限に達するのを避けるため。

サブモジュールとワークツリーには注意してください。各ツリーは、git submodule update --init。 Git LFS リソース リポジトリを使用する場合は、必ずツリーごとに実行してくださいgit lfs pull, そうしないと、「CSSは正常に構築されたのに、Safariでヒーロービデオ404が表示される」などの奇妙な問題が発生します。

CI がプレビュー リンクを送信するときは、Slack 内のワークツリー パスもマークします (たとえば、hotfix → ~/wt/hero)、レビュー担当者が SSH 接続するときに間違ったディレクトリを見つけることはありません。3分コンテキストの切り替え、4 人による 1 ラウンドのレビューにより、レンタルにかかる分コストの多くを相殺できます。

別のものとペアリングすることができますworktree-health.sh、出力ディスクが残っており、アクティブですnodeプロセスと各開発サーバーの最終ログ五つの要素、cron または LaunchAgent を使用してください15分一度実行してください。孤立した Webpack がないことを再度確認しますgit worktree remove --force、まだ書き込み中のプロセスを誤って強制終了しないようにするためです。

共有ホスト上の各ワークツリーは、同じ資格情報アシスタントのセットを継承します。アウトソーサーがシェルにログインしている場合は、マージ後にデプロイメント キーをローテーションすることを忘れないでください。それぞれの木.env.local提案chmod 600、キーを複数のブランチ ディレクトリにコピーしないでください。マージされていない修正プログラム ツリーは、削除されるまで常に読み取り可能です。

大幅な改訂前に利用可能tmutil localsnapshotローカルのスナップショットを取得するか、dist/CSS パージ スクリプトが誤ってアクティブなツリーすべてに損傷を与えた場合に、ロールバックする場所がなくなることを避けるために、tarball を作成します。

よくある質問

Mac 上にワークツリーをいくつ保存することが推奨されますか?

ほとんどのチームは、256 GB ディスク上に 3 ~ 6 個のアクティブなワークツリーを保持します。各ワークツリーには依然として独立したワークスペースとnode_modulesがあります。依存関係を共有するための高度なツールを使用しない限り、df -h を使用してスペースを毎週観察することをお勧めします。

ワークツリーは Git オブジェクトを共有しますか?

はい。同じリポジトリにぶら下がる複数の worktree は .git オブジェクト データベースを共有します。これにより、Git クローンを繰り返すよりもスペースが節約されます。ただし、node_modules は自動的には共有されません。

2 つの Vites を同時に実行できますか?

はい、各ディレクトリのポート (--port 5173 や --port 5174 など) を明示的に指定し、チームのドキュメントにマッピングを文書化します。 Safari では、視覚的に比較するために 2 つのローカルホストを同時に開くことができます。

Git ワークツリーは、明確なブランチの名前付けを置き換えることはできませんが、「繰り返しチェックアウト」の煩わしさを取り除くことはできます。これは、常に稼働しており、実稼働に近い環境にあるマシンと比較できます。Mac mini組み合わせると、リリース週中に複数の HTML/CSS レーンを並行して実行する場合に特に便利です。クラウド コンピューティングの能力を毎日レンタルし、ピーク時にいくつかのツリーを追加し、リリース後にワークツリーを削除し、経費を削減することは、ピーク時に個別のマシンを購入するよりも柔軟です。

並列ブランチには並列ディスク容量が必要です

クラウド Mac mini をレンタルして、ワークツリー、Safari レビュー、長期開発サーバーを共有します。まずリージョンを選択し、次に「ヘルプセンター」をクリックして SSH とキーの構成を完了します。

クラウド Mac でワークツリーを実行する
1 日あたりわずか 16.9 ドル