レガシー環境から脱却したい

プログラミングや環境構築の話をまとめています。

Docker on WSL2 + laradockなLaravel開発環境

はじめに

WSL2内にインストールしたDocker+Laradockを利用して、Laravelの開発環境を作成する手順をメモします。

WSL2やDockerの設定はこちらの記事を参照してください。

odaryo.hatenablog.com

ゴール

  • Laradockの設定と起動
  • laravelのインストール

ディレクトリ構成

こちらの構造で設定します。

Laradockも含めて1プロジェクト1リポジトリで管理したいことと、
dockerコンテナ内にlaradockを持ち込みたくないのでこの構成にしています。

┬ <project_dir>
├ app  // laravel ディレクトリ
│  ├ app
│  ├ bootstrap
│  └ ...
└ laradock
  • ディレクトリ構成の考え方はこちらをご参照ください。

qiita.com

想定環境

今回は、下記のように設定しました。

ミドルウェアのバージョンはデフォルト設定のまま使っています。
latestで指定するとビルド時点の最新版が入るため、チームで環境をそろえたい場合などは.envファイルにバージョンを明記します。

設定方法

1.Laradockの設定

下記はWSL2で行います。

① プロジェクトディレクトリの作成

プロジェクトディレクトリと、appディレクトリを作成します。

$ mkdir <project_dir>
$ cd <project_dir>

ここで、appディレクトリを作成しておきます。

$ mkdir app

② laradockをダウンロード

$ git clone  https://github.com/Laradock/laradock.git

③ 設定ファイルのコピー

$ cd laradock
$ cp env-example .env

④ 設定ファイル(.env)の編集

.envにはディレクトリの場所や、インストールされるミドルウェア(nginxやmysqlなど)のバージョンなど、いろいろな設定を記載することができます。
この.envファイルの編集だけで、様々な環境に対応できるのがLaradockの強みだと思っております。

$ vi .env

1.laravelディレクトリを設定

好みの問題ですが、今回の構成に合わせて修正します。

- APP_CODE_PATH_HOST=../
+ APP_CODE_PATH_HOST=../app/

2.データの保存ディレクトリを変更

デフォルトでは、ホームディレクトリに保存されてしまいます。
このままでは、ほかのプロジェクトデータで上書きされるかもしれませんので、プロジェクト内に作成するよう変更します。

- DATA_PATH_HOST=~/.laradock/data
+ DATA_PATH_HOST=.laradock/data

3.プロジェクト名の設定

laradockを使ったプロジェクトを複数作る場合、プロジェクト名が同じ場合、過去に作った同じ名前のコンテナイメージが上書きされてしまいます。
後々面倒なことになるため、必ず被らない名前を設定してください。

- COMPOSE_PROJECT_NAME=laradock
+ COMPOSE_PROJECT_NAME=<project_name>

4.ユーザID、グループIDを設定

WSL側とDocker側でユーザIDが異なると、Linuxではファイルの編集ができなくなります。

そのため、ユーザIDをWSL側と合わせてやります。
Ubuntuの場合はデフォルトでよいと思います。

WORKSPACE_PUID=1000
WORKSPACE_PGID=1000
PHP_WORKER_PUID=1000
PHP_WORKER_PGID=1000

なお、PUIDとPGIDはidコマンドで確認できます。

$ id 
uid=1000(***) gid=1000(***) ....

5.ポート設定

複数プロジェクトのDockerを起動する場合、ポートが被ることがあります。
環境に合わせて変更してください。

複数プロジェクトを同時に立ち上げなければ基本デフォルトで問題ありません。

NGINX_HOST_HTTP_PORT=80
NGINX_HOST_HTTPS_PORT=443
MARIADB_PORT=3306
PMA_PORT=8080

⑤ その他の設定

1.MySQL設定

MySQLは8系になってパスワードの生成方法が変わりそのままではLaravelから操作できません。

<project_dir>/lardock/mysqmy.cnfに下記を追加します。

// [mysqld]のエリアに追記する(デフォルトの場合一番下)
default_authentication_plugin=mysql_native_password

2.laradockの起動

下記コマンドでlaradockを起動します。 引数には起動したいミドルウェアを指定します。

なお、<project_dir>/appディレクトリが存在しない場合はroot権限で作成されてしまうため、必ず作成した状態で起動してください。

$ docker-compose up -d nginx mysql workspace phpmyadmin

起動確認

$ docker-compose ps
              Name                            Command               State                    Ports
--------------------------------------------------------------------------------------------------------------------        laradock_test_docker-in-docker_1   dockerd-entrypoint.sh            Up      2375/tcp, 2376/tcp
laradock_test_mysql_1              docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp, 33060/tcp
laradock_test_nginx_1              /bin/bash /opt/startup.sh        Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp        laradock_test_php-fpm_1            docker-php-entrypoint php-fpm    Up      9000/tcp
laradock_test_phpmyadmin_1         /docker-entrypoint.sh apac ...   Up      0.0.0.0:8080->80/tcp
laradock_test_workspace_1          /sbin/my_init                    Up      0.0.0.0:2222->22/tcp

3.Laravelのインストールと初期設定

ここでは、dockerコンテナ内からlaravelをインストールする方法と、
簡単な設定を行います。

① インストール

下記コマンドでWorkspaceコンテナに入ります。
この時、userオプションでユーザを指定してください。

$ docker-compose exec --user=laradock workspace /bin/bash

コンテナ内で下記を実行します。
(/var/www$ といった記述がある行はコンテナ内で実行していると思ってください)

/var/www$ composer create-project --prefer-dist laravel/laravel .

インストール完了したところで動作確認をします。

Windows側のブラウザで、http://localhostにアクセスします。

下記画面が表示されればインストール完了です。

f:id:odaryo:20200121212238p:plain

② Laravelの設定

1..envの設定

laravelの.envファイルの設定を変更します。

DBの設定を、laradockに合わせて変更する。
※DB_HOSTはdocker-compose.ymlに書かれているコンテナ内名を指定します。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

また、phpMyAdminは、「http://localhost:8080」にアクセスし下記値を入力してアクセスできます。

  • サーバ:mysql
  • ユーザ名:default
  • パスワード:secret

f:id:odaryo:20200121215827p:plain

2.マイグレーションの確認

MySQLの設定が完了したか、マイグレーションで確認してみましょう。

下記のようになり、DBにテーブルが作成されればOKです。

/var/www$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.36 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.35 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.1 seconds)

その他

他にも言語やタイムゾーンの設定、ディレクトリ構成を変えるなどいろいろなカスタマイズがあるかと思いますが、ここでは割愛します。

③ Laravel-mixの動作確認

Vue.jsの設定とビルド、ホットリロードの確認を行います。

Vue.jsを利用する設定

Laravel 6.0からデフォルトではインストールされないため、laravel/uiからインストールします。

/var/www$ composer require laravel/ui --dev
/var/www$ php artisan ui vue

node_modulesのインストール

/var/www$ yarn

その後、yarn devyarn watchでビルドできます。

終わりに

WSL2を利用したLaravelの開発環境についてまとめました。

laradockはdocker-compose.ymlやDockerfileの書き方の参考になりますので、見るだけでも勉強になります。

PhpStorm on WSL2でWindowsに依存しない開発環境を作る

はじめに

WindowsPHPなどの開発をしていると色々トラブルに見舞われます。

WSL2やWindows terminalの登場で、端末環境はほぼLinux同等のものが動くようになりました。

しかし、コード編集にWindows側のIDEを使おうとすると色々トラブルに見舞われます。
(Dockerの実効速度とか、Git管理時のパーミッション問題とか)

それらはLinuxマシンを使えば解決することですが、Windowsマシンを使いたい。。。

今回はWSL2に開発ツールを詰め込みX-Server経由でGUI操作することで、Windowsの依存性を限りなく減らした環境を作成します。

補足

VSCodeを使用する場合はX環境を設定しなくても、Remote Develop機能でWSL2内の環境を直接操作できると思います。

また、Windowsのファイルエクスプローラ\\wls$\ubuntu-20.04\にアクセスすると、WSL2内のファイルが参照できますので、Windows側から操作できます。

今回は、X-Server経由でWSL2内のPhpStorm(Intellij IDEA)を利用して開発する環境を設定しました。

ゴール

下記の設定を行います。

  • WSL2の有効化
  • Docker、docker-composeをインストール
  • X-Server設定し、WSL2上のPhpStormを開く

環境

  • ホスト
    • Windows10 Professional
  • WSL2

設定手順

  1. WSL2の有効化
  2. X-Serverの設定
  3. Dockerのインストール
  4. PhpStorm設定
  5. その他ツール(Node.js、Fish)

1.WSL2の有効化

WSLにUbuntuをインストールして、WSL2を有効化します。

WSL2を有効化するためには、Windows10が下記のバージョンである必要があります。
バージョン 2004、ビルド 19041 以上

こちらのページを参考にインストールします。

docs.microsoft.com

途中、何回か再起動が必要です。

エラーの対応

> wsl --set-default-version 2

このコマンドの実行時、下記のエラーが出る場合は、カーネルの更新が必要です。

変換中です。この処理には数分かかることがあります...
WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。詳細については https://aka.ms/wsl2kernel を参照してください

指摘通りに、https://aka.ms/wsl2kernelページ内のリンクからダウンロードしてインストールします。

Ubuntuをインストールして、バージョン2になったことを確認

> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Running         2

WSLのバージョンが1の場合は、下記コマンドで個別に設定可能です。

> wsl --set-version Ubuntu-20.04 2

2.X-Serverの設定

下記ページを参考にしました。

参考ページ:

① X環境のインストール

少しでも軽いものをと思い、軽量デスクトップ環境のXfceを選択しました。

$ sudo apt update && sudo apt upgrade -y
$ sudo apt install -y xfce4-terminal xfce4-session xfce4

※途中、ログインマネージャの選択(GDMとLightDM)が出ますが、おそらくどちらでも構いません。
私はLightDMを選びました。

WindowsにVcXsrv(XServer)をインストール

下記リンクよりダウンロードしてインストールします。

sourceforge.net

XLaunch(VcXsrvのアプリ名)を起動します。

設定はこちら

  • 1ページ目:Multiple Windows
  • 2ページ目:Start no client
  • 3ページ目:全部チェック

f:id:odaryo:20200116162353j:plain

一度起動したらそのまま放置しておけば良いですが、
毎回設定するのは面倒なので、ショートカットや自動起動の設定をしておくと良いです。

③ X環境の動作確認

WSL2側で".bashrc"に下記を追記します。

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0

設定をリロード

$ source $HOME/.bashrc

試しにxeyesを表示させてみます。

$ xeyes

起動に成功すると、xeyesのアプリが表示されます。

f:id:odaryo:20200116153720p:plain

もし、起動されなかった場合はWindows側でVcXsrvのファイアウォール設定を試してください。

f:id:odaryo:20200116102531p:plain

設定の詳細については下記を参照してください。

odaryo.hatenablog.com

④ 日本語環境のインストール

日本語環境として、fcitx-mozcをインストールします。
※色々試し、上手く行った方法をまとめます

1.Japanese Teamの追加パッケージを設定

$ wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
$ wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | sudo apt-key add -
$ sudo wget https://www.ubuntulinux.jp/sources.list.d/bionic.list -O /etc/apt/sources.list.d/ubuntu-ja.list
$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install ubuntu-defaults-ja

2.fcitx-mozcのインストール

$ sudo apt install fcitx fcitx-mozc

環境変数が必要なため、以下を.bashrcに追記します。

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx

設定をリロード

$ source $HOME/.bashrc

3.日本語フォントをインストール

$ sudo apt install fonts-noto-cjk fonts-noto-color-emoji

4.日本語ロケールに設定

$ sudo update-locale LANG=ja_JP.UTF8

5.日本語変換を利用する設定 fcitxを起動する

$ fcitx-autostart

※fcitx-autostartは自動起動させたいですが、.bashrcなどに書くとX環境を使っていないときに端末が立ち上がらなくなります。
なので、Windows側でVcXsrvを立ち上げた後にコマンドを実行してやります。

6.入力メソッドの追加

下記コマンドを実行して、入力メソッドの設定を開きます。

$ fcitx-config-gtk3

左下の「+」ボタンから、Mozcを追加してください。

f:id:odaryo:20200116160221p:plain
設定するとこうなります。
f:id:odaryo:20200116160224p:plain

試しにエディタを開いて、Ctrl+Spaceキーで日本語が入力できればOKです。
(確認用エディタはplumaを使用してます。)

f:id:odaryo:20200116161037j:plain

7.競合するショートカットキーを変更

※2021/02/16追加

デフォルトの設定ですと、PhpStormのキーボードショートカットと競合する設定がありました。
例えば、設定を開く「Ctrl + Alt + S」が競合するので無効化します。

①下記コマンドから入力メソッドの設定を開きます。

$ fcitx-config-gtk3

「全体の設定」タブをクリックします。

f:id:odaryo:20210216015546p:plain

②「Show Advanced Options」にチェックを入れます。

f:id:odaryo:20210216015343p:plain

下の方にある「すべての設定と入力履歴を保存」のショートカットキーを空にします。
念の為、「Switch Embedded Preedit」も空にしました。

f:id:odaryo:20210216015433p:plain

3.Dockerのインストール

下記手順に従ってDocker, Docker Composeをインストールします。

① Dockerのインストール

公式サイトを参考にインストールします。

$ sudo apt install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
$ sudo apt update
$ sudo apt install docker-ce docker-ce-cli containerd.io

インストールの確認

$ docker -v
Docker version 19.03.5, build 633a0ea838

このままではroot権限が無いと実行できないため、一般ユーザでも実行できるよう設定します。 (groupはすでに作られていると思いますが、一応実行)

$ sudo groupadd docker
$ sudo usermod -a -G docker <user_id>

WSL2を再起動することで反映されます。
PowerShellで下記コマンドを実行します。

wslconfig /t Ubuntu-20.04

参考:Redirecting…

② Docker Composeのインストール

同様にDocker Composeもインストールします。

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

インストールの確認

$ docker-compose -v
docker-compose version 1.25.0, build 0a186604

参考:Install Docker Compose | Docker Documentation

補足:dockerデーモンの起動について

WSL2の現バージョンでは、systemdが正しく動かず、デーモンの自動起動が設定できないようです。

WSL2を再起動するたびにdockerデーモンを起動する必要があります。
(インストール直後も起動していないため、下記コマンド実行が必要です)

起動コマンドは下記です。

$ sudo service docker start

4.PhpStormの設定

PhpStormのインストールについて説明します。

① インストール方法

今回はToolboxからインストールしました。

1.下記サイトより、Toolbox AppのLinux版(tar.gz)をダウンロード

www.jetbrains.com

2.下記コマンドを実行してインストール

$ sudo tar -xzf jetbrains-toolbox-*.tar.gz -C /usr/local/bin --strip-components 1

3.Toolbox起動

$ jetbrains-toolbox

VcXsrvを立ち上げているとGUIが起動します。
その後、アプリよりインストールしてください。

② PhpStormの設定

開発言語に合わせて設定してください。

Git、Docker、Node.jsなどはインストール後に設定を開くと自動で認識して設定されます。

また、フォントとして「Ricty Diminished」もインストールしました。

$ sudo apt install fonts-ricty-diminished

5.その他ツールのインストール

Node.js

IDEからLinterツールなどを実行するにはローカルにNode.jsをインストールしていたほうが都合がよいため、インストールします。

nvmからインストールしました。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
$ source $HOME/.bashrc

Node.js(LTS)のインストール

$ nvm install --lts

ついでにyarnもインストール
※指定したnodeのバージョン配下を指定してインストールする

$ node -v
v12.14.1
$ nvm use 12.14.1
$ npm install -g yarn

$ node -v
v12.14.1
$ npm -v
6.13.4
$ yarn -v
1.21.1

Fish Shell

シェルにfishをインストールします。
コマンドやディレクトリ名の補完機能が便利です。

テーマはシンプルな「clearance」に設定しました。

また、aliasなどの設定はbashで設定しているため、.bashrcの末尾に"exec fish"を記載してbash経由で起動しています。

① fishのインストール

インストールは公式の情報を参考にしました。

$ sudo apt-add-repository ppa:fish-shell/release-3
$ sudo apt-get update
$ sudo apt-get install fish

② テーマの変更

テーマやプラグイン管理のツール「fisherman」をインストールします。(参考
テーマはシンプルな「clearance」を選択しました。

$ curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish

以下はfish内で実行。

$ fish
> fisher add oh-my-fish/theme-clearance

※fisherが4系になり、addがinstallに変更になったようです。

addコマンドが聞かない場合はfisher add ....の部分をfisher install ....に置き換えてください。

③ 各種プラグインのインストール

  • bassのインストール
    fishでbashコマンドを使えるようにするためのプラグインです。

> fisher add edc/bass

bashスクリプトも下記のように動かすことができます。

> bass test.sh
> bass source config.sh

  • pecoのインストール

pecoは入力された一覧から絞り込み検索と、選択ができるようになるツールです。(参考)

いろいろな用途があるようですが、今回はhistoryの検索を設定しています。

> sudo apt install peco
> fisher add oh-my-fish/plugin-peco

config.fishに設定を追記する

> cat ~/.config/fish/config.fish
function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end

設定の反映

> source ~/.config/fish/config.fish

使用感について

たまに日本語変換が効かなくなることがありますが、おおむね快適に動作します。
また、Docker for windowsで作業していたときよりもビルド速度が上がっているようなので(体感)、精神的にも安心です。

日本語環境がLinux側にあるためWindows側で登録した辞書が使えなかったり、変換ダイアログがカーソル位置ではなくウィンドウの左下に出ていたりと変換周りの惜しい点はあります。

また、次の2つのコマンドをWSL2起動のたびに実行する必要があるのが難点です。

$ sudo service docker start
$ fcitx-autostart

とはいえ、Windowsの環境に左右されないというのは大きなメリットといえます。

しばらく使ってまた追記します。

終わりに

WSL2を使った開発環境について記載しました。

本物のLinux環境には快適さは及びませんが、Windowsマシンを使う人にとっては環境構築の1選択肢となるのではないでしょうか。

WSL2のapt updateでエラーが出る

ThinkPad ワイヤレス・トラックポイント・キーボード の腱鞘炎対策

トラックポイント付きキーボードを使うと、マウス操作の際にホームポジションから手を離さないで済むので生産性が上がります。

(上級者はキーボードショートカットですべてを操作できるからマウスは必要ないとか)

使いやすくて愛用しているのですが、一点問題が。。。
使っていると腕に痛みが走って、腱鞘炎のような症状が出てきました。

付属のトラックポイント(赤ポチ)だと大きく移動させようとしたときに力が必要で、それが負荷となっている模様。

対策をググってみると摩擦を大きくしたり、高さを高くして小さな力でも動かせるようにする記事がありました。 (下記リンクはThinkPadでの対策)

自作は面倒なので、記事にもあったソフトリムキャップを購入して入れ替えました。
ソフトリムは販売縮小とのことで、ソフトリムのみの取り扱いは無く、セット商品を購入

Amazonなどにもありますが、Lenovo本家のほうが安く購入できるかも。

www.lenovo.com

標準のソフトドームキャップと比べて高さもあり、ふちに指をひっかけられるので
てこの原理で軽い力で操作できます。

先端が少し出っ張ってしまうので、持ち運び中につぶれないか気になりますが、
操作性は抜群によくなりました。

運用して1か月ほどになりますが、特に痛みは出ていません。

ソフトリムがまとめて売られていたら買いたいな。

Node.jsのDockerコンテナにyarnをインストールしようとしてエラーが出た

はじめに

DockerfileからNodeコンテナをビルドする際に下記エラーが起きました。

npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/yarn/bin/yarn.js
npm ERR! dest /usr/local/bin/yarn
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/yarn/bin/yarn.js' -> '/usr/local/bin/yarn'
npm ERR! File exists: /usr/local/bin/yarn
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

Dockerfileの内容

FROM node:12-alpine

RUN npm install -g yarn

原因と対策

Node.jsコンテナにはyarnがインストール済みなので、再度入れようとしたときにエラーとなります。

なので、yarnインストールの行を削除。
無事起動完了。

ちなみに、Node.jsのバージョンを「10系」から「12系」に上げたときに起きました。

そりゃ2重に入れようとしたらエラーとなるよな。。。

nodeコンテナのissueを調べると、2017年にはyarnがインストール済みの模様

Unable to npm install -g yarn on 6.10 · Issue #344 · nodejs/docker-node · GitHub

いままで起動できていたのが不思議。

WSL2のX-ServerでGUI表示する際に「export DISPLAY=:0.0」が効かない

ThinkPad ワイヤレス・トラックポイント・キーボードのNewモデルが登場!

待っていた!

5年ほど前から使っていて、同じ型を買い変えながら現在3代目。

愛用しているキーボードのNewモデルが発表されました。

japanese.engadget.com

発売年が2013年なので、7年ぶりなんですね。
最近でもちらほらレビュー記事を見かけるので、やはり人気なんだなと思います。

トラックポイント搭載で、薄くモバイル向き。
キーピッチも広く、加えて打鍵感も軽く、打鍵音も静かと、唯一無二のキーボードだと思っています。

欠点は、無線モデルがBluetoothの仕様のせいか、たまに接続が切れること。
そのため、デスクトップ用に有線モデル、モバイル(SurfacePro)用に無線モデルと2台運用しております。

また、最初に買ったときはキートップが外れやすかったのですが、3代目は1年使ってますが未だ取れず。
マイナーチェンジされてるのかなと。
キートップ外れは保障期間内だったため、サポートに連絡して無償交換してもらえたのもポイント高かった)

Newモデルは打鍵感が変わるとのことで、どんなものか気になります。

2020年5月発売。
発売が楽しみだ。