Posted at

コンテナ開発が捗る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



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

自分のPC、5年ものの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)にも叱られる

スクリーンショット 2019-07-17 8.32.01.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に偽装すること



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

スクリーンショット 2019-07-17 8.32.01.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

実際にはこの中の 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



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

vscode2.png



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

vscode3.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



エクステンションを確かめる

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

スクリーンショット 2019-07-31 8.15.14.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
...



動く!!

当たり前のこと当たり前のように書けるっていいよね

スクリーンショット 2019-07-31 8.28.54.png



まとめ


  • 我が環境は古い(PHP 5.6)

  • 開発環境はコンテナ化しているので問題ないが。。。

  • エディタはコンテナ化していない

  • エディタもコンテナで動作させたい

  • VS Code Remote!!

  • 適切な環境で適切に開発したい