Ubuntu20.04にphpインストールするときのメモ

概要

• asdfを使ってphp 8.0.14をインストールしたい
• たくさんエラーが出たのでそのメモ

asdf

バージョンを指定してインストールできるソフト（anyenvてきなやつ）

asdf-vm.com

dev.icare.jpn.com

環境

lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.2 LTS
Release:        20.04
Codename:       focal

PHPインストール

$ asdf install php 8.0.14

これを実施したいが、あれが足りない、これが足りない、とエラーが出まくった

エラー解消

$ sudo apt-get install autoconf automake libtool
$ sudo apt-get install -y bison
$ sudo apt-get install -y re2c
$ sudo apt-get install -y pkg-config
$ sudo apt-get install -y libxml2 libxml2-dev
$ sudo apt-get install -y sqlite libsqlite3-dev
$ sudo apt-get install -y libcurl4-openssl-dev
$ sudo apt-get install -y libpq-dev
$ sudo apt-get install -y libreadline-dev
$ sudo apt-get install -y zlib1g libzip-dev

PhpStormでXdebugを使うメモ（Laravel sail）

概要

• Laravel sail, PhpStrom, XDebugでデバッグ実行する

参考

blog.junpeko.com

www.webopixel.net

version

$ php --version
PHP 8.0.13 (cli) (built: Nov 19 2021 06:35:14) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.13, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.13, Copyright (c), by Zend Technologies
    with Xdebug v3.1.1, Copyright (c) 2002-2021, by Derick Rethans

Xdebug 3

• 3から設定が変わったらしい。(php.iniの記載内容)
  • とはいえ、今回laravel sailでは設定いじらない

xdebug.org

xdebug.remote_enable=1
xdebug.default_enable=0
xdebug.profiler_enable=0
xdebug.auto_trace=0
xdebug.coverage_enable=0

昔こうだったのが、

xdebug.mode=debug

こんなふうになるとか。

Laravel sail

• 上記の通り、php.iniは特にいじらなくてOK（デフォルトでlaravel sailにはxdebug入ってるので有効にするだけ）
• .envを有効にする
  • docker-compose.ymlには、デフォルトoffで設定されている

        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'

XDEBUG_MODEがデフォルトoffになっているので、onに設定する(.envに追記)

SAIL_XDEBUG_MODE=develop,debug

PhpStormの設定

settings

PHPのバージョンを自分の環境に合わせて修正

CLI Interpreterで、Dockerの環境を設定する（選ぶだけでOK）

Dockerのコンテナの内部のパスと、ローカルのパスとを合わせる

実行設定の追加

remote debugを追加

ブラウザからのデバッグ

• xdebug.start_with_requestの設定がyesではないので、ブラウザからのデバッグを有効にするには、Chrome拡張を入れる必要がある模様

www.jetbrains.com

asdfのインストールメモなど

asdf

• asdfというツールがあることを最近しって、それのメモ（terraform使いたかった）
• anyenvみたいにツールのバージョンをasdfを使って自由に切り替えることができる

github.com

• 非常に多くのツールがasdfで公開されており、今回の目的のterraformもある

install

公式のドキュメントの通りに実施

asdf-vm.com

今回はWSL上にインストールだったので、gitからcloneして配置

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1

zsh plugin

zshを使っているので、それのプラグインもインストール

github.com

plugins=(asdf)

これを記載するだけ。ちなみに複数のplugin記載する場合には

plugins=(git asdf)

こんな感じでスペース区切りで書く模様

サポートしているソフトのリスト表示

$ asdf plugin list all
1password-cli                 https://github.com/NeoHsu/asdf-1password-cli.git
R                             https://github.com/asdf-community/asdf-r.git
act                           https://github.com/grimoh/asdf-act.git
action-validator              https://github.com/mpalmer/action-validator.git
adr-tools                     https://gitlab.com/td7x/asdf/adr-tools.git
ag                            https://github.com/koketani/asdf-ag.git
age                           https://github.com/threkk/asdf-age

terraformのインストール

これも公式のドキュメントを参照

github.com

asdf plugin-add terraform https://github.com/asdf-community/asdf-hashicorp.git

以下のコマンドで、インストール可能なterraformのバージョンが出てくる

# どっちでもOK
$ asdf list-all terraform 
$ asdf list all terraform

今回は1.0.10を選択したので、

$ asdf install terraform 1.0.10

# latestという指定も可能
$ asdf install terraform latest

terraform version確認（必要に応じてSHELL再起動など)するが、このままだと怒られる
globalでインストール、もしくはlocalでバージョン指定しないと怒られるらしい。
~/.tool-versionsのファイルにバージョンの記載がないとだめのよう

このようなエラーが出る

$ terraform --version
No version set for command terraform
Consider adding one of the following versions in your config file at 
terraform 1.0.10

asdf-vm.com

解決方法

globalでバージョンを指定する

$ asdf global terraform 1.0.10

上記コマンドを入力することにより、~/.tool-versionsにバージョンが記載される

$ terraform --version
Terraform v1.0.10
on linux_amd64

version切り替え

terraform 1.0.9に入れ替えてみる

まずはインストール

$ asdf install terraform 1.0.9

切り替え（localでの切り替え)

$ asdf current terraform 
terraform       1.0.10          /home/yasuhiro/.tool-versions
$ asdf local terraform 1.0.9
$ terraform --version
Terraform v1.0.9
on linux_amd64

このasdf local terraform 1.0.9のコマンドによりローカルフォルダに.tool-versionsというファイルが作られる

terraform 1.0.9

このようにしてバージョン管理されている。
これは.gitignoreせずにチーム内で共有してもいいのかも？チーム内でasdf入れるなら、みんなで勝手にバージョンが合うのではないか

バージョンの不一致の確認

かりに.tool-versionsにterraform 1.0.8が登録されており、それがインストールされていない場合、ちゃんとエラー出してくれる

.tool-versionsの内容をいかに変更（わざと入っていない1.0.8を指定してみる）

terraform 1.0.8

然るべきバージョンが見つからないのでエラーが出る

$ terraform --version
No preset version installed for command terraform
Please install a version by running one of the following:

asdf install terraform 1.0.8

or add one of the following versions in your config file at /home/yasuhiro/work/projects/others/ecs-test/.tool-versions
terraform 1.0.10
terraform 1.0.9

VSCodeでvuejsをデバッグ実行するときのメモ

概要

• VSCodeでVuejsをデバッグ実行したかった（VSCode内でブレークポイントとか）が、うまく行かなかった

結論

• VSCodeのlaunch.jsonの設定がフォルダ構成にあってなかった
• sourceMapPathOverridesのファイルの紐付けに*がついてなかった

参考

v3.vuejs.org

teratail.com

サンプル

サンプルのディレクトリ構成(Dockerでサーバとか構築していたので、srcまでの階層が深い）

.
├── server
│   └── data
└── src
    ├── node_modules
    ├── dist
    ├── public
    └── src            ここにts,jsなどのソースファイル

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src/src",
            "sourceMapPathOverrides": {
              "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

色々とググりましたが、sourceMapPathOverridesとwebRootこれがどうやら重要ぽい

sourceMapPathOverrides

webpackのsource-mapとどのファイルを関連付けるかを指定する

webpack

このように、source-map上は、今回の場合

webpack:///./src/*

に入っているので、それを指定

最終的に、このように。

            "sourceMapPathOverrides": {
              "webpack:///./src/*": "${webRoot}/*"
            }

"${webRoot}/*"の*を消してしまってかなりはまってしまった。

webRoot

これは、VSCode上プロジェクトのどこにソースファイルがあるかを紐付ける内容
今回は./src/srcにソースファイルが入っているので、このように指定

            "webRoot": "${workspaceFolder}/src/src",

結果

VSCode上でブレークポイントでとまるようになった

vue3にlint-staged,huskyを導入して自動整形を実施するメモ

やりたいこと

• git commitする前にファイルをeslintとかして整形したい

huskyとlint-stagedについて

• huskyはGit hooksが簡単にできるソフトウェア
  • これだけを使えばおそらくやりたいことが実現できるが、これだけでは、すべてのファイルに対してeslintしちゃう（重い）
• lint-stagedというソフトウェアも組み合わせる
  • これでgitでstageされているファイルのみが対象になる（はず）

注意点

• huskyはv6以降で大きく記載が変わっているようです。
  • 今回はv6以降でいきます
  • また、node 12以上が要求されましたので、今回nodeあげました

環境

$ node -v
v14.18.0
$ npm -v
6.14.15

参考

以下のサイト参考にさせていただきました。ありがとうございます。

fwywd.com

husky, lint-stagedをインストールする

$ npm install -D husky lint-staged

package.jsonにlint-stagedで実施する処理を記載する（今回はeslintとprettierしたい）

  "lint-staged": {
    "*.{ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  },

これでts,vueに対してeslint,prettierしてくれる

また、今回はlint-stagedというコマンドを使ってlint-stagedを起動するようにするので、以下も追加

  "scripts": {
    "lint-staged": "lint-staged",
  },

huskyつかっての設定ファイルの作成

• husky v6以降はhusky installコマンドを使って設定ファイルを作成する

github.com

$ npx husky install

上記コマンドを.gitディレクトリが存在するディレクトリで実行する。
ただし、.gitディレクトリにpackage.jsonがない場合（今回がそうだった）、インストール用のディレクトリを別途指定してやる必要がある

$ npx husky install src/.husky

このような感じで。（これでsrc/.huskyディレクトリに設定ファイルが作成される）

zenn.dev

これでhuskyの初期設定は完了

pre-commit時に実行したいコマンドの設定

$ npx husky add .husky/pre-commit "npm run lint-staged"

これで準備完了

実際にコミットする

git commitコマンドを実施したときに、コミットメッセージを書く前にpre-commitが動く

awkメモ

awkで改行で区切る場合

マークダウンのセクションを取り出したい

#### 手順
1. aaa
2. bbb
3. ccc

#### 手順
1. ddd
2. eee

こんなテキストファイルがあったとして。（md.txtとする）

各セクション（####）ごとに処理をしたい場合

単にawkで抜き出す場合

$ awk 'BEGIN{RS=""} {print $0}' md.txt

複数のファイルから見出し、セクションなどを取得したい（これをどうしてもやりたいことがあった）

head.txt

## title1
## title2

md.txt

#### 手順
1. aaa
2. bbb
3. ccc

#### 手順
1. ddd
2. eee

$ for i in {1..2}; do arg1=`echo "NR == $i" '{print $0}'`; arg2=`echo "BEGIN{RS=\"\"} NR == $i" '{print $0}'`; awk $arg1 head.txt; awk $arg2 md.txt; done

出力結果

## title1
#### 手順
1. aaa
2. bbb
3. ccc
## title2
#### 手順
1. ddd
2. eee

リンクなど

ie.u-ryukyu.ac.jp

t-min.hatenablog.com

littleengineer.jp

WSLでCドライブがマウントされない場合

概要

• WSL2を使っていて、Cドライブが自動でマウントされなくてハマりましたので、その対応方法をメモします

詳細

前提

バージョン

エディション   Windows 10 Pro
バージョン 20H2

WSL2で使用しているディストリビューション

Ubuntu-20.04

チェックするポイント

そもそも本来は（デフォルトでは）/mnt/cにCドライブが自動でマウントされます

まずは現状確認

$ ls /mnt/c

何も表示されない

/etc/wsl.confの確認

• おそらく初期状態ではwsl.confは存在しません
  • /etc/wsl.confの確認をします
• 存在しない場合、以下のようなファイルを作ります（あくまで一例）

(参考)

docs.microsoft.com

# Enable extra metadata options by default
[automount]
enabled = true
root = /mnt/
options = "metadata,umask=22,fmask=11"

/etc/fstabの確認

• fstabの記載を確認します
• おそらくCドライブをマウントする、というような記述がないので、以下を追加

C: /mnt/c drvfs metadata,notime,gid=1000,uid=1000,defaults 0 0

確認

パワーシェルから

$ wsl --shutdown

実行

WSL2上で

$ ls /mnt/c

これで表示されればOK

おまけ

マウントの状態を確認するには

$ mount | grep -i C:

で確認できる

C: on /mnt/c type 9p (rw,relatime,dirsync,aname=drvfs;path=C:;metadata;gid=1000;uid=1000;symlinkroot=/mnt/,mmap,access=client,msize=65536,trans=fd,rfd=3,wfd=3)

こういうの出てくればOK