🐕
Docker + Nuxt + Typescript ことはじめ(備忘録)
はじめに
春から新米エンジニアの私が、勉強がてらNuxtで何か作ろうと思いたち、
とりあえずモダンなものをかき集めて環境構築をした。
後々はポートフォリオサイト的なものにして公開したい。
今回はタイトルの技術で環境構築した時の備忘録を記す。
使用デバイスやOSバージョンなど
- macOS Big Sur ver11.2
- M1 MBP13インチ
- docker desktop ver3.3.3
- node ver15.13.0
筆者のスペック
- 大学は一応情報系専攻してたので、基本的なプログラミングの素養はある。
- 仕事はVue, Typescriptを使ってフロントエンド開発（主に改修だったり不具合修正）。
- 言語はJS(TS), Python, Javaが使える（PHPも読める）。
- DBとかネットワークも大学でやってたので基礎はまあ多分わかる。
- 基本知識は割と穴ぼこ、少し応用になるとちんぷんかんぷんになる。
- 未だにデバッグをconsole.log()でやってる。
- インフラ全然わからん。
- デプロイ経験ほぼ無。Herokuしか使ったことない。
技術選定の理由
おいおいデプロイすることを考えてDocker使った。あとOSあんまり汚したくない。
正直ポートフォリオサイトにSSRとか使わなくていいかもしれないが経験としてNuxt選択。tsはなんか近頃流行ってるらしいからなんとなく。会社で使ってるから慣れてるし。
バックエンドはNuxtだからいらんけどおいおいもしかしたらなんか使うかも？
正直何がいいとか悪いとかあまりよくわかっていないけど、とりあえずやってみないことには始まらない。
詰まったところ（先に書いておく）
その１: なんか知らんがコンテナビルドの際エラーが出た。
gyp ERR! find Python **********************************************************
gyp ERR! find Python You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
gyp ERR! find Python you can try one of the following options:
gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
gyp ERR! find Python (accepted by both node-gyp and npm)
gyp ERR! find Python - Set the environment variable PYTHON
gyp ERR! find Python - Set the npm configuration variable python:
gyp ERR! find Python npm config set python "C:\Path\To\python.exe"
gyp ERR! find Python For more information consult the documentation at:
gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
gyp ERR! find Python **********************************************************
「node-gyp」というNode.jsのモジュールをコンパイルするコマンドラインツールのエラーで、node-gypにはPythonが必要らしい。
Dockerfile（またはymlファイル）にPythonインストールの旨を記載すれば良い。
その２: なんか知らんがプロジェクト新規作成時エラーが出た。
nuxt_1 |
nuxt_1 | ERROR ## There is an issue with node-fibers ##
nuxt_1 | `/app/portforio-front/node_modules/fibers/bin/linux-arm64-93-musl/fibers.node` is missing.
nuxt_1 |
nuxt_1 | Try running this to fix the issue: /usr/local/bin/node /app/portforio-front/node_modules/fibers/build
nuxt_1 |
nuxt_1 |
nuxt_1 | ERROR Error: Cannot find module '/app/portforio-front/node_modules/fibers/bin/linux-arm64-93-musl/fibers'
nuxt_1 | Require stack:
nuxt_1 | - /app/portforio-front/node_modules/fibers/fibers.js
nuxt_1 | - /app/portforio-front/nuxt.config.js
nuxt_1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
nuxt_1 | at Function.Module._load (node:internal/modules/cjs/loader:774:27)
nuxt_1 | at Module.require (node:internal/modules/cjs/loader:1013:19)
nuxt_1 | at n (/app/portforio-front/node_modules/jiti/dist/v8cache.js:2:2472)
nuxt_1 | at Object.<anonymous> (/app/portforio-front/node_modules/fibers/fibers.js:14:39)
nuxt_1 | at Module.o._compile (/app/portforio-front/node_modules/jiti/dist/v8cache.js:2:2778)
nuxt_1 | at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
nuxt_1 | at Module.load (node:internal/modules/cjs/loader:989:32)
nuxt_1 | at Function.Module._load (node:internal/modules/cjs/loader:829:14)
nuxt_1 | at Module.require (node:internal/modules/cjs/loader:1013:19)
nuxt_1 |
nuxt_1 |
nuxt_1 | ERROR ## There is an issue with node-fibers ##
nuxt_1 | `/app/portforio-front/node_modules/fibers/bin/linux-arm64-93-musl/fibers.node` is missing.
nuxt_1 |
nuxt_1 | Try running this to fix the issue: /usr/local/bin/node /app/portforio-front/node_modules/fibers/build
nuxt_1 |
nuxt_1 |
nuxt_1 | ERROR Error: Cannot find module '/app/portforio-front/node_modules/fibers/bin/linux-arm64-93-musl/fibers'
nuxt_1 | Require stack:
nuxt_1 | - /app/portforio-front/node_modules/fibers/fibers.js
nuxt_1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
nuxt_1 | at Function.resolve (node:internal/modules/cjs/helpers:99:19)
nuxt_1 | at m (/app/portforio-front/node_modules/jiti/dist/jiti.js:1:52953)
nuxt_1 | at f (/app/portforio-front/node_modules/jiti/dist/jiti.js:1:53766)
nuxt_1 | at /app/portforio-front/node_modules/fibers/fibers.js:14:41
nuxt_1 | at f (/app/portforio-front/node_modules/jiti/dist/jiti.js:1:54655)
nuxt_1 | at /app/portforio-front/nuxt.config.js:74:18
nuxt_1 | at f (/app/portforio-front/node_modules/jiti/dist/jiti.js:1:54655)
nuxt_1 | at Object.loadNuxtConfig (/app/portforio-front/node_modules/@nuxt/config/dist/config.js:1082:15)
nuxt_1 | at loadNuxtConfig (/app/portforio-front/node_modules/@nuxt/cli/dist/cli-index.js:338:32)
nuxt_1 |
nuxt_1 |
nuxt_1 | FATAL Missing binary. See message above.
nuxt_1 |
nuxt_1 | at node_modules/fibers/fibers.js:23:11
nuxt_1 | at f (node_modules/jiti/dist/jiti.js:1:54655)
nuxt_1 | at nuxt.config.js:74:18
nuxt_1 | at f (node_modules/jiti/dist/jiti.js:1:54655)
nuxt_1 | at Object.loadNuxtConfig (node_modules/@nuxt/config/dist/config.js:1082:15)
nuxt_1 | at loadNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:338:32)
nuxt_1 | at NuxtCommand.getNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:463:26)
nuxt_1 | at Object._listenDev (node_modules/@nuxt/cli/dist/cli-dev.js:75:30)
nuxt_1 | at Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:58:25)
nuxt_1 | at Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:52:16)
nuxt_1 |
nuxt_1 |
nuxt_1 | ╭───────────────────────────────────────────────╮
nuxt_1 | │ │
nuxt_1 | │ ✖ Nuxt Fatal Error │
nuxt_1 | │ │
nuxt_1 | │ Error: Missing binary. See message above. │
nuxt_1 | │ │
nuxt_1 | ╰───────────────────────────────────────────────╯
nuxt_1 |
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
portforio_nuxt_1 exited with code 1
fibersというdart-sassの高速コンパイラをインストールし、nuxt.config.jsに定義していたことによりエラーが出ていた。
対処法色々載ってたが試しても変化なかったのでひとまずfibersはnuxt.config.jsから削除してビルドエラー回避。後々また考えよう。
おわりに
なんやかんやつまりところはあったがひとまず動くものはできた。
あとはいちいちbuildコマンド打つのめんどいのでnpm run watchできるように設定する。
私の場合yarn使ってるので、その辺色々調べる。
Discussion