背景
nuxt2アプリをnuxt3にマイグレーションしてた時、これネイティブアプリ化するって思ったら、もう一回作るのか、面倒くさいなぁ、って思ったことと、reactなりnext.jsにするのって大変だなぁって思ってしまったので、そこそこ大規模に改修したので、なんとかnuxt.js自体をネイティブアプリ化できないか考えたのですが、普通にありましたので、やり方を記載しておきます。
前提
- xcode 15(14以下でも構いませんが、xcodeがないとiosで動かせません)
- nuxt 3.7.4(ぶっちゃけv3なら問題ないと思います)
- android studio(androidを使う場合インストールしておいてください)
- npm(18以上だと、nuxt3に完全対応してるはずです)
準備
今回、マイグレーションしたnuxtアプリですが、version2の頃から多少お世話しておりました。
こちらのサイトをv2からv3へマイグレーション致しました。(自慢話)
で、nuxtアプリを用意しましたら、使えるようにgenerateしていきます。
やり方
pnpmやyarnをパッケージマネージャにしてるかたはそれに読み替えてください。
基本的にはnpxと書かれてる部分をyarnにしたりするだけです。
# まずはアプリを生成すること
npm run generate
さて、この状況でメモリが足りない、という旨のエラーが出ることがありますが、ちゃんと対処法がありますので、安心してください。また、別の理由でエラーが出ても対処法があるので記しておきます。
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
以上のようなエラーが出たら、ヒープ領域が足りてないので、ターミナルが生きてる間だけ増やしましょう。
export NODE_OPTIONS="--max-old-space-size=4096"
4096とは4GBのことですが、各自必要な領域を考えて割り当ててください。私の場合はこれくらいないとダメでした。
ERROR Exiting due to prerender errors.が出たとき
ERROR Exiting due to prerender errors.
とででしまったときはnuxt.config.tsを書き換えます。
nitro:{
prerender: {
failOnError: false,
},
},
をdefineNuxtConfig内に追記しましょう。
Capacitorの用意
私は気にならなかったので、良いのですが、nuxtに全く関係ないgradleファイル等がnuxtディレクトリに入るのが嫌な方は、srcディレクトリ等にnuxtを移動させましょう。
それではCapacitorの準備です。
# capacitor本体のインストール
npm i @capacitor/core
# capacitorのCLIをインストール
npm i -D @capacitor/cli
これでインストールは完了ですので、次に初期化を行います。
npx cap init
- まずは、アプリ名を尋ねられるので答えます。
- 次にIDを聞かれるので、一意になるようにしましょう。(xcodeだと一部の名前の付け方が気に入らなくてエラるときがありますが、あとで変えられます。むしろ、android studio側の方が大変なので、注意しましょう)
- 次にindex.htmlのディレクトリを聞かれるので、nuxt3の方は、
.output/publicと記載してください。distではありません。(なんでかは私も詳しくは知らないですｗ) - 次にcapacitorに会員登録する？的な事を聞かれますが、Nと選択し、エンターキーを押せばそれ以上は聞かれません
最終的に、capacitor.config.tsが生成されていれば大丈夫です。
ネイティブアプリ化
npm i @capacitor/android @capacitor/ios
# androidフォルダにandroidで実行に必要なファイルを準備する
npx cap add android
# iosフォルダにiosで実行に必要なファイルを準備する
npx cap add ios
# capacitorで起動するのに必要なファイル群を同期させる(ios、android共通)
npx cap sync
これで、正直やるべきことは全部終わりました。iosで少し、作業が必要ですがおおむねこれで完了です。
Android編
npx cap open android
残念ながらflutterみたくcliでadb経由して転送してくれるほどのリッチなライブラリではないのですが、(flutterがすごすぎるとも言えなくもない？)、このコマンドで自動でandroid studioが起動してくれます。
この段階でエラーが起きたらandroid studioがインストール出来てないです。
正直、android studioですることは特にないです。そのまま、runして頂ければ大丈夫です。
ios編
npx cap open ios
こちらはxcodeの関係で少し問題は複雑です。
私はこのコマンドの存在を最初知らなくて、android studioから直接、プロジェクトファイルを開いてしまい、androidはそれでも問題なかったのですが、iosはそうではないので、気を付けましょう。
まずは、xcode 15からデフォルト設定が変わっている項目を修正します。
target→Build Settings→User Script SandboxingがYESになっていると思うので、NOにしましょう。
おそらく、これで問題なくビルドが通ると思いますが、もしこけてしまった人向けのtipsです
clang: error: linker command failed with exit code 1 (use -vto see invocation)
clang: error: linker command failed with exit code 1 (use -vto see invocation)
が、発生してしまった場合は、ios/App/に移動し、
pod install --repo-update
を実行しましょう。
雑記
nuxt3って誰も見向きもしないような気がしてるんですけど、なんといいますか、あんまりtypescriptのうまみを引き出せてないよなぁ、って気がするだけで、reactライクな感じにしちゃっただけだと思うのですが、実際の所はどうなのでしょうか。
nuxt2から3へのマイグレーションで正直一番不便なのは、cssフレームワークが軒並み使えなくなったことと、vitestが上手くテストしてくれないことだと思ってます。
というわけで、nuxtはv2.6くらいからお世話になっているので、誰かnuxt.jsの案件とか回してくれると泣いて喜ぶのでよろしくお願いします。
誰か
illegal tag name. use '<' to print '<'.
の解消法知ってたら教えてください。