0
Help us understand the problem. What are the problem?

posted at

updated at

ちょっと前のnodeで開発されたIonicアプリを動かす方法の覚書

はじめに

業務上、2,3年前(かもっと前?)の少し古いバージョンのionicを使って開発されたアプリを動かさないといけなくなり、なんかうまく動かないので、なんとか動かす方法を調べました。

まあ、結論から言ったら単純で、アプリで使われていたパッケージ(のバージョン)が、開発環境のnode(npm)のバージョンではサポートされていなかっただけでした。
初心者には世知辛いですね。

あ、ちなみにOSはWindows10です。

問題

とりあえず、プロジェクトディレクトリで、

$ionic serve

をしたら動かなかった。

それは当たり前のことで、というのも
Githubからダウンロードしたリポジトリを、自分の環境で起動させる方法(Ionicの場合)
に書いてあるように、package.jsonで記述されているパッケージがインストールされていないから。

そこで、同じく上の記事にも書かれているようにしたら動くかなと思ってやってみると、

$ npm install
...(略)...
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node":

HTTP error 404 Not Found
...(略)...

と、エラーが出て動かなくて悲しくなった。

原因

これがエラーの原因でした。

どうも、nodeのバージョン12以降ではnode-sassというパッケージがサポートされていないらしく、
一方、開発環境のnodeが14.16.1(npmは6.14.12)だったので、該当のパッケージをインストールできていなかったのが原因でした。

解決策

使っているnodeのバージョンを変える。
そのために、nvmを使う。

  1. nodeのバージョン管理をするnvmをインストール
    こちらの記事を参考にしました!(Macとかでも基本的には同じ感じかと。)

    https://github.com/coreybutler/nvm-windows/releases からnvm-setup.zipをダウンロードしてnvmをインストール。

  2. nvmでアプリで使うバージョンのnodeをインストール→nodeのバージョン切り替え
    同じく上の記事を参考にしました。

    まずはインストール済みのバージョンを確認。
    $ nvm list
    続いて、バージョンを指定してインストール
    $ nvm install バージョン番号
    バージョンの切り替え
    $ nvm use バージョン番号
    バージョンの確認
    $ node -v

  3. パッケージをインストール
    npm install
    エラーがでなければOK. エラーが出る場合は調整が必要?

  4. serveでブラウザで動くはず!
    ionic serve
    自分の環境では動きました。いぇーい。

次はbuildを目指します。

さいごに

普段はDjangoとか使っていて、スマホアプリ開発とかは全くの初心者なので勉強しながらだと意味分かんないぐらいに時間がかかってしまいました。
きっとこうやって人は成長していくんだろう、、、。
賢者からは程遠い生き方だなあ、、、。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?