Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

by niisan-tokyo
1 / 31

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!!
  • 適切な環境で適切に開発したい
niisan-tokyo
流行りに微妙に遅れてついていく、エンジニア9年生です。
roxx
人材紹介業むけプラットフォーム「agent bank」、リファレンスチェックサービス「back check」を運営。
https://roxx.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away