![](https://www.wown.co.jp/blog/wp-content/uploads/2023/02/ogp32-1024x537.png)
お疲れさまです。hanawaです。
本日も昨日に引き続き、Shopifyのテーマになります。
実際にこちらも今日業務中に行った内容なので、備忘録の一つになります。
これで次にShopifyでコーディングするのも、今回よりかなり早くできそうです。
テーマはデータをターミナルで本番環境にプッシュする方法と書いてありますが、プルからプッシュまで一連の流れをまとめておきます。
目次
プルでもプッシュでもまずやること
プルしたい時も、プッシュしたい時もまずはフォルダを用意して、Shopifyのデータをそのフォルダに入るように指示することが大前提です。プルする時も、プッシュする時もまずはこの工程を忘れないようにしてください。
①空フォルダを用意する
本番環境を自分のPCに入れるためには、それを入れるためのフォルダを用意する必要があります。
今回は空フォルダをsampleとして進めていきます。
②ターミナルで空フォルダに入る
私はここをやり忘れてエラーに何回もなりました。
作った空フォルダをどこに保管しているかを、先に指定しておきます。
今回はデスクトップにsampleフォルダを保管したので、ターミナルを使って指定していきます。
入力するのは全て%以降です。
user@usernoMacBook-Air % cd desktop
user@usernoMacBook-Air desktop % cd sample
user@usernoMacBook-Air sample %
cdというコマンドが、ディレクトリに移動するという意味なので大きいフォルダから入っていくことを忘れないでください。
ちゃんとフォルダに移動できていたら、%の前にフォルダ名が入るので、確認してみてください。
③ターミナルを使ってShopify(本番環境)にログインする
user@usernoMacBook-Air sample % shopify login --store xxxxxx.myshopify.com
shopify login --store xxxxxx.myshopify.com
と入力してShopifyにログインします。
※xxxxxx.myshopify.com
は例です。実際の本番環境のURLを入力してください。
本番環境のデータをプルする場合
本番環境のデータをプルする(取得する)
ログインまでできたらプルしましょう。
user@usernoMacBook-Air sample % shopify theme pull
shopify theme pull
と入力して、空のフォルダ(sample)に本番環境のデータをプル(取得)します。
これで空だったsampleのフォルダに本番環境と同じデータが入りました。
sampleだけ触っても本番環境には反映されませんので、ここで確認しながらテーマの編集をしたりしてください。
反映されているか確認する方法
プルした後、ターミナルがテスト環境のURLを表示してくれるコマンドがあります。
user@usernoMacBook-Air sample % shopify theme serve
shopify theme serve
と入力して、ローカル環境(テスト環境)のURLが表示されます。
プルしたsampleのデータを触ると、テスト環境のURLにはすぐ反映されるので、そちらで確認しながらテーマの編集を行いましょう。
編集したデータを本番環境にプッシュする場合
先ほどまでは、本番環境のデータを自分の環境に反映する方法を紹介しました。
次は自分の環境で、liquidやcssを書き換えたりした後に、本番環境に反映する方法をご紹介します。
こちらも上記同様、ログインまでできたらプッシュしましょう。
user@usernoMacBook-Air sample % shopify theme push
shopify theme push
と入力して、本番環境にプッシュします。
これで編集後のデータが本番環境に反映されました。
すぐに本番環境のURLがターミナルに表示されるので、きちんと反映されているか確認してください。
以上になります。いかがでしたでしょうか。
またShopifyの案件に携わることがあったら、今回やったことを思い出して、今回よりスムーズに進めていきたいです。
誰かの役に立ちますように。
本日もお疲れさまでした!
WEB制作・ITに関するお悩みや
ご質問等お気軽にご相談ください
![contact](https://www.wown.co.jp/blog/wp-content/themes/newwownblog/img/wown_contact.png)