Shopify App CLIとNode.jsを使用してShopifyアプリを構築する

## この記事を書こうと思った背景と、記事を読ん得られるもの
　- Shopifyアプリを構築する必要があったので、その手順と備忘録です。
　- ハマった箇所があったのでその説明
　  - 結論だけいってしまうと、Node 17で構築しようとするとエラーがでるので、公式推奨の16.13.1にすべき（21年12月時点）
　- Nodeバージョン変更するのに便利なツールを紹介します

## 記事の対象者
- Shopifyアプリ構築者
- 未来の自分　

## 環境
- MacOS 10.15.6
- Node 17.2.0 => 16.13.1に変更
- Homebrew 3.3.7

## 参考にした記事・動画
#### Shopify Japanが出してる動画
- 2021年12月現在で、少し古い内容だが全体像をつかむのにためになる。動画内で叩くShopifyAppCLIコマンドが少し古いので、その場合は公式ドキュメントを読んで確認をする。
  - https://www.youtube.com/watch?v=2zDFNS6r1aQ&t=4259s
  - https://www.youtube.com/watch?v=QZ16h6PlGIU&t=3832s

## Shopify App CLIの導入
- https://shopify.dev/apps/tools/cli/installation を参考　
- `brew tap shopify/shopify`
- `brew install shopify-cli`

## アプリを構築
- `shopify app create node`
  - `shopify app create`とうつと、php,node,railsのどれかオプションを選べといわれる
  - このコマンドをうつと、聞かれること
    - アプリの名前
    - 公開アプリか、カスタムアプリか
    - どのストアにいれるか
- `cd <先ほど決めたアプリの名前>`
- `shopify app serve`
  - この時点でアプリが起動され、ngrokが自動で決めたURLを教えてもらえる。そのURLにアクセスして、インストールを承認すれば埋め込みアプリが構築される。

## つまった箇所
- Nodeのverが17で`shopify app serve`と打つと、下記のようなエラーが表示された。


```
⭑ To install and start using your app, open this URL in your browser:
https://xxxxxxx.ngrok.io/auth?shop=xxxxxxxxx.myshopify.com

┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-app-node@1.0.0 dev
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.15
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching path(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ node:internal/modules/cjs/loader:488
┃       throw e;
┃       ^
┃ 
┃ Error: Package subpath './lib/parser' is not defined by "exports" in /path/node_modules/next/node_modules/postcss/package.json
┃     at new NodeError (node:internal/errors:371:5)
┃     at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
┃     at packageExportsResolve (node:internal/modules/esm/resolve:683:3)
┃     at resolveExports (node:internal/modules/cjs/loader:482:36)
┃     at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
┃     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
┃     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
┃     at Module.require (node:internal/modules/cjs/loader:999:19)
┃     at require (node:internal/modules/cjs/helpers:102:18)
┃     at Object.552 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11590)
┃     at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃     at Object.560 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:400)
┃     at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃     at Object.290 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:260)
┃     at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃     at Object.632 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:3733) {
┃   code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
┃ }
┃ 
┃ Node.js v17.2.0
┃ [nodemon] app crashed - waiting for file changes before starting...
```

- これとまったくエラーはぐぐった感じなかったが、近いエラーがStack overflowにあった。また、有識者に相談したところ、Nodeまわりはバージョンの違いで不具合が起きることがあるので、公式の推奨にした方がいいといわれたので公式の推奨verをチェック。
  - https://stackoverflow.com/questions/69693907/error-err-package-path-not-exported-package-subpath-lib-tokenize-is-not-d
- 21年12月時点
- ![スクリーンショット 2021-12-10 9.44.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407898/41c12efb-4cec-ca52-8292-74f76576500e.png)
- Nodeのバージョンを17 → 16.13.1に変更することで解決した

## Nodeバージョン変更するのに便利なツールを紹介
- n  （ https://www.npmjs.com/package/n）
  - ターミナルで簡単に切り替えられる
  - 下記は 参考にした記事
     - https://blog1.mammb.com/entry/2019/11/26/090000
     - https://qiita.com/from_Unknown/items/705c28bda80a70ca4d48
- 詳細は上記のリンクからご確認お願いします。下記は、実際に自分が打ったコマンドです
  - `npm install -g n`
  - `n ls-remote --all`
  - `n 16.13.1`
  - `sudo n 16.13.1`
  - `node --version`