LoginSignup
4

More than 1 year has passed since last update.

posted at

updated at

Shopify App CLI(Node.js)を使用したアプリ開発で、ngrokを使わずにshopify serveを動かす

この記事は Shopify開発を盛り上げる(Liquid, React, Node.js, Graph QL) Advent Calendar 2020 の18日目の記事です。

記事の内容

Shopify App CLI(Node.js)を使用したアプリ開発では、shopify serveを動かすとローカル( http://localhost:8081 )でWebサーバーが動き、自動的にngrokという外部サービスが使われてインターネットから http://localhost:8081 にトンネリングされます。
環境により、ngrokを動かせないケースがあることを知りましたので、本記事ではngrokを使わずに同等の処理を行います。
ngrokでお困りの方の解決策になればいいな。

手順

環境構築はこの記事と同様となります(本記事との違いは後ほど)。

ローカルに立てたWebサーバーを、VPSのSSHサーバーを経由して外部公開する(リバースSSHポートフォワーディング)

上の記事と本記事の違い(1):ポート番号

上の記事では、外部からhttpsアクセスすると、ポートは以下のように変遷します。

443(VPSのhttps)
→ 13001(VPSのhttp)
→ 3001(ローカルのhttp)

Shopify App CLIでは、ローカルWebサーバーのポートは8081ですので、3001を8081に置き換える必要があります。

上の記事と本記事の違い(2):ローカルWebサーバー

上の記事では、動作確認用に「python3 -m http.server 3001」を起動してローカルWebサーバーを立てていますが、本記事では不要です。
代わりにshopify serveを起動することになります。

shopify serveの動かし方

オプションを付けずにshopify serveを起動すると、ngrokが使用されます。

--hostオプションを使えば、ngrokを使わずに、起動させるWebサーバーのURLを指定することができます。
この時、プロトコルはhttpsである必要があります。httpでは動きません。

上の記事と同様の環境構築をし、VPSのドメインも記事と同じ「 example.com 」だと仮定しますと、以下のようにオプションをつけて動かせば、リバースSSHポートフォワーディングによりローカルWebサーバー( http://localhost:8081 )にトンネリングされます。


shopify serve --host=https://example.com

動作確認したところ、以下のように ngrok を使わずにアプリを動かすことができました。

005.png

以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4