なんてことない小ネタですが、Docker上のLaravelでホットリロードしたいなーって人のための設定です。  

### 開発サーバーのみの場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "8000:8000"
      - "3000:3000" # HMR用
    volumes:
      - ./:/var/www/html
    command: "php artisan serve --host 0.0.0.0"
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "0.0.0.0:8000",
  open: false // ブラウザの自動起動
});
~~~

`docker-compose.yml`は、すいません、だいぶ端折りました。  
実際には`./docker/app`に composer 等がインストールされるような php イメージの Dockerfile があります。  
あとDBとかも本当はありますが、関係ないので省いてます。 

### webサーバーをかます場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "3000:3000"
    volumes:
      - ./:/var/www/html
  web:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "http://web:80",
  open: false
});
~~~

### 共通操作

上記設定を記述したら、app コンテナの中で`npm run watch`を実行し、`http://localhost:3000`にアクセスすると完了です。  

.js や .vue ファイルのみならず、blade.php を変更してもホットリロードしてくれます。便利ですね。

Docker + Laravel (+ Vue) でホットリロード(HMR)したいときの設定

VS Code の拡張機能を紹介していたらキリがないのですが、個人的に特に、他のエディタよりも VS Code が優れていると感じる機能を一つだけご紹介します。

それが VS Code Remote Development なのですが、正直あちこちで優秀な解説サイトがあるので、簡単な説明に留めます。

### やらないこと

- Dockerの説明

***

### Remote Development について

拡張機能の `Remote-SSH`, `Remote-WSL`, `Remote-Containers` の詰め合わせです。

特に `Remote-Containers` が便利なのでこちらにスポットライトを浴びせます。

### Remote-Containers

突然ですが、 Docker って便利ですよね。

なんといってもローカルに言語の実行環境を用意する必要がなく、コンテナをいつでも気軽に破壊、再生ができるのが魅力的だと思います。

しかし、エディタでコーディングする際に役立つ、型解析、フォーマッター、リンター等のツールは、言語がインストールされていないと機能しません。

なのでせっかく Docker を使っているのに、ローカルで対象の言語をインストールしないと良いコーディング環境が用意できませんでした。

`Remote-Containers` は、そんな悩みを解決できます。

VS Code の設定をコンテナ内に隠蔽し、インターフェイスのみローカルで動作させることができるようになります。

それによってコンテナ内の言語の実行環境を利用して型解析、フォーマッター、リンター等の機能を利用することができます。

### 利用方法

VS Code の拡張機能の `Remote Development` をインストールします。

[![vscode_remote_development.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)

`docker-compose.yml` や `Dockerfile` が含まれるプロジェクトを VS Code で開くと、左下にオレンジのアイコンがでてきます。

[![remote_icon.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)  
(自分の場合WSL上で動かしてるので少し表示が違うと思います。ローカル上ならアイコンだけのはず。)

オレンジのやつをクリックするとメニューがでてくるので、 `Add Development Container Configuration Files` をクリックします。

自分で設定を書くか `Dockerfile` を基準とした設定をつくるか `docker-compose.yml` を基準とした設定をつくるか聞かれますが、
今回は `docker-compose.yml`で構築されたプロジェクトを想定して、`From 'docker-compose.yml'` を選択します。

すると、 `.devcontainer/devcontainer.json` と `.devcontainer/docker-compose.yml` が作成されます。

`devcontainer.json` を見ていきましょう。

### devcontainer.json

```json
{
	"name": "name", // なんでも良い
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app", // appコンテナを想定
	"workspaceFolder": "/app", // appコンテナのワークスペース
	"settings": { // appコンテナの中だけで使いたい VS Code の設定
		"terminal.integrated.shell.linux": null
	},
	"extensions": [] // appコンテナの中だけで使いたい VS Code の拡張機能
}
```

元々記述されていたコメントを全部削除したらこのようになると思います。

今回は rails を docker-compose で構築した想定で `devcontainer.json` を書き換えてみます。

```json
{
	"name": "rails",
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app",
	"workspaceFolder": "/usr/src/app",
	"settings": {
		"ruby.useLanguageServer": true,
		"ruby.intellisense": "rubyLocate",
		"rufo.useBundler": false,
		"rufo.exe": "/usr/local/bundle/bin/rufo",
		"solargraph.useBundler": false,
		"solargraph.commandPath": "/usr/local/bundle/bin/solargraph",
		"solargraph.definitions": true,
		"solargraph.diagnostics": true
	},
	"extensions": [
		"aki77.rails-db-schema",
		"aki77.rails-routes",
		"castwide.solargraph",
		"eamodio.gitlens",
		"jnbt.vscode-rufo",
		"kaiwood.endwise",
		"rebornix.ruby",
		"wingrunr21.vscode-ruby"
	],
	"postCreateCommand": "gem install rufo solargraph" // コンテナ作成後に実行される
}
```

少し "settings" を冗長に書いているのですが、概ねこんなところでしょうか。

"postCreateCommand" によって、フォーマッターの `rufo` と、型解析の `solargraph` をインストールしています。

本来ならローカルで Ruby をインストールしないと動作しないこの2つの拡張機能を、コンテナの中にインストールすることによって動作させることができるわけですね。

また、元々の `Dockerfile` や `docker-compose.yml` でインストールさせず、 VS Code の機能によってインストールさせることで、他のエディタを使っていたり、拡張機能が必要ない他の開発者の環境に余分なものをインストールさせずにすみます。平和。

次に `.devcontainer/docker-compose.yml` を見てみましょう。

### .devcontainer/docker-compose.yml

```yml
version: '3'
services:
  app:
    volumes:
      - ~/.gitconfig:/root/.gitconfig
```

こちらは単純に、開発用に追加でボリュームマウントしたいものを書くだけで良いかと思われます。

他にありがちなのはシェルの設定とかをマウントさせるとかでしょうか。

### コンテナ作成

準備ができたら、再びオレンジのアイコンをクリックして、`Open Folder in Container` を選択します。

すると初回は結構時間が掛かった後、無事に作成され、ローカルと変わらぬコーディングができるようになってると思います。

以後 `devcontainer` の設定を変えたりしたら Rebuild してください。

ためしに `rufo` が動くか確認。

[![rufo.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)  
できた。

### まとめ

今やほとんどの人が Docker で開発環境を構築していると思います。

今回の `Remote Development` は Docker の開発環境をよりサポートしてくれる優れものだと思います。

最近の Microsoft は WSL2 しかり VS Code しかり、便利なものをバリバリ作ってくれて良いですね。

あとは IE も破壊してくれれば最高なのですが。


VS Code + Docker で開発するなら、VS Code Remote Development

プログラマにとって、エディタやターミナルのフォントはこだわりポイントではないでしょうか。  

最近 mac から windows に移行して、ターミナルを起動したらフォントがジャミジャミしていてとても嫌な思いをしたので、  推しのフォント「白源」をインストールがてら紹介します。

### 白源とは

紹介するといっても、[こちら](https://qiita.com/tawara_/items/374f3ca0a386fab8b305) に作者様の解説がたっぷりあるので、それを見るのがおすすめです。  

自分の環境の VS Code のデフォルトと白源の画像を見比べてみましょう。  

#### デフォルトのフォント

[![vscode_default.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_default.png?alt=media&token=58c76223-98c1-495b-9085-3c4251b79a7b)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_default.png?alt=media&token=58c76223-98c1-495b-9085-3c4251b79a7b)

#### 白源

[![vscode_hackgen35.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_hackgen35.png?alt=media&token=9d26c94a-65ea-492c-bca1-49a817c385b6)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_hackgen35.png?alt=media&token=9d26c94a-65ea-492c-bca1-49a817c385b6)  

どうでしょうか。勿論個人の好みによるでしょうが、結構見やすくなってるのではないでしょうか。

### インストール

[こちら](https://github.com/yuru7/HackGen/releases) より HackGen または HackGenNerd の zip ファイルをDL展開する。  

全部インストールしてしまっても良いのですが、自分は HackGen35 と HackGen35Console の Regular と Bold をそれぞれインストールしました。

### 導入

あとは好きなエディタなりターミナルに導入しておしまい。お疲れさまでした。

### いかがでしたか？

いかがでしたか？フォントは、人によっては全く気にならないかもしれない細かい部分ですが、作業効率に関わるレベルで影響値の大きいものだと思っています。  

白源が気に入らなかった人も、他のフォントを探す旅に出るのは、無駄なことではないと思います。  
是非旅立ちましょう。

エディタやターミナルにおすすめのフォント「白源」

会社員の頃からシェルはzshを使ってましたが、その頃の上司がfishを勧めていたのをふと思い出し、移行してみました。  

結果的にfish最高ってなったので設定のメモがてら紹介します。

### fishとは
POSIX非互換のシェルです。  

POSIXってなんやねんって人は迷いなくfishを入れましょう。  

えーPOSIX非互換かーって人は躊躇してから入れましょう。

### なにができるの？
- デフォルトの設定で強力な補完が可能
- 見やすいシンタックスハイライト
- 入力履歴から優先して補完候補の表示
  
[![a.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/a.gif?alt=media&token=3251ab0a-215b-4f27-b8da-1ec5dad10df0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/a.gif?alt=media&token=3251ab0a-215b-4f27-b8da-1ec5dad10df0)  
dockerの補完もデフォルトでばっちり  

### 導入
#### macの場合

```bash
brew install fish
```

#### ubuntuの場合

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

#### ログインシェルをfishに
まだログインシェルにしたくないよって人は飛ばしてください。

```bash
chsh -s /usr/bin/fish
```

一度ターミナルを再起動します。

### プラグインマネージャー導入

fisherがおすすめらしいです。  

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

### テーマ導入

こちら: [https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md](https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md)  
を参考に好きなテーマをいれましょう。  

一番人気は oh-my-fish/theme-bobthefish のようです。  

自分は oh-my-fish/theme-clearance を入れました。

```bash
fisher install oh-my-fish/theme-clearance
```

### 他にも便利なプラグインがあるよ
以上で基本的には導入終了です。お疲れさまでした。  

デフォルトでも素晴らしいシェルですが、一応いくつか便利なプラグインがあるので、代表的なもの一つだけ紹介しておきます。  


### fzf
fishじゃなくても使えますが、大変便利な検索プラグインです。  

Ctrl + r で曖昧な入力履歴検索ができます。  

[![b.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/b.gif?alt=media&token=606c905a-9def-4b53-9feb-d2a50324cd4c)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/b.gif?alt=media&token=606c905a-9def-4b53-9feb-d2a50324cd4c)  

Ctrl + o で曖昧なファイル検索。  

[![c.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/c.gif?alt=media&token=f301112b-11de-471f-b97a-b086afd2acab)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/c.gif?alt=media&token=f301112b-11de-471f-b97a-b086afd2acab)  

めっちゃ便利に見えませんか。見えたら導入しましょう。

#### macの場合

```bash
brew install fzf
```

#### ubuntuの場合

```bash
sudo apt-get install fzf
```

#### fish用のラッパーを導入

```bash
fisher install jethrokuan/fzf
```

#### オプションの記述(任意)
~/.config/fish/config.fish に記述

set -U FZF_LEGACY_KEYBINDINGS 0  
set -U FZF_REVERSE_ISEARCH_OPTS "--reverse --height=100%"  
set -U FZF_FIND_FILE_OPTS "--reverse --height=100%"  

オプションの詳細はこちらまで  
[https://github.com/jethrokuan/fzf](https://github.com/jethrokuan/fzf)  

### あとがき
以上 fish でした。何がいいってデフォルトでもめちゃめちゃ便利なところだと思います。  

zshで同様のことをやろうとすると結構設定かましてプラグインいれないといけません。  

PC買い替えたとき用の備忘録として残しましたが、わりと万人におすすめのシェルです。是非使ってみてください。  

あと前の会社の上司ありがとうございます。

Docker + Laravel (+ Vue) でホットリロード(HMR)したいときの設定

VS Code + Docker で開発するなら、VS Code Remote Development

エディタやターミナルにおすすめのフォント「白源」

補完が強力なおすすめシェル fish