😸

Shopifyテーマの開発環境を作る

2022/04/24に公開約12,400字

Shopifyテーマの開発環境を作りたいと思い、実行したことを記録します。
下記の記事を参考にしました。
私は、ubuntu18.04LTSの環境で、作りました。

現在は、Shopify CLIを使ってテーマやアプリを開発する流れを推奨しているようです。

https://www.shopify.com/jp/blog/partner-local-shopify-theme-setup-three-steps

https://www.shopify.com/jp/blog/partner-shopify-app-development

https://chatboost-ec.dmm.com/blogs/column/shopify-theme-update

https://qiita.com/yuma-ito-bd/items/00f89ca0c04909c7c467

Gitのインストール

こちらの記事を参考にしました。

https://zenn.dev/kusaremkn/articles/1262af3dea93a3

GitHub CLI のインストール

https://qiita.com/cointoss1973/items/54ce4967ed2d09c3bbc1

Rubyのインストール

Rubyのバージョンは、3.1.2をインストールしてください。
後で困らないように、一番新しいバージョンをインストールしてください。

ShopifyCLI は、最低2.7以上のRubyで

ShopifyCLIの最低条件は、ruby2.7以上です。
公式の手順を確認してください。

https://shopify.dev/apps/tools/cli/getting-started

最初のrubyのバージョンが2.5.1程度の場合は、今回の私がハマったように、sudoのことで悩むと思います。
気をつけてください。
rubyのバージョンが古いとShopifyCLIが、一つ前のバージョンでインストールされるようなのです。

https://shopify.dev/apps/tools/cli/upgrade-uninstall
この記事のようにshopify-cli-2.15.6.debをダウントードして、aptを使ってインストールしようとするとsudoを使えとエラーが出てしまうと思います。
そして、sudoユーザーと一般ユーザーのrubyのバージョンが違うことで、悩むことになってしまいます。
最初にrubyをインストールするときは、ubuntuのリポジトリを使ってインストールすることは、止めた方が良いです。
ubuntuのrubyのバージョンが、古いからです。

こちらの記事を参考にしました。

https://lab4ict.com/system/archives/2608
sudo rbenv install 3.1.2

管理ツールをインストールするときは、sudoをつけましょう。

 sudo  gem install bundler

ShopifyCLIをインストール

https://shopify.dev/themes/tools/theme-kit

https://shopify.dev/themes/tools/cli?shpxid=49c8e15f-A916-43AA-91D2-B0F229C2B090

Failed to build gem native extension

このFailed to build gem native extensionというエラーが出たので、調べました。

こちらの記事を参考にしました。

https://ytyaru.hatenablog.com/entry/2017/05/13/000000

更にエラー


While executing gem ... (Gem::RemoteFetcher::FetchError)
    bad response Forbidden 403 (https://api.rubygems.org/quick/Marshal.4.8/nokogiri-1.13.4-x64-unknown.gemspec.rz)

Rubyのバージョンが変わらない

調べている中で、参考にした記事です。

https://stackoverflow-com.translate.goog/questions/47026174/find-spec-for-exe-cant-find-gem-bundler-0-a-gemgemnotfoundexception?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

https://www.tweeeety.blog/entry/2018/02/03/234355

https://style.potepan.com/articles/31248.html

shopify-cliをインストール

gem install shopify-cli

shopify version
1.14.0

shopify-cliでログイン

最初に、空のテーマを作ります。
これは、既存のテーマをカスタマイズするときも、一度空を作ってください。
私は、先に空のテーマを作り、既存のカスタマイズしたいテーマのディレクトリに、移動させました。

空のテーマのディレクトリで、下記のコマンドを順番に実行してください。

shopify theme init

このあと既存のテーマをカスタマイズしたい場合は、テーマのフォルダのディレクトリに移動します。

cd /home/***/***

このあとローカルのテーマをテスト表示するコマンドを実行します。

shopify theme serve

この時に、Rubyのversionが低いとエラーになります。
そのため最初から、Rubyのバージョンを3.1.2にした方が良いと思います。

 shopify theme serve
rbenv: shopify: command not found

The `shopify' command exists in these Ruby versions:
  3.1.2

Rubyのバージョンが変わっていないときは、操作しているディレクトリで、次のコマンドを実行してください。

ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [x86_64-linux]
~/***/shopify_theme$ rbenv versions
  system
  2.6.0
* 2.6.10 (set by /home/***/***/shopify_theme/.ruby-version)
  3.1.2

:~/***/shopify_theme$ sudo rbenv global 3.1.2
[sudo] *** のパスワード: 

:~/***/shopify_theme$ rbenv versions
  system
  2.6.0
* 2.6.10 (set by /home/***/***/shopify_theme/.ruby-version)
  3.1.2
~/***/shopify_theme$ ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [x86_64-linux]
~/***/shopify_theme$ sudo rbenv local 3.1.2
~/***/shopify_theme$ ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]

このコマンドを実行すると、shopifyにログインするように案内が表示されます。

shopify login --store ***.myshopify.com

*** には、ログインしたいお店の名前を入力してください。

こちらの公式の記事の手順と解説を確認してください。

https://shopify.dev/themes/tools/cli/getting-started

本願は、Dockerを使って開発環境を作りたかった

GNOMEを使ったubuntuのリモートデスクトップ環境を作り、shopify開発環境を作ることでした。
でも、リモートデスクトップの環境が出来ても上手く動かない可能性が出てきたので、直接Ubuntu18.04LTSの環境にインストールして、開発環境を作りました。

一応テーマのプレビューまで出来る内容となりましたので、この記事を公開したいと思います。
今請け負っている仕事が一段落したら、Dockerで開発環境を作りたいとおもいます。

Rubyのバージョンが合わずshopify-cliの更新ができないとき

Rubyをrootユーザーでインストールするように、気をつけてください。
私は、これが原因で、更新が出来ず悩みました。
下記の手順でrootユーザーに、Rubyをインストールしました。
この方法でも、sudoとユーザーのRubyのバージョンの違いを直すことが出来なかったです。
コマンドの流れを私自身の備忘録の意味も込めて、掲載します。

#rootユーザーに、パスワード設定
 sudo passwd root

https://qiita.com/_toki/items/cced337d72103ed4387c

Rudy 3.1.2をインストールしたい。
でも、無いと言われたので、インストール可能なバージョンを調べました。

root@***:~# rbenv install 3.1.2
ruby-build: definition not found: 3.1.2

See all available versions with `rbenv install --list'.

If the version you need is missing, try upgrading ruby-build.
root@***:~# rbenv install --list
Available versions:
  1.8.5-p52
  1.8.5-p113
  1.8.5-p114
  1.8.5-p115
  1.8.5-p231
  1.8.6
  1.8.6-p36
  1.8.6-p110
  1.8.6-p111
  1.8.6-p114
  1.8.6-p230
  1.8.6-p286
  1.8.6-p287
  1.8.6-p368
  1.8.6-p369
  1.8.6-p383
  1.8.6-p388
  1.8.6-p398
  1.8.6-p399
  1.8.6-p420
  1.8.7-preview1
  1.8.7-preview2
  1.8.7-preview3
  1.8.7-preview4
  1.8.7
  1.8.7-p17
  1.8.7-p22
  1.8.7-p71
  1.8.7-p72
  1.8.7-p160
  1.8.7-p173
  1.8.7-p174
  1.8.7-p248
  1.8.7-p249
  1.8.7-p299
  1.8.7-p301
  1.8.7-p302
  1.8.7-p330
  1.8.7-p334
  1.8.7-p352
  1.8.7-p357
  1.8.7-p358
  1.8.7-p370
  1.8.7-p371
  1.8.7-p373
  1.8.7-p374
  1.8.7-p375
  1.9.0-0
  1.9.0-1
  1.9.0-2
  1.9.0-3
  1.9.0-4
  1.9.0-5
  1.9.1-preview1
  1.9.1-preview2
  1.9.1-rc1
  1.9.1-rc2
  1.9.1-p0
  1.9.1-p129
  1.9.1-p243
  1.9.1-p376
  1.9.1-p378
  1.9.1-p429
  1.9.1-p430
  1.9.1-p431
  1.9.2-preview1
  1.9.2-preview3
  1.9.2-rc1
  1.9.2-rc2
  1.9.2-p0
  1.9.2-p136
  1.9.2-p180
  1.9.2-p290
  1.9.2-p318
  1.9.2-p320
  1.9.2-p326
  1.9.2-p330
  1.9.3-dev
  1.9.3-preview1
  1.9.3-rc1
  1.9.3-p0
  1.9.3-p105
  1.9.3-p125
  1.9.3-p194
  1.9.3-p286
  1.9.3-p327
  1.9.3-p362
  1.9.3-p374
  1.9.3-p385
  1.9.3-p392
  1.9.3-p426
  1.9.3-p429
  1.9.3-p448
  1.9.3-p484
  1.9.3-p545
  1.9.3-p547
  1.9.3-p550
  1.9.3-p551
  2.0.0-dev
  2.0.0-preview1
  2.0.0-preview2
  2.0.0-rc1
  2.0.0-rc2
  2.0.0-p0
  2.0.0-p195
  2.0.0-p247
  2.0.0-p353
  2.0.0-p451
  2.0.0-p481
  2.0.0-p576
  2.0.0-p594
  2.0.0-p598
  2.0.0-p643
  2.0.0-p645
  2.0.0-p647
  2.0.0-p648
  2.1.0-dev
  2.1.0-preview1
  2.1.0-preview2
  2.1.0-rc1
  2.1.0
  2.1.1
  2.1.2
  2.1.3
  2.1.4
  2.1.5
  2.1.6
  2.1.7
  2.1.8
  2.1.9
  2.1.10
  2.2.0-dev
  2.2.0-preview1
  2.2.0-preview2
  2.2.0-rc1
  2.2.0
  2.2.1
  2.2.2
  2.2.3
  2.2.4
  2.2.5
  2.2.6
  2.2.7
  2.3.0-dev
  2.3.0-preview1
  2.3.0-preview2
  2.3.0
  2.3.1
  2.3.2
  2.3.3
  2.3.4
  2.4.0-dev
  2.4.0-preview1
  2.4.0-preview2
  2.4.0-preview3
  2.4.0-rc1
  2.4.0
  2.4.1
  2.5.0-dev
  jruby-1.5.6
  jruby-1.6.3
  jruby-1.6.4
  jruby-1.6.5
  

ruby-buildをインストールします。

mkdir -p "$(rbenv root)"/plugins

git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

下記の記事を参考にして、アップデートします。

https://qiita.com/ChaaaBooo/items/10c7a484ec83db368960
 cd ~/.rbenv/plugins/ruby-build 
 git pull origin master

アップデートされたか確認します。

root@***:~/.rbenv/plugins/ruby-build# rbenv install -l
Available versions:
  1.8.5-p52
  1.8.5-p113
  1.8.5-p114
  1.8.5-p115
  1.8.5-p231
  1.8.6
  1.8.6-p36
  1.8.6-p110
  1.8.6-p111
  1.8.6-p114
  1.8.6-p230
  1.8.6-p286
  1.8.6-p287
  1.8.6-p368
  1.8.6-p369
  1.8.6-p383
  1.8.6-p388
  1.8.6-p398
  1.8.6-p399
  1.8.6-p420
  1.8.7-preview1
  1.8.7-preview2
  1.8.7-preview3
  1.8.7-preview4
  1.8.7
  1.8.7-p17
  1.8.7-p22
  1.8.7-p71
  1.8.7-p72
  1.8.7-p160
  1.8.7-p173
  1.8.7-p174
  1.8.7-p248
  1.8.7-p249
  1.8.7-p299
  1.8.7-p301
  1.8.7-p302
  1.8.7-p330
  1.8.7-p334
  1.8.7-p352
  1.8.7-p357
  1.8.7-p358
  1.8.7-p370
  1.8.7-p371
  1.8.7-p373
  1.8.7-p374
  1.8.7-p375
  1.9.0-0
  1.9.0-1
  1.9.0-2
  1.9.0-3
  1.9.0-4
  1.9.0-5
  1.9.1-preview1
  1.9.1-preview2
  1.9.1-rc1
  1.9.1-rc2
  1.9.1-p0
  1.9.1-p129
  1.9.1-p243
  1.9.1-p376
  1.9.1-p378
  1.9.1-p429
  1.9.1-p430
  1.9.1-p431
  1.9.2-preview1
  1.9.2-preview3
  1.9.2-rc1
  1.9.2-rc2
  1.9.2-p0
  1.9.2-p136
  1.9.2-p180
  1.9.2-p290
  1.9.2-p318
  1.9.2-p320
  1.9.2-p326
  1.9.2-p330
  1.9.3-dev
  1.9.3-preview1
  1.9.3-rc1
  1.9.3-p0
  1.9.3-p105
  1.9.3-p125
  1.9.3-p194
  1.9.3-p286
  1.9.3-p327
  1.9.3-p362
  1.9.3-p374
  1.9.3-p385
  1.9.3-p392
  1.9.3-p426
  1.9.3-p429
  1.9.3-p448
  1.9.3-p484
  1.9.3-p545
  1.9.3-p547
  1.9.3-p550
  1.9.3-p551
  2.0.0-dev
  2.0.0-preview1
  2.0.0-preview2
  2.0.0-rc1
  2.0.0-rc2
  2.0.0-p0
  2.0.0-p195
  2.0.0-p247
  2.0.0-p353
  2.0.0-p451
  2.0.0-p481
  2.0.0-p576
  2.0.0-p594
  2.0.0-p598
  2.0.0-p643
  2.0.0-p645
  2.0.0-p647
  2.0.0-p648
  2.1.0-dev
  2.1.0-preview1
  2.1.0-preview2
  2.1.0-rc1
  2.1.0
  2.1.1
  2.1.2
  2.1.3
  2.1.4
  2.1.5
  2.1.6
  2.1.7
  2.1.8
  2.1.9
  2.1.10
  2.2.0-dev
  2.2.0-preview1
  2.2.0-preview2
  2.2.0-rc1
  2.2.0
  2.2.1
  2.2.2
  2.2.3
  2.2.4
  2.2.5
  2.2.6
  2.2.7
  2.2.8
  2.2.9
  2.2.10
  2.3.0-dev
  2.3.0-preview1
  2.3.0-preview2
  2.3.0
  2.3.1
  2.3.2
  2.3.3
  2.3.4
  2.3.5
  2.3.6
  2.3.7
  2.3.8
  2.4.0-dev
  2.4.0-preview1
  2.4.0-preview2
  2.4.0-preview3
  2.4.0-rc1
  2.4.0
  2.4.1
  2.4.2
  2.4.3
  2.4.4
  2.4.5
  2.4.6
  2.4.7
  2.4.8
  2.4.9
  2.4.10
  2.5.0-dev
  2.5.0-preview1
  2.5.0-rc1
  2.5.0
  2.5.1
  2.5.2
  2.5.3
  2.5.4
  2.5.5
  2.5.6
  2.5.7
  2.5.8
  2.5.9
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
  2.6.0-preview3
  2.6.0-rc1
  2.6.0-rc2
  2.6.0
  2.6.1
  2.6.2
  2.6.3
  2.6.4
  2.6.5
  2.6.6
  2.6.7
  2.6.8
  2.6.9
  2.6.10
  2.7.0-dev
  2.7.0-preview1
  2.7.0-preview2
  2.7.0-preview3
  2.7.0-rc1
  2.7.0-rc2
  2.7.0
  2.7.1
  2.7.2
  2.7.3
  2.7.4
  2.7.5
  2.7.6
  3.0.0-dev
  3.0.0-preview1
  3.0.0-preview2
  3.0.0-rc1
  3.0.0
  3.0.1
  3.0.2
  3.0.3
  3.0.4
  3.1.0-dev
  3.1.0-preview1
  3.1.0
  3.1.1
  3.1.2
  3.2.0-dev
  3.2.0-preview1
  artichoke-dev
  jruby-dev
  jruby-1.5.6
  jruby-1.6.3
  jruby-1.6.4
  jruby-1.6.5
  jruby-1.6.5.1
  jruby-1.6.6
#以下省略

ruby 3.1.2をインストールします。

root@***:~/.rbenv/plugins/ruby-build# rbenv install 3.1.2

こちらの記事に従いパスなどを設定します。

https://qiita.com/yuma-ito-bd/items/00f89ca0c04909c7c467
root@***:~#  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
root@***:~# ~/.rbenv/bin/rbenv init
-su: /root/.rbenv/bin/rbenv: そのようなファイルやディレクトリはありません
root@***:~#  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
root@***:~#  source ~/.bashrc
root@***:~# ruby --version
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]

rubyの特定バージョン削除方法

こちらの記事が、役立ちます。

https://qiita.com/MotohiroSiobara/items/1c347e5c6fbf268a7083
rbenv uninstall 2.2.2 

sudoユーザーとログインしているユーザーのRubyのバージョン違い

今回sudoユーザーとログインしているユーザーのRubyのバージョンが違うため、Shopify CLIのアップデートが出来ない状況が続いています。
下記のQ&Aにも、投稿しました。

https://qiita.com/masaru21/questions/ff1c14eb36fa813f776d

https://teratail.com/questions/l1k3p1la8m6bru

この再インストールの関係があり、先にRubyのアンインストールの参考記事をご紹介しました。

こちらの記事に従って行いましたが、改善されないのです。

https://tsumikiasobi.net/wordpress/archives/402

ruby アップデート方法

こちらの記事は、参考になります。

https://qiita.com/jhanyu/items/38671f7e9f03b77670c0

フォルダが空になっていないと、エラーになります。

fatal: destination path **** already exists and is not an empty directory.

というようなエラーが出た場合に、参考になります。

エラーが出た時の参考になります

https://qiita.com/ochun/items/163abb37339458b3b3db

rubyをインストールするとき

rubyのインストールでコマンドをウェブページの記事からコピペするときは、カレントディレクトリに注意してください。
plug-inのディレクトリに居ると思いますので、必ずcdで、もとに戻ってください。

パッケージの自動削除が必要な場合もあるので

私の備忘録を兼ねて、apt-getを使ってインストールしたパッケージで不要なので削除できるとメッセージが出た時に対応できるように、記録します。

 sudo apt-get autoremove

下記の記事を参考にしました。

https://codechacha.com/ja/linux-apt-purge-vs-remove/

今回sudoと一般ユーザーのrubyのバージョンが異なり修正できない件は

今回のsudoと一般ユーザーのrubyのバージョンが異なり修正できない件は、私がubuntuのリポジトリで、Rubyを最初にインストールしていたことが、原因のようです。

~$ sudo ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
~$ ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]

このx86_64-linux-gnuのgunが、気になります。

rbenv経由でインストールしたバージョンしかrbenvでは、

rbenvでは、rbenv経由でインストールしたバージョンしか表示できないと知りました。
そんため今回は、rbenvでインストールしていないので、sudoユーザーのrubyのバージョンの切り替えが出来なかったと思われます。

この記事の初めの方で書きましたが、shopify-cliをインストールしているときは、最新のrubyをrbenvを使ってインストールしてください。
ubuntuのリポジトリのrubyは、この記事を書いている時点では、古いバージョンのRubyのようなので、気を付けてください。

rubyのインストールの確認は、このURLが良いです。

curl -fsSL https://raw.githubusercontent.com/rbenv/rbenv-installer/main/bin/rbenv-doctor | bash

これとは別のURLが、ネットで書かれています。
でも、情報漏れがあるそうです。

役立つ記事です。

https://www.syaka.co.jp/2021/05/26/rbenvのインストールと設定/

Discussion

ログインするとコメントできます