忍んでいる肉球の足跡

プログラムに関連することを雑多に扱います

オンプレのphp環境をdocker環境に載せ替える ~ 下準備編

概要

オンプレのphp環境をdocker環境に載せ替えることをしたので、その軌跡を書ける範囲内で書くやつ

下準備で何をした?

オンプレのApache + PHP をdocker環境として載せ替えるときに nginx proxyで動かすことを考えた。

最初に行ったのはそのような環境を用意したときにXdebugができることを確認すること。

プロジェクト移植の前にnginx proxyに2つのサーバーをつないで動作するdocker compose環境を作成し、 それをベースにオンプレ環境を移植する手筈としたdocker環境を作成した。

りぽじとり

github.com

xdebugのバージョンが2->3って上がってるからiniを直さないと動かないかも

README.mdのコピー

### 概要
apacheでVirtual Hostをdockerで切り分ける。
このとき、dockerによって過度に複雑化せずに切り分けられることを望む。

- オンプレ + Apache(Virtual Host) 
  - メリット
    - 設定がわかりやすく簡単
      - 複数のサブドメインがディレクトリごとに設定ができる
  - デメリット
    - デバックを行おうとすると大変
      - 環境が切り分けられておらず、サブドメインごとの環境更新が難しい
      - デバック時にide.keyを指定する必要があるが散逸しがち
        - php.ini
        - conf.d/20_xdebug.ini
        - .htaccess
          - `php_value xdebug.remote_host=10.0.0.5`
        - bookmarklet
  - オンプレサーバーだとデバック自体が大変
- vagrant (Virtual Box) + Apache(Virtual Host) 
  - メリット
    - 個人ごとに環境を切り分けた上で検証確認が可能
    - バイナリファイルの配布で可能
    - デバックがしやすい
    - ファイル同期がよりわかりやすく
    - VMが既にあるならかなり簡単に導入が可能
  - デメリット
    - Virtual Host特有の問題が切り分けられていない
    - boxファイル作成手順が失われがち
    - ip addressの管理が面倒

- docker-compose.yml
  - メリット
    - 環境構築手順が実行できる形でドキュメント化されることが保証される
    - サブドメインごとの環境更新が容易
  - デメリット
    -  不用意に扱うとポート番号が増えて管理できなくなる
    
- docker-compose.yml + reverse proxy (nginx)
  - メリット
    - 環境構築手順が実行できる形でドキュメント化されることが保証される
    - サブドメインごとの環境更新が容易
    - ポート番号の管理も容易
  - デメリット
    - リバースプロキシが挟まることによる特有の症状が発生する 
    
#### 備考 reverse proxyとは?
ドメインによりHTTPリクエストを処理するサーバーを変更し、
forwardすることで柔軟にHTTPリクエストを処理・返却する機能。

### 移行手順
#### Virtual Host -> docker-compose.yml + reverse proxy (nginx)

移行元の環境想定
- php 7.0
- Virtual Host
  - blog1.nginx.com
  - blog2.nginx.com
- Xdebug: port = 10000

` ` `
# Ensure that Apache listens on port 80
Listen 80

# Listen for virtual host requests on all IP addresses
NameVirtualHost *:80

<VirtualHost *:80>
DocumentRoot /www/blog1.nginx.com/htdocs
ServerName blog1.nginx.com

# Other directives here

</VirtualHost>

<VirtualHost *:80>
DocumentRoot /www/blog2.nginx.com/htdocs
ServerName blog2.nginx.com

# Other directives here

</VirtualHost>
` ` `

### このリポジトリが完成形
` ` `
.
├── blog1.nginx.com
│   ├── usr
│   │   └── local
│   │       └── etc
│   │           └── php
│   │               └── conf.d
│   │                   └── 20_xdebug_setting.ini 
│   └── var
│       └── www
│           └── html
│               └── index.php
├── blog2.nginx.com
│   ├── usr
│   │   └── local
│   │       └── etc
│   │           └── php
│   │               └── conf.d
│   │                   └── 20_xdebug_setting.ini
│   └── var
│       └── www
│           └── html
│               └── index.php
├── docker-compose.yml # proxy挟んでデバックできるようXDEBUG_HOSTを指定することが肝
├── Dockerfile # php-7.0でデバック可能なapache server
├── proxy
│   ├── etc
│   │   └── nginx
│   │       └── conf.d
│   │           └── default.conf # reverse proxyの設定(80を転送)
│   └── html
│       └── index.html
└── README.md
` ` `

### 使い方
1. phpstorm (or idea ultimate) を用意する
1. 下記に用意した ipとホスト を /etc/hosts に追記する
1. cloneしたディレクトリをphpstormを開く
1. ./docker-compose.yml の XDEBUG_HOST を自分のPCのIPアドレスに置き換える
1. File > Setting > Languages & Frameworks > PHP > Debug
    - Xdebug > debug port を 10000 で指定する
        - ( 20_xdebug_setting.ini の xdebug.remote_port と同じものを指定する )
1. debugする
    1. git管理されている Edit Configuration の blog1.nginx.com を選択
    1. 虫のアイコンをクリック
    1. ./blog1.nginx.com/var/www/html/index.php に break pointを貼る
    1. http://blog1.nginx.com/ へアクセスし、breakpointで止まっていたら成功

` ` `/etc/hosts
127.0.0.1 blog1.nginx.com
127.0.0.1 blog2.nginx.com
` ` `

### 備考
Edit Configuration情報を自分で作りたい人用メモ

1. File > Setting > Languages & Frameworks > PHP > Debug
     - Xdebug > debug port を xdebug.remote_port に合わせる
1. File > Setting > Languages & Frameworks > PHP > Server
     - Host は /etc/hosts に追記してあり nginxのdefault.confで指定されていることを確認
     - Mapping は docker-compose.yml のvolumesで設定した場所を指定すること
1. Edit Configuration > Add > PHP Remote Server
     - 上記(PHP > Server)で作成したサーバー情報を選択
     - docker-compose.yml の environment > XDEBUG_HOST で指定したものを選択

ポータブルubuntu日本語GUI環境(紹介)

概要

windowsでもmacでもlinuxでもOSに依存しない再現可能な開発環境がGUIで欲しくない?

ほしいな!!!!!

→つくった!!!!(作ってる!!!)

なにこれ?

ubuntuの日本語GUIでideaを開けるようにするためのコンテナだよ。
日本語入力ができるようにmozcをインストールしてるよ。
ubuntuのidea環境がmac, linux, windowsのどこでも同様に開けるならば
OSに依存しない開発環境になってウハウハじゃね?って思って作ってる。

windows側で必要な用意

  • wsl2
  • VcXsrv (or X410)
  • Docker for Windows

動かすと何ができるの?

  • windows環境でlinuxの感覚で開発ができる
    • windowsオンリーで開発しようとすると大変
      • wslを使うとcommand lineを使うだけなら楽だけど、GUIIDE環境を利用しようとすると難しい
      • windows上にGUIIDE環境を用意するとコマンドのインストールが面倒
    • containerの中にGUIubuntu環境を作ったほうが楽
      • wslのaptリポジトリに頼らない開発が可能なのはとても良い
      • ubuntuで日本語入力できるGUIIDE環境を用意するのはwsl上に用意するよりも簡単

りぽじとり

github.com

usage

git clone git@github.com:nukisashineko/japanese_xapplication_xim_container.git
cd japanese_xapplication_xim_container
bash bin/donwload_idea.sh 
bash bin/start_idea.sh # 内部のDISPLAY_PORTのip addressは書き換え必須

todoとか

  • 下記の条件を満たした Linux container を作成する
    • [x] display portを利用してX applicationが動く環境
    • [x] 日本語入力ができる
    • dockerによる実行が可能
    • 実行環境

現状の問題点

  • ideaがgithub tokenを記憶してくれない
  • branchでdockerコンテナの起動するがdocker in dockerではない
    • composeのmountがWSL上のpathで指定しないと正常に動かない
  • endpointがideaを直実行するからideaの再起動時にコンテナの再起動が入るのが面倒
  • リフレッシュレートが若干悪く特にwindows sizeをリサイズする際に顕著

githubの動画をgif変換するコンテナ(供養)

なにこれ?

githubの添付できる動画ファイルはGIFのみだった時代がありました。(~2020年10月くらい)

その頃に作ったリポジトリの供養記事です。

どんなときにつかう?

画面キャプチャです。 javascript周りのUIの動きを見せる必要がある時や command lineの操作をLogごと見せたいときに使います。

作った理由

QuickTimeを利用して動画キャプチャすると mp4になります。 mp4 → GIFと変換を踏む必要がありました。 こういうのをフリーでローカル環境にて実行するにはffmpegを利用するのが便利です。

ffmpegによるGIF変換はネット検索するとたくさん出てくるのですが、ffmpegmacにインストールするものが主流でした。

自分は macffmpeg 入れたくなかったので、コンテナを用意してワンライナーで解決していました。

それが下記になります。

りぽじとり

github.com

使わなくなった理由

Githubがコメントで動画ファイルの添付ができるようになったからですね。

PHP Conference 2020 の LT枠で参加した

内容

fortee.jp speakerdeck.com

良かった点

  • 時間がぴったりで発表できた。

反省点

  • スライドの準備が遅い
    • 直前までスライドの準備をしていた
      • よって視聴側としての参加は発表後になってしまった
  • フェラー(えー、えーっと)が多い
    • 3秒ごとにあってかなり聞きにくかった
      • 次回があれば意識的に抑える

体験として

  • スライドを作るのが難しかった
    • 制限時間内に終わる
    • 要点を抑えて見やすくまとめる
  • カンファレンスや勉強会で発表している人たちの凄さを改めて感じた
    • 技術がある
    • 見やすい資料作成能力
    • 話術力もある

githubのPRコメント用gif convertorをdocker-composeを使って用意した

やりたかったこと

ローカル環境がきれいにしたまま、gif画像の変換を行う。 特にffmpeg, imagemagickは便利だけど、脆弱性の発見も多いので ローカルにインストールしたくないよねってなったので作った。

使い方

  1. movies/src に動画ファイルを置く
  2. ↓みたいに叩く
  3. movies/dist にgif画像として動画が出力される 
docker-compose run -e TARGET_MOV=sample_console_echo.mp4 runner
注意点:
  • githubに上げられるファイルのサイズは10MBまでらしいので適当に自分で修正して。
  • imagemagickのデフォルトポリシーだと256MiBを超えるとメモリーサイズエラーが出るのでpolicy.xmlを修正して。

リポジトリ

github.com

参考にしたコード;

qiita.com

wsl2環境でx410を通してideaショートカットで起動する方法

スクリプト

ショートカットの作成方法

powershellのショートカットを作成してプロパティを開き、リンク先を下記のように変更するといい

C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy RemoteSigned -File C:\path\to\example\run_idea_with_x410.ps1

説明

要するにこれ↓ x410.dev

ipadressの取得部分をpowerscriptに置き換える

昔は/etc/resolv.confとかなかった気がしたので作った。
しかしpengwin自体の環境崩壊が多くてやる気なくなったので公開しなかった気がするやつ。
今日起動したら若干安定していた気がしたので投稿。

ip addressの取得 bash

cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'

ip addressの取得 powershell

(Get-WmiObject -Class Win32_NetworkAdapterConfiguration -Filter { IPENABLED=TRUE and ServiceName="rt640x64" }|Select IPAddress).ipaddress[0]
ツイッターログ