Shopify CLIを使用してローカル環境を共有する方法

概要

皆さんはShopifyをカスタマイズしている際、本番環境には反映させたくないけど他の人に共有したいという場面はありませんか？
静的なHPを作成する際だとテストサーバーを作成し、Basic認証をかけて共有が可能ですが、Shopifyはテストサーバーを作成することができません。
そこで今回はShopify CLIを使用してローカル環境を共有する方法を紹介したいと思います。

説明

1 . Shopify CLIについて

shopify CLIとはテーマをローカル環境でカスタマイズすることができるツールです。
テーマカスタマイズ自体は管理画面のコード編集からも可能ですが、エディターを使用することができ、かつ本番環境にはコマンドを打たない限り反映されないので、安心にカスタマイズすることができます。

2 . Shopify CLIで生成されるリンク

Shopify CLIではローカル環境の立ち上げと共に３つのURLが生成されます。

①ローカルのプレビュー

URL：http://000.0000.0000
ローカルのプレビューリンクです、ファイルを編集するとホットリロードで変更されます

②カスタマイズリンク

URL : https://（ストアUR）L/admin/themes/（自動で生成されるID）/editor
ローカル環境上のカスタマイズリンクです。

③他の人と共有ができるプレビューリンク

URL : https://（ストアURL）/?preview_id=（自動で生成されるID）
他の人にも閲覧可能なプレビューリンクです。

上記③のリンクを共有することでローカル環境を他の人に共有することができます。
CLIを使用してローカル環境を立ち上げると自動でランダムなIDが生成されます。
これは一回作成されるとCLIからログアウトをしない限り毎回立ち上げても変更されず付与され続けます
※一回CLIからログアウトしてしますとIDが変更されるので注意

3 . 注意事項

プレビューリンクを開くとURLが本番環境と同じになっており、本番とローカルの見分けがつきにくいですが以下で見分けがつきます。

見分け方

ローカルには以下が含まれるバーが画面下に発生します。

①You’re previewing: Development (自分のマシンの名前)　テキスト
・・・ローカルを立ち上げた人のマシン名が記載されます。
②close preview　ボタン
・・・押すと本番環境に戻るボタン
③share previw　ボタン
・・・期限付きの誰でもみれるリンクを生成する。生成されたリンクにはパスワードも掛からないので、サイトは見せたいけどパスワードは教えたくない等の状況に使用できます。

まとめ

上記を使用することで公開後の対応も本番環境で触る必要なく共有が可能です。
かなり便利なので是非使用してみてください。