Closed5

ShopifyCLI + GitHubによる開発環境構築

LeivyLeivy

開発環境

まずは以下のように構築してみました

volumes:
    node_modules:

services:
    shopify:
        build:
            context: .
            dockerfile: Dockerfile
        working_dir: /workspace
        ports:
            - 3456:3456
            - 80:80
        volumes:
            - .:/workspace:cached
            - node_modules:/workspace/node_modules
        tty: true

FROM node:18.20-alpine

# システムのアップデート
RUN apk update && \
    apk upgrade

# 必須パッケージのインストール
RUN apk add --no-cache \
    openssh-client \
    sudo \
    build-base \
    curl \
    git \


# bashのインストールとデフォルトシェルの変更
RUN apk add --no-cache bash && \
    ln -sf /bin/bash /bin/sh

# vscodeユーザーを作成し、明示的にbashをデフォルトシェルに設定
RUN adduser -D -s /bin/bash vscode && \
    echo "vscode ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/vscode && \
    chmod 0440 /etc/sudoers.d/vscode

# 作業ディレクトリを設定
WORKDIR /workspace

# Node.jsのグローバルパッケージをインストール
RUN npm install -g npm@latest pnpm npm-check-updates @shopify/cli @shopify/theme

# vscodeユーザーに切り替え
USER vscode
LeivyLeivy

Shopifyにログイン

  1. 次のコマンドを実行
# xxxxxxの部分は自分のshopifyのドメイン
$ shopify theme list --store xxxxxx.myshopify.com
  1. 表示されたURLを開き、同じくコンソールに表示されている`verification code‘を入力

ログインができない

ログイン時にブラウザを開くためxdg-utilsが必要そう

https://github.com/Shopify/cli/issues/3938

Dockerfileの修正

FROM node:18.20-alpine

# システムのアップデート
RUN apk update && \
    apk upgrade

# 必須パッケージのインストール
RUN apk add --no-cache \
    openssh-client \
    sudo \
    build-base \
    curl \
    git \
    xdg-utils \

# bashのインストールとデフォルトシェルの変更
RUN apk add --no-cache bash && \
    ln -sf /bin/bash /bin/sh

# vscodeユーザーを作成し、明示的にbashをデフォルトシェルに設定
RUN adduser -D -s /bin/bash vscode && \
    echo "vscode ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/vscode && \
    chmod 0440 /etc/sudoers.d/vscode

# 作業ディレクトリを設定
WORKDIR /workspace

# Node.jsのグローバルパッケージをインストール
RUN npm install -g npm@latest pnpm npm-check-updates @shopify/cli @shopify/theme

# vscodeユーザーに切り替え
USER vscode

✔ Logged in.　となれば成功

LeivyLeivy

テーマをクローンする

$ shopify theme pull {theme id}

エラー


╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Ruby environment not found                                                  │
│                                                                              │
│  Make sure you have Ruby installed on your system. Documentation.            │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Ruby環境を見つけられないとのこと・・・
どうやらCLI セットアップの一部は Ruby に依存しているようです・・・

https://community.shopify.com/c/extensions/quot-ruby-environment-not-found-quot-when-trying-to-create-a/m-p/1920501

Dockerfileの更新

rubyを追加

FROM node:18.20-alpine

# システムのアップデート
RUN apk update && \
    apk upgrade

# 必須パッケージのインストール
RUN apk add --no-cache \
    openssh-client \
    sudo \
    build-base \
    curl \
    git \
    xdg-utils \
    ruby \
    ruby-dev \
    ruby-bundler


# bashのインストールとデフォルトシェルの変更
RUN apk add --no-cache bash && \
    ln -sf /bin/bash /bin/sh

# vscodeユーザーを作成し、明示的にbashをデフォルトシェルに設定
RUN adduser -D -s /bin/bash vscode && \
    echo "vscode ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/vscode && \
    chmod 0440 /etc/sudoers.d/vscode

# 作業ディレクトリを設定
WORKDIR /workspace

# Node.jsのグローバルパッケージをインストール
RUN npm install -g npm@latest pnpm npm-check-updates @shopify/cli @shopify/theme

# vscodeユーザーに切り替え
USER vscode

再びエラー

Error coming from bundle install
Command failed with exit code 23: bundle install
There was an error while trying to write to
/usr/local/lib/node_modules/@shopify/cli/dist/assets/cli-ruby/Gemfile.lock.

今度は権限が足りないというエラーが出ました
再度Dockerfileを修正します

FROM node:18.20-alpine

# システムのアップデート
RUN apk update && \
    apk upgrade

# 必須パッケージのインストール
RUN apk add --no-cache \
    openssh-client \
    sudo \
    build-base \
    curl \
    git \
    xdg-utils \
    ruby \
    ruby-dev \
    ruby-bundler


# bashのインストールとデフォルトシェルの変更
RUN apk add --no-cache bash && \
    ln -sf /bin/bash /bin/sh

# vscodeユーザーを作成し、明示的にbashをデフォルトシェルに設定
RUN adduser -D -s /bin/bash vscode && \
    echo "vscode ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/vscode && \
    chmod 0440 /etc/sudoers.d/vscode

# 作業ディレクトリを設定
WORKDIR /workspace

# Node.jsのグローバルパッケージをインストール
RUN npm install -g npm@latest pnpm npm-check-updates @shopify/cli @shopify/theme && \
    chown -R vscode:vscode /usr/local/lib/node_modules

# vscodeユーザーに切り替え
USER vscode

まだ解決せず・・・
pnpmにすると解決するという記事があったので試す

https://community.shopify.com/c/extensions/why-am-i-getting-a-series-of-error-messages-like-these-after-an/m-p/2327131/highlight/true

rubyのバージョンを色々試し、エラー解消を目指す

rubyのバージョンが新しすぎるせいでエラーが発生していそう

  • 3.0.6

https://community.shopify.com/c/shopify-cli-and-tools/quot-error-failed-to-build-gem-native-extension-quot-after/m-p/2536884/highlight/true#M4403

  • 3.1.2

https://community.shopify.com/c/shopify-cli-and-tools/error-coming-from-bundle-install/m-p/2626858#M4506

今回は3.0.6で解決に向かいました

build-essentialが必要そう

build-essentialが必要とのことなので追加してみる

https://community.shopify.com/c/shopify-design/error-coming-from-bundle-install/td-p/2666783

結果は変わらず

Ruby関連のエラーで進まない

ERROR: While executing gem ... (Gem::Exception) 0.470 OpenSSL is not available. Install OpenSSL and rebuild Ruby (preferred) or use non-HTTPS sources

OpenSSLがどうとかで停滞

解決策

やっと解決しました
OpenSSLに関するエラーは、Ubuntu22.04のせいで発生していました
Ubuntu22.04ではRuby3.1未満はビルドできないそうです

https://scrapbox.io/dojineko/Ubuntu22.04ではRuby3.1未満はビルドできない

そのためDockerfileを以下のように変更

FROM ubuntu:20.04

# apt-getのフロントエンドを非対話的に設定
ENV DEBIAN_FRONTEND=noninteractive
ENV SHELL=/bin/bash

# 必須パッケージのインストール
RUN apt-get update && apt-get upgrade -y && \
    apt-get install -y \
    curl \
    git \
    sudo \
    build-essential \
    xdg-utils \
    libssl-dev \
    zlib1g-dev \
    libreadline-dev \
    libyaml-dev \
    libffi-dev \
    libgdbm-dev \
    libncurses5-dev \
    pkg-config \
    libgmp-dev \
    wget \
    libsqlite3-dev

# 既存のNode.js関連パッケージを完全に削除
RUN apt-get remove -y nodejs nodejs-doc libnode-dev && \
    apt-get autoremove -y && \
    apt-get clean

# Node.js 18.xのインストール
RUN mkdir -p /etc/apt/keyrings && \
    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
    apt-get update && \
    apt-get install -y nodejs
    
# OpenSSLのパスを設定
ENV OPENSSL_DIR=/usr/lib/ssl
ENV OPENSSL_INCLUDE=/usr/include/openssl
ENV OPENSSL_LIB=/usr/lib/x86_64-linux-gnu

# Ruby 3.0.6 のインストール（OpenSSLサポート付き）
RUN curl -O https://cache.ruby-lang.org/pub/ruby/3.0/ruby-3.0.6.tar.gz && \
    tar -xzf ruby-3.0.6.tar.gz && \
    cd ruby-3.0.6 && \
    ./configure --prefix=/usr/local \
                --with-openssl-dir=$OPENSSL_DIR \
                --with-openssl-include=$OPENSSL_INCLUDE \
                --with-openssl-lib=$OPENSSL_LIB && \
    make -j "$(nproc)" && \
    make install && \
    cd .. && \
    rm -rf ruby-3.0.6 ruby-3.0.6.tar.gz

# OpenSSLの設定を確認
RUN ruby -ropenssl -e "puts OpenSSL::OPENSSL_VERSION"

# vscodeユーザーを作成し、明示的にbashをデフォルトシェルに設定
RUN useradd -m -s /bin/bash vscode && \
    echo "vscode ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/vscode && \
    chmod 0440 /etc/sudoers.d/vscode

# 作業ディレクトリを設定
WORKDIR /workspace

# pnpmのインストールと設定
ENV PNPM_HOME="/home/vscode/.local/share/pnpm"
ENV PATH="${PNPM_HOME}:${PATH}"
RUN npm install -g pnpm && \
    pnpm setup && \
    pnpm config set store-dir ~/.pnpm-store

# Node.jsのグローバルパッケージをインストール
RUN pnpm add -g npm@latest npm-check-updates

# Shopify CLIのインストール
RUN mkdir -p /home/vscode/shopify-cli && \
    cd /home/vscode/shopify-cli && \
    pnpm init && \
    pnpm add @shopify/cli @shopify/theme

# PATHを更新
ENV PATH="/home/vscode/shopify-cli/node_modules/.bin:${PATH}"

# Rubyの設定
ENV GEM_HOME=/home/vscode/.gem
ENV PATH="${GEM_HOME}/bin:${PATH}"
RUN echo 'export GEM_HOME=$HOME/.gem' >> /home/vscode/.bashrc && \
    echo 'export PATH=$GEM_HOME/bin:$PATH' >> /home/vscode/.bashrc

# Bundlerの特定バージョンをインストール
RUN gem install bundler

# OpenSSLの設定を確認
RUN ruby -ropenssl -e "puts OpenSSL::OPENSSL_VERSION"

# vscodeユーザーに切り替え
USER vscode

まだエラーがちょっと残るものの、この環境でshopify theme pullが動作するようになりました

このスクラップは2024/09/14にクローズされました