LoginSignup
0
0

More than 1 year has passed since last update.

ChromeBookから外付けSSDでフロント系の開発を行う方法(解決)

Posted at

前回の調査結果

その後

あれからもう少し調べて見たところno-bin-linksオプションが使えている人が結構いたのでリトライしてみた。

create-nuxt-appを動かすための事前準備

  • npmのconfig設定が可能らしく、最初からシンボリックリンクを作らない設定が可能らしくこれを実行
    npm config set bin-links false

  • yarnの場合
    yarn config set bin-links false

実行結果

sample-project-nuxt $ pwd
/mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt
sample-project-nuxt $ ls -ltr
合計 0
sample-project-nuxt $ npx create-nuxt-app sample-project-nuxt

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in sample-project-nuxt
? Project name: sample-project-nuxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js version
s could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js version
s could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
sh: 1: husky: not found
npm ERR! code 127
npm ERR! path /mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt/sample-project-nuxt
npm ERR! command failed
npm ERR! command sh -c husky install

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/userName0001/.npm/_logs/2021-10-03T13_41_20_215Z-debug.log


> sample-project-nuxt@1.0.0 prepare
> husky install


/home/userName0001/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/installPackages.js:108
        throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
        ^

SAOError: Failed to install packages in /mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt/sample-project-nuxt
    at ChildProcess.<anonymous> (/home/userName0001/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/installPackages.js:108:15)
    at ChildProcess.emit (events.js:400:28)
    at maybeClose (internal/child_process.js:1055:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) {
  __sao: true
}
sample-project-nuxt $ 

やはりエラーになる・・・🤔

そして起動して見ようとしても以下のようになる

sample-project-nuxt $ npm run dev

 > sample-project-nuxt@1.0.0 dev
 > nuxt

sh: 1: nuxt: not found
sample-project-nuxt $ 

エラーが出ている原因

そもそもなんでshの実行エラーなんだろうかと考えて見た結果、symlinkを作らないことでnpmで参照が
できないのではと今更ながらに気づいた。
そうすると、packge.jsonに書いてあるscriptsコマンドはフルパスか相対パスで書けば動くのではと思ったので以下のように変更した。

package.json(変更前)
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "prepare": "husky install",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest"
  },
package.json(変更後)
"scripts":{
     "dev": "./node_modules/nuxt/bin/nuxt.js",
    "build": "./node_modules/nuxt/bin/nuxt.js build",
    "start": "./node_modules/nuxt/bin/nuxt.js nuxt start",
    "generate": "./node_modules/nuxt/bin/nuxt.js generate",
    "lint:js": "./node_modules/eslint/bin/eslint.js --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "./node_modules/stylelint/bin/stylelint.js \"**/*.{vue,css}\" --ignore-path .gitignore",
    "prepare": "./node_modules/husky/lib/husky.sh install",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "./node_modules/jest/bin/jest.js"
},

試しに起動すると、たしかに動いた。

sample-project-nuxt $ pwd
/mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt/sample-project-nuxt
sample-project-nuxt $ npm run dev

> sample-project-nuxt@1.0.0 dev
> ./node_modules/nuxt/bin/nuxt.js


ℹ NuxtJS collects completely anonymous data about usage.                                                                                                                                          22:56:49
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? Yes


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                               22:57:03
ℹ Initial build may take a while                                                                                                                                                                  22:57:03
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                               22:57:03
✔ Builder initialized                                                                                                                                                                             22:57:03
✔ Nuxt files generated                                                                                                                                                                            22:57:03

✔ Client
  Compiled successfully in 21.64s

ℹ Waiting for file changes                                                                                                                                                                        22:57:36
ℹ Memory usage: 162 MB (RSS: 243 MB)                                                                                                                                                              22:57:36
ℹ Listening on: http://localhost:3000/                                                                                                                                                            22:57:36

若干手間ではあるが、一度package.jsonに書いておけば次回以降はコピペでできるので十分。

結論

若干、インストール時の構築が異なるが、前回の暫定案でやったフォルダと今回のフォルダ容量を調べてみた。

test-run-project $ du -ms /mnt/chromeos/removable/SSD-PSMU3/projects/node/test-run-project
3       /mnt/chromeos/removable/SSD-PSMU3/projects/node/test-run-project
test-run-project $ du -ms /mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt/sample-project-nuxt
294     /mnt/chromeos/removable/SSD-PSMU3/projects/node/sample-project-nuxt/sample-project-nuxt
test-run-project $ 
  • 単位はMBなので、やりたいことが実現できることがわかった。
  • test-run-projectがnode_modulesのsymlink有のプロジェクトでnode_modulesの向き先が    ChromeOS側のdiskを使用しているためこのサイズとなっている。
0
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
0
0