2023.08.23[Wed]

Shopify theme app extensionのためのNode.js + Ruby Dockerイメージ

  • Shopify

目次

  • - Dockerfile
  • - cloudbuild.yaml
  • - 終わりに

Webエンジニアの茄子です。

Shopify Appのビルド時、Theme app extensionがある場合は同時にビルドされますが、バンドルのためにrubyが必要です。(執筆時 @shopify/cli 3.44.1 時点)
MacにはデフォルトでRubyが入っているのでローカルでビルドする分には気になりませんが、CIジョブなどではジョブを行う仮想マシンにインストールされていない場合があります。

例:

今回はNode.jsとrubyがインストールされたdockerイメージの作成と、GCP Cloud Buildでの利用例を紹介します。

Dockerfile

NodeかRubyかのイメージにもう片方を入れればいいので二通りありますが、今回はNodeをベースにします。
バージョンは例としてNode.js 18 + Ruby 3.1.4 としています。任意のバージョンにそれぞれ変えてください。(node:16, 18, 20 それぞれ動作確認済みです。)

FROM node:18
ARG RUBY_VERSION=3.1.4

RUN apt-get update

RUN apt-get install -y git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev

RUN cd ~/ && \
    curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash && \
    echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc && \
    echo 'eval "$(rbenv init -)"' >> ~/.bashrc && \
    . ~/.bashrc && \
    rbenv install -l && \
    rbenv install ${RUBY_VERSION} && \
    rbenv versions && \
    rbenv global ${RUBY_VERSION} && \
    gem install bundler && \
    ruby -v

ENV PATH /root/.rbenv/shims:/root/.rbenv/bin:/usr/local/sbin::$PATH


上記Dockerfileでイメージをビルドします。

docker build --load -f deployments/Dockerfie -t node-and-ruby:18-3.1.4 .

GCPのプロジェクトにプッシュします。

docker tag node-and-ruby:18-3.1.4 asia.gcr.io/your-project-012345/node-and-ruby:18-3.1.4
docker push asia.gcr.io/your-project-012345/node-and-ruby:18-3.1.4

cloudbuild.yaml

以下のように cloudbuild.yaml の中でイメージ(ビルダー)を呼び出します。

steps:
  - name: "some-command"

...
...

  - name: "asia.gcr.io/your-project-012345/node-and-ruby:18-3.1.4"
    entrypoint: npm
    args: ["install", "--production=false"]
  - name: "asia.gcr.io/your-project-012345/node-and-ruby:18-3.1.4"
    entrypoint: npm
    args: ["run", "build"]

...
...

終わりに

Node.js と Ruby の入ったdockerイメージの作成を紹介しました。
お役に立てれば幸いです。

Share

Shopifyの注文確認メールに取扱説明書ファイルへのリンクを記載する方法Shopifyの商品詳細ページにおいて選択されているバリエーションの商品画像だけを表示するコードカスタマイズ