オンプレのphp環境をdocker環境に載せ替える ~ 下準備編
概要
オンプレのphp環境をdocker環境に載せ替えることをしたので、その軌跡を書ける範囲内で書くやつ
下準備で何をした？
オンプレのApache + PHP をdocker環境として載せ替えるときに nginx proxyで動かすことを考えた。
最初に行ったのはそのような環境を用意したときにXdebugができることを確認すること。
プロジェクト移植の前にnginx proxyに２つのサーバーをつないで動作するdocker compose環境を作成し、 それをベースにオンプレ環境を移植する手筈としたdocker環境を作成した。
りぽじとり
※ 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
動かすと何ができるの？
りぽじとり
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 を作成する
現状の問題点
githubの動画をgif変換するコンテナ（供養）
なにこれ？
githubの添付できる動画ファイルはGIFのみだった時代がありました。（～2020年10月くらい）
その頃に作ったリポジトリの供養記事です。
どんなときにつかう？
画面キャプチャです。 javascript周りのUIの動きを見せる必要がある時や command lineの操作をLogごと見せたいときに使います。
作った理由
QuickTimeを利用して動画キャプチャすると mp4になります。 mp4 → GIFと変換を踏む必要がありました。 こういうのをフリーでローカル環境にて実行するにはffmpegを利用するのが便利です。
ffmpegによるGIF変換はネット検索するとたくさん出てくるのですが、ffmpegをmacにインストールするものが主流でした。
自分は mac に ffmpeg 入れたくなかったので、コンテナを用意してワンライナーで解決していました。
それが下記になります。
りぽじとり
使わなくなった理由
Githubがコメントで動画ファイルの添付ができるようになったからですね。
PHP Conference 2020 の LT枠で参加した
内容
良かった点
- 時間がぴったりで発表できた。
反省点
- スライドの準備が遅い
- 直前までスライドの準備をしていた
- よって視聴側としての参加は発表後になってしまった
- 直前までスライドの準備をしていた
- フェラー（えー、えーっと）が多い
- 3秒ごとにあってかなり聞きにくかった
- 次回があれば意識的に抑える
- 3秒ごとにあってかなり聞きにくかった
体験として
- スライドを作るのが難しかった
- 制限時間内に終わる
- 要点を抑えて見やすくまとめる
- カンファレンスや勉強会で発表している人たちの凄さを改めて感じた
- 技術がある
- 見やすい資料作成能力
- 話術力もある
githubのPRコメント用gif convertorをdocker-composeを使って用意した
やりたかったこと
ローカル環境がきれいにしたまま、gif画像の変換を行う。 特にffmpeg, imagemagickは便利だけど、脆弱性の発見も多いので ローカルにインストールしたくないよねってなったので作った。
使い方
- movies/src に動画ファイルを置く
- ↓みたいに叩く
- movies/dist にgif画像として動画が出力される
docker-compose run -e TARGET_MOV=sample_console_echo.mp4 runner
注意点：
- githubに上げられるファイルのサイズは10MBまでらしいので適当に自分で修正して。
- imagemagickのデフォルトポリシーだと256MiBを超えるとメモリーサイズエラーが出るのでpolicy.xmlを修正して。
リポジトリ；
参考にしたコード；
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]
ツイッターログ
PowerShellで指定NICのIPAddress取得ワンライナー。
— ぬさし (@nukisashineko) 2019年6月19日
ServiceNameは適宜 Get-WmiObject -Class Win32_NetworkAdapterConfiguration で調べて。
-----
(Get-WmiObject -Class Win32_NetworkAdapterConfiguration -Filter { IPENABLED=TRUE and ServiceName="rt640x64" }|Select IPAddress).ipaddress[0]
