😸

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

2022/04/24に公開

Git

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

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

Gitのインストール

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

GitHub CLI のインストール

Rubyのインストール

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

ShopifyCLI は、最低2.7以上のRubyで

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

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

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

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

sudo rbenv install 3.1.2

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

 sudo  gem install bundler

ShopifyCLIをインストール

Failed to build gem native extension

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

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

更にエラー


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のバージョンが変わらない

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

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

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

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

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

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

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

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

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

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

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

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

 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

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

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の特定バージョン削除方法

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

rbenv uninstall 2.2.2

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

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

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

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

ruby アップデート方法

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

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

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

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

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

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

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

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

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

 sudo apt-get autoremove

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

今回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が、ネットで書かれています。
でも、情報漏れがあるそうです。

役立つ記事です。

Gitのインストール

GitHub CLI のインストール

Rubyのインストール

ShopifyCLI は、最低2.7以上のRubyで

ShopifyCLIをインストール

Failed to build gem native extension

更にエラー

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

shopify-cliをインストール

shopify-cliでログイン

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

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

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

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

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

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

ruby アップデート方法

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

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

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

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

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

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

Discussion