LoginSignup
1
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-05-18

はじめに

業務上、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とか使っていて、スマホアプリ開発とかは全くの初心者なので勉強しながらだと意味分かんないぐらいに時間がかかってしまいました。
きっとこうやって人は成長していくんだろう、、、。
賢者からは程遠い生き方だなあ、、、。

1
0
0

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
  3. You can use dark theme
What you can do with signing up
1
0