codeigniter vuejs

Codeigniter와 Vue cli 3 같이 쓰기

Codeigniter는 간단한 PHP MVC 프레임워크임. 간단하기 쓰기엔 가볍고 MVC 패턴이 확실하게 구분되어 있어서 얘만 사용하기엔 편하다.
근데 frontend에서 액션이나 웹페이지 구성이 필요할 땐 php에 html, javascript만 쓰기엔 부족한 느낌…
vuejs랑 vuetifyjs를 cdn으로 쓰고 있었지만 패키징해서 사용해보기로 시도함

1. codeigniter 4 다운로드

여기선 menual installation 방법을 사용하려고 한다.

다운로드 받아서 압축을 풀면 끝
아파치랑 연동해도 되고 그냥 개발용 서버를 띄울 수 있다.

2. Backend 서버 시작

압출 풀고

압축을 풀면 이런 디렉터리 구조인데 우선은 app, public만 보자

• app : CI 구성하는 config라던지 MVC 패턴을 이루는 항목들과 필요한 library 를 모아둔 디렉터리
• public : web root 디렉터리. index.php로 CI 프로젝트의 시작점이 될 정적파일 디렉터리

서버 구동

cd codeigniter # 다운받은 codeigniter 폴더
php spark serve

웹으로 확인하면 welcome 페이지가 뜬다

3. Frontend 서버 생성

Vue CLI

brew install npm
npm install -g @vue/cli
vue create frontend # frontend 라고 이름 지음

vue create 로 생성하면 선택하는 항목이 나오는데 대부분 recommend 옵션이나 default 옵션으로 선택

4. Frontend 서버 시작

cd frontend
npm install --save path # 설정 만들 때 필요해서 미리 설치
npm run serve

여러 의존성 확인하고 다운하고 아래처럼 실행된다

5. frontend/vue.config.js 수정

npm run serve 를 중지(ctrl + c) 시키고 vue 프로젝트의 설정을 변경해준다.
frontend/vue.config.js 기본생성되지 않아서 새로 파일을 만들고 아래 설정 추가

const path = require("path");

module.exports = {
    // 시작점이 될 index 페이지의 경로를 지정 (codeigniter의 view 디렉터리)
  indexPath: path.resolve(__dirname, "../app/Views/frontend/index.html"),
  // css, js등 정적파일들의 경로 (codeigniter의 정적 디렉터리여야 해서)
  outputDir: path.resolve(__dirname, "../public/frontend"),
  publicPath: "/frontend/",
  devServer: {
    proxy: {
        // /api/* 는 backend 서버로 프록시 시켜주기
      "/api": {
          target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
};

6. app/Controllers/Home.php 수정

CI가 기본 디폴트 라우터 (메인페이지)를 Home Controller로 잡고 있다.
여기서는 frontend에 의해 빌드된 파일들을 CI에서 불러와 웹에서 확인할 수 있게만 설정

<?php namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        // 이부분 view() 안에 있는 부분을 바꿔주자
        eturn view('frontend/index.html');
    }
}

7. Frontend Build

frontend 폴더에서

npm run build

이 항목들이 생김

• codeigniter/app/Views/frontend/index.html
• codeigniter/public/frontend/css
• codeigniter/public/frontend/js
• codeigniter/public/frontend/img
• codeigniter/public/frontend/favicon.ico

8. codeigniter 로 접속해보면

http://localhost:8080 으로 접속해 보면 아까 php spark serve 로 접속한 페이지와는 다르게 vue 로 만든 페이지가 뜨는걸 확인