コンテナ開発が捗るVS Code Remoteを使ってみた

## TL;DR

- 我のPHP、バージョン低すぎワロタ
- コンテナで実行したいけど、エディタはPC上のPHPしか使ってくれない...
- VS Code Remote という拡張があるらしい
- **コレイイネ**

---
## 注意

- PHP系の勉強会での発表資料です
- PHP前提で話しますが、知らなくても多分問題ないです
- Laravelの話が出てきますが知らなくても多分問題ないです

---

## ワタシ

- PHP歴7.5年くらい
- Laravel歴は3年くらい
- twitter - https://twitter.com/niisantokyo
- SCOUTERに入ったと思ったら社名がROXXになりました
- ![ROXX](https://roxx.co.jp/images/header-logo-black.png)

---

## PHPのバージョンが低い問題

自分のPC、５年もののMac。つまり、

```
$ php -v
PHP 5.6.30 (cli) (built: Oct 29 2017 20:30:32)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
```

---

まともに`php artisan`(Laravelのコマンドラインツール)すら動かない

```
$ php artisan

Parse error: parse error in sample/vendor/laravel/
framework/src/Illuminate/
Foundation/helpers.php on line 500
```
※ null合体演算子で落ちてる模様

---
エディタ(VS Code)にも叱られる

<img width="535" alt="スクリーンショット 2019-07-17 8.32.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/da0f1d89-ffc6-5c45-a52c-12aba705b791.png">

- 返り値の型指定はシンタックスエラーにされる
- null合体演算子もシンタックスエラー

---
## PHPのバージョン上げが必要だが...

- ネイティブのPHPのバージョンアップ方法わからん
- phpenv入れる手もあるが、うまくいかないことが多い
- というか、homebrew必要で、いろいろパッケージが必要で面倒
- 自分のPCの環境はなるだけクリーンに保ちたい...

---
# コンテナ使おう

---
## コンテナ

- 隔離された環境を用意できる
    - PHPのバージョン
    - ライブラリ・パッケージ
    - ディストリビューション
- コードで定義できる
    - Dockerfile

---
## コンテナでやっていること

- プロダクトの動作環境をコンテナ化
    - nginx
    - phpfpm
    - mysql
    - etc...
- その他のコマンドを打つための環境をコンテナ化
    - workspace
        - php7.2
        - composer
        - etc...

---
## こいつは解決

```
$ php artisan
Laravel Framework 5.8.29

Usage:
  command [options] [arguments]
...
```

---
## コンテナでできなかったこと

- VS Codeの動作をworkspace上で行うこと
- VS Codeのバックグラウンドで実行されるphpをdockerのphpに偽装すること

---
## とにかく、この状況を是正したい

<img width="535" alt="スクリーンショット 2019-07-17 8.32.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/da0f1d89-ffc6-5c45-a52c-12aba705b791.png">
コンテナ上では動くけど、エディタから怒られ続けるし、本当にどこが間違っているかわからない状態が続くのは生産性が悪い

---
## 悪あがき1

エイリアスやってみる

```
alias php='docker run --rm -v `pwd`/:/var/www niisan/phpdev php'
```

VS Codeは実際の動作ファイルを参照しているらしく無意味でした

---
## 悪あがき2

スクリプトファイルに置き換える

```
#! /bin/sh
docker run --rm -v `pwd`/:/var/www niisan/phpdev php
```
exeファイルじゃねぇよ！って怒られて終了

---
## うまくいきませんでした

---
# VS Code Remote

---
## VS Code Remote

- リモート上でVS Codeを動作させることができるエクステンション
- WSL2に合わせるかのように現れた機能
- SSH, Docker, WSLなどいろいろな種類のリモートに対応
- これを使うと、コンテナで動作している環境上でVS Codeを実行できるということ

---
## Remote Development
とりあえずこいつ入れておけば、問題ない

![スクリーンショット 2019-07-30 19.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/442f31a1-2761-0054-14f6-4d17c8b0b8f9.png)

実際にはこの中の Remote - Containers が今回の主役です。

---
# 使ってみる

---
## 環境の準備

いつもはコマンド打つために使っているワークスペースを`docker-compose`で立ち上げておく

```docker-compose.yml
version: '3'

services:
  workspace:
    build: workspace/
    depends_on:
      - db
    volumes:
      - ../event-queue:/var/www
    tty: true
...
```
`tty`オプションで、ターミナルに入れるようにしてある

---
## コンテナを立ち上げる

```
$ docker-compose up -d
Starting example_db_1         ... done
Starting example_phpmyadmin_1 ... done
Starting example_workspace_1  ... done
Starting example_fpm_1        ... done
Starting example_nginx_1      ... done
```

---
## VS Code 開く

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/a8f7161e-ec04-4d7d-ebad-e531721ef84a.png)

---
## お目当てのコンテナを選ぶ

![vscode2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/3f47214b-4baa-7db0-f78c-a3a95e357fb6.png)

---
## お目当てのディレクトリを開く

![vscode3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/0adcd188-e031-b644-d7d6-c9c408eb9bf5.png)

- いつものようにフォルダを開けばオッケー
- コンテナのファイルシステムが開く
- ファインダーが開かないので注意

---
## PHPのバージョン見てみる

VS Code上のターミナルを起動して確認

```
# php -v
PHP 7.3.7 (cli) (built: Jul 12 2019 22:25:55) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.7, Copyright (c) 1998-2018 Zend Technologies
```
---
## エクステンションを確かめる

コンテナに入りたてではエクステンションがない

<img width="" alt="スクリーンショット 2019-07-31 8.15.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/e113c75d-88fc-d03e-e9fd-2968c07e7493.png">

intelephentとかはここで入れてしまう
ローカルにあれば、すぐ持ってこれる

---
## 動く！

```
# php artisan 
Laravel Framework 5.8.29

Usage:
  command [options] [arguments]

Options:
  -h, --help            Display this help message
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi            Force ANSI output
      --no-ansi         Disable ANSI output
  -n, --no-interaction  Do not ask any interactive question
...
```

---
## 動く！！

当たり前のこと当たり前のように書けるっていいよね
<img width="" alt="スクリーンショット 2019-07-31 8.28.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102182/f2011580-cf29-8294-2059-888040e0bed3.png">

---
# まとめ

- 我が環境は古い(PHP 5.6)
- 開発環境はコンテナ化しているので問題ないが。。。
- エディタはコンテナ化していない
- エディタもコンテナで動作させたい
- VS Code Remote!!
- 適切な環境で適切に開発したい