おれのubuntu(WSL2)設定メモ_(2つ目)
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側で問題がないように意識すれば、誰もなにも問題起きません
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
Visual Studio Codeで既存の「.vscode/launch.json」が認識されない場合
F1 キーを押して「Launch」で検索し、「Open launch.json」
で解決できる！！
理由は知らん。
「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上の下記の設定が思い出せずに、
それを思い出しなおすまでの
数日間、作業効率が下がってしまったことがあったので
そんなことが無いように、ここにメモっておくことにした
★★★★★★★★
★★ その１ ★★
★★★★★★★★
ソースコードは、
Ctrl + Shift + r
で起動した窓で
ソースコード名の部分一致検索での
インクリメンタルが検索できる
★★★★★★★★
★★★★★★★★
★★★★★★★★
★★ その２ ★★
★★★★★★★★
ビルドパスが設定されている
.jarの内部や、.classなどの
コンパイル済みのクラスは、
Ctrl + Shift + t
で起動した窓で
クラス名の部分一致検索での
インクリメンタルが検索できる
★★★★★★★★
★★★★★★★★
★★★★★★★★
★★ その３ ★★
★★★★★★★★
ツリービューの上部にある
→
←
「ボタンのエディタにリンク」のトグルボタンを押しこんで有効にしておく
開いているソースコードに連動して、ツリービューが該当のものが選択状態になる
★★★★★★★★
★★★★★★★★
★★★★★★★★
★★ その４ ★★
★★★★★★★★
ウィンドウ - ビューの表示 - その他
で、
progress
と入力し、検索結果の
進行状況 のビューを、
のタブ表示に追加しておくのがよい
問題
と入力し、検索結果の
問題 のビューを、
のタブ表示に追加しておくのがよい
表示 または、Debug Shell
と入力し、検索結果の
表示 のビュー
まはた
Debug Shell のビュー
のタブ表示に追加しておくのがよい
eclipseだと「表示」ビュー、STSだと「Debug Shell」ビューなど
eclipseの亜種がいろいろあり、名称が異なるが、機能は同じビューである。
★★★★★★★★
★★★★★★★★
★★★★★★★★
★★ その５ ★★
★★★★★★★★
ビルド方式として、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のインストール
のサイトに行き、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
などログイン時に実行されるシェルに追記したあと
( 開発端末など、開発作業するユーザが１つと決めてるならば
~/.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の環境を作る例
の動画を参考に、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'
],
にしておくのがよい
djangoのVSコードでのデバッグ実行
Microsoftのプラグインの
Python Extension Pack
を入れて
Python Debugger
も入った状態にしておく
それと、これもか・・
launch.jsonは下記のようにする。
{
"version": "0.2.0",
"configurations": [
{
"name": "Python デバッガー: Django",
"type": "debugpy", // 最新の推奨設定
"request": "launch",
"program": "${workspaceFolder}/manage.py", // manage.py を指定
"args": ["runserver", "127.0.0.1:8000"], // 開発サーバーを起動
"django": true, // Django 用のデバッグモード
"console": "integratedTerminal", // 統合ターミナルを使用
"justMyCode": false // 外部コードもデバッグ可能
}
]
}
djangoでユーザのパスワードがわからなくなってしまったときの対処方法
djangoプロジェクトのルートディレクトリにて
python manage.py shell
でpythonのシェルを起動して
シェル内で下記を実行する
from django.contrib.auth.models import User
# 管理者ユーザー名が 'admin' の場合
user = User.objects.get(username='admin')
# 新しいパスワードを設定
user.set_password('new_password_here')
# データベースに保存
user.save()
その後、下記でシェルを終了する。
exit()
Discussion