認証無しのAPIでデータ取ってきて画面に表示するだけの簡単なシステム
の、ためだけにわざわざローカル環境にApache・PHP・Node・DB入れるとかめんどくせ～（ものぐさ
そんな時は。。。
そう、DevContainerだね
環境としてはこちら
- PHP：8.3
- PostgreSQL：16
設定ファイルはこちら
{
"name": "passport-inquiry",
"image": "mcr.microsoft.com/devcontainers/php:1-8.3-bullseye",
"forwardPorts": [
8080, // Apache
5173 // vite
],
"features": {
"ghcr.io/itsmechlark/features/postgresql:1": {
"version": "16"
},
"ghcr.io/devcontainers-extra/features/vue-cli:2": {
"version": "latest"
}
}
}
ベースはPHPで、ポスグレとVueCliを一緒に入れてる感じです。
※正直VueCliはプロジェクトを作るために入れた感じですが既にローカルとかでプロジェクト作成されている場合はなくてもいいと思ってる。
→PHPかポスグレ入れたタイミングでNodeが付属されているため
この構成で入れるとApacheがPHPに付属してきて、localhost:8080からアクセスできるようになります。
じゃあ作ってくか。。。
色々と設定を変えれば簡単にできると思うけど、その設定を調べるのも面倒くさいので、ビルド後の配置はコマンドゴリゴリでやるための構成です。
自分で使う時はvite.configやPHPソースの場所、マウントするフォルダなどを色々と切り替えて考えて行ってね！
フォルダ構成はこんな感じ
phpフォルダには名前の通り、PHPのバッチとか共通的なクラスとかFunctionを格納する。
vueフォルダはVueプロジェクトのルートフォルダとなります。
公開（ローカルブラウザ）で見るためには？
内包されているApacheのDocrootがデフォルトだと「/var/www/html」になるので、vue資源をビルドして出来るdistフォルダの中身を /var/www/html にコピーすればよろし。
PHP製のAPIを追加するとかであれば、
phpフォルダ内にapiフォルダを作ってそこで実装し /var/www/html にコピーする。
またはvueプロジェクトしたのpublicフォルダ下にapiフォルダを作ってそこで作ってビルドすればdistにそのままコピーされるため、vueの資源と一緒に /var/www/html にコピーすればいいだけになるね。
ちなみにviteだけでの起動も出来るため、いちいちビルドがめんどくせぇって時はviteで立ち上げておいて、localhost:5173をブラウザで開くのもよろし。
→そのためにDevContainerの設定JSONのforwardPortsにポート指定してある
こんな感じで「ちょっとこんな感じの案件が有るんだけど。。。」みたいな時のプロトを作る際の手間をちょっとでも減らせればということで記事化してみた。
ね、簡単でしょ？