【SPA】DockerでCodeIgniter4 + Vue.jsのSPAの開発環境を構築する：前編

Laravel + Laravel + Vue.js の組み合わせは公式サポートも充実していて構築が簡単ですが、 CodeIgniter4 + Vue.js の場合は自前で環境を整える必要があります。このメモでは Doc […]

  • calendar_today 2025.12.9
  • edit_calendar 2025.12.9

Laravel +

Laravel + Vue.js の組み合わせは公式サポートも充実していて構築が簡単ですが、 CodeIgniter4 + Vue.js の場合は自前で環境を整える必要があります。このメモでは Docker + DevContainer を利用して、**CodeIgniter4（バックエンド）**と **Vue.js（フロントエンド）**によるSPA開発環境を構築する手順をメモにまとめます。

ベースイメージのOSには AlmaLinux 9.6 を採用し、ApacheなどのWebサーバーを使わずに各サーバーを独立起動する構成としています。今回はあくまでチュートリアルのため、DB接続などは省略し、最小構成で動作確認できる環境を作成します。

ディレクトリ構造

project-root/
├─ .devcontainer/
│  ├─ docker/
│  │  ├─ app/
│  │  │  └─ php.ini
│  │  ├─ docker-compose.yml
│  │  └─ dockerfile
│  └─ devcontainer.json
├─ back/  # CodeIgniter4
└─ front/ # Vue.js (Vite)

dockerfile

# OS - AlmaLinux 9.6
FROM almalinux:9.6

# 環境変数の設定
ENV PHP_VERSION=8.3
ENV COMPOSER_VERSION=2.8.12
ENV NODE_VERSION=22
ENV NPM_VERSION=latest

# 基本セットアップ
RUN dnf -y update && \\
    dnf -y install epel-release git unzip findutils yum-utils ca-certificates && \\
    dnf config-manager --set-enabled crb

# PHP
RUN dnf -y install <https://rpms.remirepo.net/enterprise/remi-release-9.rpm> && \\
    dnf module reset php -y && \\
    dnf module enable php:remi-${PHP_VERSION} -y && \\
    dnf install -y php php-cli php-mbstring php-xml php-pdo php-mysqlnd php-common php-opcache php-gd php-curl php-zip php-bcmath php-intl && \\
    dnf clean all

# Composer
RUN curl -sS <https://getcomposer.org/installer> | php -- --version=${COMPOSER_VERSION} && \\
    mv composer.phar /usr/local/bin/composer

# Node.js + npm + Composer
RUN curl -fsSL <https://rpm.nodesource.com/setup_${NODE_VERSION}.x> | bash - && \\
    dnf install -y nodejs && \\
    npm install -g npm@${NPM_VERSION}

# cleanup
RUN dnf clean all

devcontainer.jsonベースイメージに AlmaLinux 9.6 を使用し、PHP には CodeIgniter4 の一般的な機能をカバーする主要モジュールを導入しています。

本構成では Apache や Nginx などのウェブサーバーをインストールしないで、CodeIgniter4 と Vite の開発サーバーを利用します。そうすることで Vite をフル活用できるため、Vue.js などのビルドが不要となります。ウェブサーバーを導入することもできますが、かなりややこしくなりますし、逐一ビルドが必要となりますのでおすすめできません。

docker-compose.yml

name: ci4-vue

services:
  # PHP
  app:
    container_name: ci4-vue-app
    build:
      context: ../../
      dockerfile: .devcontainer/docker/dockerfile
    volumes:
      - ../../:/ci4vue
      - ./app/php.ini:/etc/php.ini
      - vendor-cache:/ci4vue/back/vendor
      - node-modules-cache:/ci4vue/front/node_modules
    depends_on:
      - db
    networks:
      - network
    tty: true

  # MySQL
  db:
    container_name: ci4-vue-db
    image: mysql:8.0.39
    environment:
      MYSQL_ROOT_PASSWORD: rootpass
      MYSQL_DATABASE: ci4_vue_test
      MYSQL_USER: developer
      MYSQL_PASSWORD: developer
      TZ: Asia/Tokyo
    ports:
      - "3306:3306"
    volumes:
      - volume:/var/lib/mysql
    networks:
      - network

volumes:
  volume:
  vendor-cache:
  node-modules-cache:

# 定義されたネットワーク
networks:
  network:
    driver: bridge

../../:/ci4vue と記述してローカルとコンテナ内のワークスペースを同期しています。前回はローカルで開発を進める構成でしたが、今回は Dev Container を使用してコンテナ上で開発を進めるため、ローカルとコンテナ内を同期させる必要があります。これをしないと、コンテナ内とローカルでファイルが独立した状態となってしまいます。

各モジュールは vendor-cache / node-modules-cache と記述することで、逆にローカルと同期させてきませんが、これは各モジュールのインストールをローカルではなく、コンテナ上で実行させてローカル環境に依存させないためです。こうすることで、ローカル環境の差異による事故を未然に防ぎます。

今回ウェブサーバーの様な永続的に起動するアプリがPHPコンテナに存在しないため、そのままだとコンテナが即時終了してしまいます。そのため tty: true を設定して、コンテナが終了するのを防ぎます。

devcontainer.json

{
  "name": "CodeIgniter & Vue.js",
  "dockerComposeFile": "./docker/docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/ci4vue",
  "shutdownAction": "stopCompose",
  "customizations": {
    "vscode": {
      "settings": {
        "files.eol": "\\n"
      },
      "extensions": [
        // Language
        "ms-ceintl.vscode-language-pack-ja",
        // Git
        "mhutchie.git-graph",
        "donjayamanne.githistory",
        "eamodio.gitlens",
        // PHP
        "bmewburn.vscode-intelephense-client",
        "neilbrayfield.php-docblocker",
        // Vue.js
        "vue.volar",
        // Tailwind CSS
        "bradlc.vscode-tailwindcss",
        // Utility
        "github.copilot",
        // Formatter & Linter
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  }
}

appコンテナ上で開発を行うための設定と、コンテナ内で実行するVS Codeの設定が記述されています。service に app と記述して対象のコンテナを指定します。 workspaceFolder に書かれているディレクトリは docker-compose.yml でローカルと同期されるディレクトリです。extensions にインストールする拡張機能が設定されています。このように、Dev Container を使用することで、環境の統一だけでなく、IDEの設定などの統一が可能です。

フォーマッターもインストールしていますが、好みがわかれますので、個人開発だったらインストールは不要です。ですがチームで開発を行っていて、Git管理を行っている場合はフォーマッターを使用して、形式を統一した方が管理が楽になります。

CodeIgniter4 のプロジェクト作成

まず現在のPCにインストールされている Composer のバージョンが、今回構築する開発環境（コンテナ内）の Composer バージョンと同一であることを確認してください。

composer --version

もし プロジェクトの作成処理もコンテナ上で実行 したい場合は、docker-compose.yml 内の以下の2行を一時的に削除してください。

vendor-cache:/ci4vue/back/vendor
node-modules-cache:/ci4vue/front/node_modules

その後、VS Code を再起動し、「コンテナーで再度開く」と表示された右下のボタンをクリックしてから、プロジェクト作成コマンドを実行します。

注意： CodeIgniter4 のプロジェクト作成時は、対象フォルダが空である必要があります。上記のボリューム設定を残したままだと、自動的に vendor や node_modules が生成され、プロジェクト作成時にエラーが発生してしまいます。

なお、vendor や node_modules をわざわざ Volume にバインドしている理由は、ローカル環境でインストールした依存ファイルをそのまま DevContainer 内で使用すると、OSの差異による変換処理が発生し、php spark serve などでサーバーを起動した際に動作が極端に重くなるためです。

プロジェクトの作成などもコンテナ上で実行したい場合は docker-compose.yml の vendor-cache:/ci4vue/back/vendor と node-modules-cache:/ci4vue/front/node_modules を一旦削除してから VS Code を再起動して「コンテナーで再度開く」と右下に表示されるボタンをクリックしてから、プロジェクトの作成を実行してください。プロジェクト作成時には、対象のフォルダが空である必要があるのですが、ボリュームの関連付けを削除しないとフォルダが自動生成されてしまい、各プロジェクトの作成が実行できなくなってしまいます。

バージョンが同一な事を確認したら、下記を実行してください。

cd back
composer create-project codeigniter4/appstarter .

Vue.js のプロジェクト作成

Node.jsのバージョンとnpmのバージョンを確認して、開発環境のバージョンと同一である事を確認してください。

cd ../front
npm create vite@latest .
npm i
npm i -D pinia pinia-plugin-persistedstate vue-router

追加で状態管理とルーティングのパッケージをインストールしています。 create vite@latest を実行すると色々聞かれますが、Vue.jsを選んで、TypeScriptを選んでください。他は初期選択肢のままで問題ないはずです。

後編へ続く

ここまでで環境の土台は整いましたが、この状態ではまだアプリは動作しません。後編ではCodeIgniter4とViteの設定を行い、サンプルページを確認できるようになるまでを行います。

Related Posts