codeigniter vuejs

Codeigniter와 Vue cli 3 같이 쓰기

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

1. codeigniter 4 다운로드

여기선 menual installation 방법을 사용하려고 한다.
Codeigniter 다운로드
다운로드 받아서 압축을 풀면 끝
아파치랑 연동해도 되고 그냥 개발용 서버를 띄울 수 있다.

2. Backend 서버 시작

압출 풀고

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

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

서버 구동

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

서버 구동 화면

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

3. Frontend 서버 생성

Vue CLI

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

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

4. Frontend 서버 시작

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

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

5. frontend/vue.config.js 수정

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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에서 불러와 웹에서 확인할 수 있게만 설정

1
2
3
4
5
6
7
8
9
10
<?php namespace App\Controllers;

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

7. Frontend Build

frontend 폴더에서

1
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 로 만든 페이지가 뜨는걸 확인

Hexo + Icarus 테마 적용해서 배포하기

1. Hexo install

1
2
3
4
5
# 이런거 설치 해서 npm 설치되어 있단 가정 하고
brew install nodejs

# hexo cli 설치하기
npm install -g hexo-cli

2. 블로그 디렉터리 생성

1
2
3
hexo init blog
cd blog
hexo s

3. blog/_config.yml 수정

1
2
3
4
deploy: 
type: git
repo: https://github.com/garden715/garden715.github.io.git
branch: master

4. Icarus 테마 적용

1
2
3
4
5
6
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
vim blog/_config.yml
# theme: icarus
hexo s
# 서버 시작하면 blog/themes/icarus/_config.yml 파일이 생성됨
# 이 파일에서 테마 설정 변경

4. 포스트 쓰기

1
hexo new post '포스트명'

5. 배포

1
2
hexo clean
hexo deploy

Zabbix Centos 7 HA 구성

1. root 접속 제한 (Optional)

1
2
3
vi /etc/ssh/sshd_config
# PermitRootLogin no
systemctl restart sshd

2. 계정 생성 (Optional)

그냥 리눅스에 ssh 접속 할 계정 하나 추가해 주기

1
2
useradd [user name]
passwd [user name]

3. sudoer 등록 (Optional)

sudoer로 추가해주기. 편하니까

1
visudo

4. 필요한 도구 설치

zabbix server, httpd 설치한다.
여기서는 DB(MYSQL)서버는 다른 서버로 구축해 연동해서 사용하는 걸로

1
2
3
4
5
6
7
8
9
10
11
yum install httpd
yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
yum -y install yum-utils
subscription-manager repos --enable=rhel-7-server-optional-rpms
yum-config-manager --enable remi-php73
yum-config-manager --disable remi-php54
yum search php73 | more
yum install php73 php73-php php73-php-fpm php73-php-gd php73-php-json php73-php-mbstring php73-php-mysqlnd php73-php-xml php73-php-xmlrpc php73-php-opcache curl curl-devel php73-php-devel

sudo ln -s /usr/bin/php73 /usr/bin/php

5. Zabbix 설치

1
2
3
4
yum -y install zabbix-server-mysql zabbix-web-mysql zabbix-agent

vim /etc/zabbix/zabbix_server.conf
vim /etc/zabbix/zabbix_agentd.conf

6. 방화벽 허용 (두 서버 모두)

클러스터로 동작할 두 서버간 통신을 허용해 준다.
ha 서비스랑 웹, 자빅스 서버, 에이전트에서 사용할 Port 까지 추가해주고 reload

1
2
3
4
5
6
7
8
9
10
firewall-cmd --permanent --add-service=high-availability
# success
firewall-cmd --permanent --add-service=http
# success
firewall-cmd --permanent --add-port=10051/tcp
# success
firewall-cmd --permanent --add-port=10050/tcp
# success
firewall-cmd --reload
# success

7. Hosts 파일 수정 (두 서버 모두)

클러스터 등록할 IP/Server 잡아주고

1
2
3
4
vim /etc/hosts 
# 1.1.1.1 host1
# 1.1.1.2 host1
# 1.1.1.3 vip

8. Pacemaker 설치 (두 서버 모두)

pacemaker, pcs 패키지 설치하기

1
2
3
4
yum install pacemaker pcs
passwd hacluster #암호설정해주기 pcs깔면 hacluster라는 유저가 생기는데 여기 password 변경해줘야함
systemctl start pcsd
systemctl enable pcsd

9. pcs 설정

cluster에 member로 동작할 두 서버인증하기
인증하는데 오류나면 대부분 둘간 통신문제로 방화벽을 제대로 열었나 확인해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 인증
pcs cluster auth host1 host2
#username: hacluster, password: 아까 설정한 password

# 셋업하는 작업
pcs cluster setup --name zabbix_cluster host1 host2

pcs cluster start --all
systemctl enable corosync
systemctl enable pacemaker

# Cluster, Node 상태 확인해보기
pcs status cluster
pcs status nodes

10. 리소스 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#필요없는 세팅은 설정 없애고
pcs property set stonith-enabled=false
pcs property set no-quorum-policy=ignore

# 리소스 설정
# ip=부분에 virtual ip 설정해주면 됨
pcs resource create cluster_vip ocf:heartbeat:IPaddr2 ip=1.1.1.3 cidr_netmask=24 op monitor interval=20s

# systemd 프로세스명으로 zabbix-server 설정해주기
pcs resource create zabbix_server systemd:zabbix-server op monitor interval=10s
pcs constraint colocation add zabbix_server cluster_vip INFINITY

# 리소스 순서 정하기
pcs constraint order cluster_vip then zabbix_server