🐕

Docker + Nuxt + Typescript ことはじめ(備忘録)

2021/07/04に公開

はじめに

春から新米エンジニアの私が、勉強がてら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だからいらんけどおいおいもしかしたらなんか使うかも?

正直何がいいとか悪いとかあまりよくわかっていないけど、とりあえずやってみないことには始まらない。

詰まったところ(先に書いておく)

その1: なんか知らんがコンテナビルドの際エラーが出た。

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インストールの旨を記載すれば良い。

その2: なんか知らんがプロジェクト新規作成時エラーが出た。

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

ログインするとコメントできます