Shopifyテーマの開発環境を作る
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が、ネットで書かれています。
でも、情報漏れがあるそうです。
役立つ記事です。
Discussion