🙌

おれのubuntu(WSL2)設定メモ_(2つ目)

2024/09/25に公開

\large{Zennは、8万字を超えると、保存できないようなので分けました}
https://zenn.dev/tazzae999jp/articles/07bed12c3ae6c0
\large{上記が、1つ目です}

storageディレクトリの所有者をapache実行ユーザにするのはLaravelの開発環境構築のお作法

1つ目のサイトの
Laravelでの画像のアップロードおよび表示のお作法

目次項目で、
dockerコンテナ内のapacheの実行ユーザが
ユーザ名 : www-data
グループ名 : www-data
であることを確認したうえで、

# chown -R www-data:www-data /var/www/html/laravelapp/storage
# chmod -R 775 /var/www/html/laravelapp/storage

をすると書いた、これは別に
アップロードの実装をアプリで「する/しない」にかかわらず必要である

ホスト側の一般ユーザでgit cloneした時に、
storageフォルダができあがるので
基本的には、
gitコマンドを打ち込んだ一般ユーザ所有で
755や、775などになってるはずなんです。
この状況では、www-dataでは書き込み権限がありません。
だから、必要なのです

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
<<一部のMacユーザが、これをしなくても動くのは、Docker for Macの設計不具合です>>
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
別にDockerに関係なく、aplfsとext4の間でvirtioFSによるファイル共有した場合
両者の権限設定をあわせることがうまくできないバグが報告されているようです。
virtioFSは、権限を厳しく見ず、緩和的に緩くする挙動で、ファイル共有の高速化を図るような
動きをするようです。
Docker for MacはこのvirtioFSを使い
Mac(BSDのUnix)と、docker(VMのLinuxカーネル)との間のバインドマウントを解決しているが
ゆえに、
本来、権限がないwww-dataで書き込みができて動いてしまう状況になってます
osxfsなどの低速だが厳密に権限を見る、ファイル共有の仕組みを
使う設定にDocker for Macしてる環境では、Ubuntu(WSL2)と同様に
storageの所有者をwww-dataに変更しないと動かないようです。

問題は、virtioFSなどを使う設定のDocker for Macで
権限設定せずに動いてしまってるMacユーザが、ここの権限に関して
意識が希薄になってないか、と思うです

どのみち、本番デプロイはLinux環境なのですから、
Macユーザも、意識しておさえておくべきポイントではないか

権限問題と言えば、当サイトで、Ubuntus(WSL2)側は、POSIX ACLで解決したほうがよい
状況に起因する問題も、結局は、多数派のMacユーザが、
BSDのUnixであるがゆえに発生する特殊事情の結果、楽ができる設定や、やり方を
チーム内のLinuxユーザに対して、提供してくるのが問題なのです
何事も、Linux側で問題がないように意識すれば、誰もなにも問題起きません
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

「wslu : WSL用のユーティリティコレクション」が無いとCLIからWebブラウザの起動ができない

fly.ioへのデプロイ作業時に、
下記の「flyctl auth login」コマンドなどを打ち込んだ時

$ flyctl auth login
failed opening browser. Copy the url (https://fly.io/app/auth/cli/xxxx) into a browser and continue
Opening https://fly.io/app/auth/cli/xxxxx ...

Waiting for session...⣯

のようになり
「Waiting for session...⣯」で固まっている

failed opening browser. Copy the url
のメッセージもあり

CLIより、ブラウザの起動などの操作をしようとして失敗している
fly.ioはこれができないと先に進めない箇所があったように記憶している

CLIより、ブラウザの起動などの操作を可能にするため

Ubuntu(WSL2)に「wslu : WSL用のユーティリティコレクション」をインストールする必要がある

まず、

dpkg -l | grep wslu

で何も返ってこない状況だと、
「wslu : WSL用のユーティリティコレクション」がインストールされていない状況だと言える

それを確認したうえで

sudo apt update
sudo apt install wslu

でインストールできます

下記でインストールできてることが確認できる

$ dpkg -l | grep wslu
ii  wslu                                 3.2.3-0ubuntu3                           amd64        collection of utilities for the Windows 10 Linux Subsystem

久々にJavaをやるときの覚書

以前、Javaの開発を久々にやった時に
eclipse上の下記の設定が思い出せずに、
それを思い出しなおすまでの
数日間、作業効率が下がってしまったことがあったので
そんなことが無いように、ここにメモっておくことにした

★★★★★★★★
★★ その1 ★★
★★★★★★★★
ソースコードは、
Ctrl + Shift + r
で起動した窓で
ソースコード名の部分一致検索での
インクリメンタルが検索できる
★★★★★★★★
★★★★★★★★

★★★★★★★★
★★ その2 ★★
★★★★★★★★
ビルドパスが設定されている
.jarの内部や、.classなどの
コンパイル済みのクラスは、
Ctrl + Shift + t
で起動した窓で
クラス名の部分一致検索での
インクリメンタルが検索できる
★★★★★★★★
★★★★★★★★

★★★★★★★★
★★ その3 ★★
★★★★★★★★
ツリービューの上部にある


「ボタンのエディタにリンク」のトグルボタンを押しこんで有効にしておく

開いているソースコードに連動して、ツリービューが該当のものが選択状態になる
★★★★★★★★
★★★★★★★★

★★★★★★★★
★★ その4 ★★
★★★★★★★★
ウィンドウ - ビューの表示 - その他

で、
progress
と入力し、検索結果の
進行状況 のビューを、
のタブ表示に追加しておくのがよい

問題
と入力し、検索結果の
問題 のビューを、
のタブ表示に追加しておくのがよい

表示 または、Debug Shell
と入力し、検索結果の
表示 のビュー
まはた
Debug Shell のビュー
のタブ表示に追加しておくのがよい

eclipseだと「表示」ビュー、STSだと「Debug Shell」ビューなど
eclipseの亜種がいろいろあり、名称が異なるが、機能は同じビューである。
★★★★★★★★
★★★★★★★★

★★★★★★★★
★★ その5 ★★
★★★★★★★★
ビルド方式として、Gradleを使っているケースは、
プロジェクトを右クリして、
Gradle - Gradleプロジェクトのリフレッシュ
をする必要があったりする
いつも、必要ではないが
通常のビルトとは別にそれも
をしないと、初期のビルドや、
何かの実装の変更時などで
ビルドエラーが消せないことがある
ということだけ、心得ておくこと
★★★★★★★★
★★★★★★★★

Ubuntu(WSL2)でjavaを使えるようにした時のメモ

sudo apt update
sudo apt install default-jdk
$ java -version
openjdk version "21.0.4" 2024-07-16
OpenJDK Runtime Environment (build 21.0.4+7-Ubuntu-1ubuntu224.04)
OpenJDK 64-Bit Server VM (build 21.0.4+7-Ubuntu-1ubuntu224.04, mixed mode, sharing)

Extension Pack for Java v0.29.0
をVisualStudioCodeに入れたら
VisualStudioCodeで動かせた
複雑なことをしたかったわけでなく
以前、ソースコードの状況を比較したりする
ツールを個人的にjavaで作っててそれがが動けばよし
だったので、一旦、現時点では、これ以上の深追い調査はしない。

Node.jsとnpm

npm i
を打ち込んだら、エラーが連発し、
which npm
で確認したら、Windows側にインストールしたNode.js見に行ってて
そりゃ、エラーなるよ
ということだった。

なので、Ubuntu側にもインストールする
PATH変数はUbuntu側が優先的な値のため
Ubuntuにも入れたら、そっちを見に行ってくれる

別件 Node.jsのインストール、( npm コマンドが使いたかった )

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

をやってから

sudo apt install nodejs -y

をする

node -v

npm -v

で、確認する

例)

$ node -v
v22.6.0
$ npm -v
10.8.2






Node.jsとnpmはnodebrewでインストールしたほうがよい

1つ上の「Node.jsとnpm」を書いてた時に、直でインストールしていた

$ node -v
v22.6.0
$ npm -v
10.8.2

$ which node
/usr/bin/node
$ which npm
/usr/bin/npm

を一旦、削除してから、
nodebrewで同じバージョンのNode.jsとnpmを入れなおす方向性で作業しました。
その作業のついでに、この目次項目の記事を書くことにしました。

直でインストールしたものなので、
sudo apt-get remove --purge nodejs npm
下記のコマンドで普通に削除します

$ sudo apt-get remove --purge nodejs npm
[sudo] password for 
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Package 'npm' is not installed, so not removed
The following packages will be REMOVED:
  nodejs*
0 upgraded, 0 newly installed, 1 to remove and 81 not upgraded.
After this operation, 219 MB disk space will be freed.
Do you want to continue? [Y/n] y
(Reading database ... 49912 files and directories currently installed.)
Removing nodejs (22.6.0-1nodesource1) ...
Processing triggers for man-db (2.12.0-4build2) ...

$ node -v
-bash: /usr/bin/node: No such file or directory
$ npm -v
-bash: /usr/bin/npm: No such file or directory
$
$ which node
$
$ which npm
/mnt/c/Program Files/nodejs//npm
$

nodeは、not foundで
npmは、Ubuntu(WSL2)のものはなくなり、環境変数PATHの後ろのほうに指定してる
Windows側のものがwhichコマンドででてくるような状況になりました。

なお、
sudo apt-get remove --purge nodejs npm
--purge は、
関連する設定ファイル(/etc/ディレクトリなどに保存されている設定情報)も全て削除します。
システムにNode.jsやnpmに関する痕跡を残さないために、完全なクリーンアップ
の意味だそうです。




ここからは、nodebrewでのNode.jsとnpmのインストール

https://github.com/hokaccha/nodebrew

のサイトに行き、nodebrewのインストール方法を見る

nodebrewは、一般ユーザでインストールするので
rootになって作業したり、sudoを使って作業はしない

curl -L git.io/nodebrew | perl - setup
を実行する

$ curl -L git.io/nodebrew | perl - setup
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
100 26039  100 26039    0     0  10950      0  0:00:02  0:00:02 --:--:--   99k
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
$

最後に出力された

export PATH=$HOME/.nodebrew/current/bin:$PATH


~/.bashrc

~/.zshrc

~/.profile
などログイン時に実行されるシェルに追記したあと
( 開発端末など、開発作業するユーザが1つと決めてるならば
~/.profileに追記しておけば、使ってるシェルが変わっても継続反映できて便利だろう )

source ~/.bashrc

source ~/.zshrc

source ~/.profile
などで、上記の追記したものを
再読み込みする(または、ターミナルの起動からやり直す)

nodebrew -v
を打ち込む
下記のように出力されたら、nodebrew自体のインストールはできている

$ nodebrew -v
nodebrew 1.2.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>
    nodebrew prune [--dry-run]            Uninstall old versions, keeping the latest version for each major version

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
$

公式サイトにいろいろと書いてて、見つけにくいが
nodebrew install-binary
でインストールするのがオススメとされている

nodebrew install-binary では、ビルド済みのバイナリをダウンロードするだけなので、
ソースからビルドする場合に必要な make、gcc、g++ などのビルドツールが不要です。
これにより、インストールに際して余計なパッケージを追加する手間が省け、
システムをシンプルに保つことができます。

ソースからビルドする場合、環境依存のエラーや、ビルドツールのバージョンによる互換性問題が発生することがありますが、
install-binary は既にビルドされているため、こうしたエラーが発生しにくいです。
結果として、より安定して確実にインストールが完了します。

通常は、

nodebrew install-binary latest
(最新版)のインストール

nodebrew install-binary stable
(安定版の中での最新版)のインストール

でインストールするとのこと

ここでは、(この文章を書いてる時点では)
先ほどnodebrewでない方式でインストールしてて、削除した
メモしていたバージョンの復活のため

nodebrew install-binary v22.6.0

を実行することにした

$ nodebrew install-binary v22.6.0
Fetching: https://nodejs.org/dist/v22.6.0/node-v22.6.0-linux-x64.tar.gz
########################################################################################################################################################################################################## 100.0%
Installed successfully

その後

$ node -v
Command 'node' not found, but can be installed with:
sudo apt install nodejs
$ npm -v
10.8.2
$

となった
Node.jsは、v22.6.0を
nodebrew install-binary v22.6.0
で、インストールしたはずなのに、
node -v は、not found

npm -vは、対応するnpmのバージョン10.8.2
が使える状況となっている

なぜ、node -v はnot foundか?

nodebrew ls
で、インストール済のNode.jsのバージョンを表示できる

$ nodebrew ls
v22.6.0

current: none

current: none となってる状況では
なにも、選択状態になっていない

だから、node -v はnot foundになるのである

nodebrew use v22.6.0
を打ち込むと

今度は下記のようになった

$ nodebrew use v22.6.0
use v22.6.0

$ nodebrew ls
v22.6.0

current: v22.6.0

$ node -v
v22.6.0
$ npm -v
10.8.2
$

$ which node
/home/myuser/.nodebrew/current/bin/node
$
$ which npm
/home/myuser/.nodebrew/current/bin/npm
$

これで使える
なお、
nodebrew install-binaryで、node.jsをインストールすると
対応するバージョンのnpmもインストールしてくれるようだ

nodebrewは、node.jsのバージョンをnodebrew useで切り替えると
環境にnpmがあれば、切替先のnode.jsにあったバージョンのnpmに切り替えもしてくれるとのことだ

これで、

nodebrewを使う前に、入れてたバージョンと同じ
node.jsと、npmがそろったので

nodebrewを使う前のnode.jsと、npmのときに作った環境のプロジェクトフォルダを
VisualStudioCodeで開いて
npm run dev
npm run build
npm run preview
などが動くことが確認された

<おまけ>
nodeと打ち込んだら、nodeのプロンプトが打てる状況となる
そこでhello worldしてる例

$ node
Welcome to Node.js v22.6.0.
Type ".help" for more information.
>
> console.log('hello world')
hello world
undefined
>
>
(To exit, press Ctrl+C again or Ctrl+D or type .exit)
>


Typescriptのトランスパイルをするためviteのインストール方法

インストールしたいフォルダにcdコマンドで移動する

code .

にて、そのフォルダで、VisualStudioCodeを移動する。

以下、VisualStudioCode内のターミナル上での作業を行う

npm create vite@latest

どこにインストールか聞かれるので、

.

とだけ打ち込んでエンターキーを押す
あらかじめインストールしたいフォルダにcdコマンドで移動しているためそれでよい

Select a framewarod:
と表示され
Vanilla
Vue
React
Lit
Svelte
Solid
Qwik
Others
の選択肢が出てくる
Vanillaを選択するとframeworkなし

その後、
TypeScript
Javascript
を選択するようになっているが、そこで
TypeScript
を選択する

ここまでの流れは、下記のようなコンソールログとなる

$ npm create vite@latest
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y


> npx
> create-vite

✔ Project name: … .
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /udemydir/ts_jik/test...

Done. Now run:

  npm install
  npm run dev

npm notice
npm notice New patch version of npm available! 10.8.2 -> 10.8.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3
npm notice To update run: npm install -g npm@10.8.3
npm notice

npm install
を実行する

$ npm install

added 6 packages, removed 43 packages, changed 6 packages, and audited 12 packages in 7s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm run dev
を実行する

$ npm run dev

> test@0.0.0 dev
> vite


  VITE v5.4.3  ready in 251 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Vite + Typescript
と書かれたwebページが、

http://127.0.0.1:5173/

でブラウザ起動する形となる

Typescriptに必要な設定ファイルや、フォルダが一通り出来上がるため
srcフォルダの下に

*.tsのファイルを作りTypescriptの実装が行える状況となる

Vue.jsの環境を作る例

https://www.youtube.com/watch?v=Oyr0sr6l3SQ&t=46s
の動画を参考に、vue.jsの環境を作ったときのメモ書き

前述の目次項目では、先にフォルダを作成し
そのフォルダ内へcdコマンドで移動してから
インストール作業をして、Project nameのところで、. を打ち込む方式
だったが、vue.jsのとき、そのやり方だとエラーになってうまくいかなかったため
ひとつ上のフォルダで、インストール作業をして、
Project nameのところで、vue-lesson のフォルダ名を打ち込んだ

npm create vue@latest

$ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

RangeError: Incorrect locale information provided

✔ Project name: … vue-lesson
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /udemydir/vue-lesson...

Done. Now run:

  cd vue-lesson
  npm install
  npm run format
  npm run dev

npm install

$ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead

added 150 packages, and audited 151 packages in 2m

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm run format

> vue-lesson@0.0.0 format
> prettier --write src/

src/App.vue 197ms (unchanged)
src/assets/base.css 42ms (unchanged)
src/assets/main.css 44ms (unchanged)
src/components/HelloWorld.vue 92ms (unchanged)
src/components/icons/IconCommunity.vue 31ms (unchanged)
src/components/icons/IconDocumentation.vue 16ms (unchanged)
src/components/icons/IconEcosystem.vue 19ms (unchanged)
src/components/icons/IconSupport.vue 9ms (unchanged)
src/components/icons/IconTooling.vue 11ms (unchanged)
src/components/TheWelcome.vue 47ms (unchanged)
src/components/WelcomeItem.vue 36ms (unchanged)
src/main.js 10ms (unchanged)

★上記までのコマンドは、VSコードのターミナルで実行するより、Ubuntus(WSL2)のターミナルで実行するほうが安定していた★

その後、
Project nameのところで、vue-lesson のフォルダ名に、
cdコマンドで移動した後、
code .
でVSコードを起動して
VSコード内のターミナルで

npm run dev
で、vite経由で

http://127.0.0.1:5173/

での初期画面を起動した

npm run dev
でviteを起動しながら、開発作業をすると、ホットデプロイのような形で
ソースコードの修正と同時にローカル動作に反映される

npm run buid
を行うと、distフォルダに静的にvue.jsの内容がjavascriptのみの形に変換された
静的なコードになる

npm run preview
は、distフォルダに出力された内容での動作を見るための
ローカルサーバーを起動するコマンドのようである

npm run lint
は、Linter

npm run format
は、コードのフォーマット

.vscode/extensions.json

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

は、おススメの拡張機能
これを入れると効率がよい

.eslintrc.cjs

  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],


'plugin:vue/vue3-essential',
は、
'plugin:vue/vue3-recommended',
にして

  'extends': [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],

にしておくのがよい

Discussion