궁극의 워드프레스 개발 환경

지난 몇 년 동안 WPMU DEV 블로그에서 내가 사용하는 개발 환경에 대한 간단한 정보를 공유하는 많은 자습서를 작성했습니다.

그래서 오늘은 전체 환경을 공유할 때라고 생각했습니다. 함께 구성하여 대규모 개발에 사용할 수 있는 환경입니다.

소매를 걷어붙이고 손이 더러워질 준비를 하세요! 아래는 내가 설정한 개발 환경의 종류와 당신이 할 수 있는 방법에 대한 전체 연습이기 때문입니다.

참고: 이 튜토리얼은 초보자를 위한 것이 아닙니다. WordPress 개발이 처음이라면 불필요한 복잡성을 유발할 수 있는 정교한 환경이 필요하지 않습니다. 또한 이 기사는 특별히 WordPress를 위한 것입니다. 아이디어와 목표는 WordPress가 아닌 프로젝트에서 동일할 수 있지만 사용되는 접근 방식과 도구는 다를 수 있습니다.

목차

1. 1. 좋은 개발 환경을 만드는 요인
   2. 진화하는 환경
   3. 로컬 서버
   4. 명령줄 도구
   5. 배시 스크립트
   6. 워드프레스 플러그인
   7. 기타 도구

좋은 개발 환경은 무엇입니까?

내 눈에 좋은 개발 환경에는 다음 세 가지 속성이 있습니다.

1. 높은 휴대성
2. 고도로 구성 가능
3. 고도로 자동화

휴대성

이식성은 내가 개발 중인 테마/플러그인을 공유하는 것 외에도 개발 환경도 공유할 수 있기를 원하기 때문에 중요한 요소입니다.

다른 개발자가 GitHub에서 소스를 확인하고 Gulp 또는 Grunt와 같은 도구 사용을 포함하여 즉시 시작할 수 있기를 바랍니다. 이를 통해 프로젝트에 쉽게 참여할 수 있으며 더 나은 협업을 지원하면 성공할 가능성이 더 높아집니다.

휴대성은 다른 컴퓨터에서 작업해야 하거나 동료에게 지금까지 한 작업을 보여주고 싶을 때 도움이 될 수 있습니다. 몇 분 안에 모든 것을 설정할 수 있는 능력은 내가 셀 수 있는 것보다 더 많은 시간을 도왔습니다.

구성 가능성

환경을 구성하는 기능이 가장 중요합니다. 서버 측에서 WordPress는 매우 관대하지만 빌드 설정, Grunt 작업 및 기타 옵션을 미세 조정할 수 있다는 것은 큰 이점입니다.

구성 옵션과 이식성을 함께 사용하면 다양한 상황에서 작업을 쉽게 테스트할 수 있습니다. 확인을 위해 PHP 버전이나 HHVM을 전환하는 것은 어떻습니까? 이전 버전의 WordPress 및 인기 플러그인과의 호환성을 확인할 수 있습니까? 이것들은 당신이 테스트할 수 있어야 하는 것들입니다.

오토메이션

자동화는 WordPress 작업을 위한 개발 환경을 만드는 주요 원동력 중 하나입니다. 내 스크립트, 스타일시트, 작업 저장, 배포 등에 대해 걱정하고 싶지 않습니다.

명령줄 도구는 하나의 명령으로 WordPress를 설정하는 것부터 내 제품을 패키징하는 것까지 모든 작업을 수행할 수 있는 자동화 제품군의 중추를 형성합니다.

진행중인 작업

세부 사항에 대해 알아보기 전에 개발 환경을 사용하는 사람들이 어떻게 개발 환경을 꿈꾸는지에 대한 접선으로 넘어가겠다고 생각했습니다.

당신이 명령줄, 빌드 도구, 버전 제어 시스템 등의 세계를 처음 접하는 사람이라면 내가 모든 것을 알고 모든 작업에 완벽한 도구를 사용 하는 전문가처럼 보일 수 있습니다.

이것은 진실과 꽤 거리가 멀다! 나는 WordPress의 모든 것에 정통하지만 그 외의 모든 것은 내가 추가했거나 내 삶을 더 빠르게 만드는 방법을 배우고 싶었거나 필요로 하는 일부 추가 사항일 뿐입니다. 나는 다른 사람들을 복사하고, 스스로 비트를 파악하고, 필요에 따라 수정했습니다(때로는 비참하게 실패합니다!).

내 개발 환경(및 기타 여러 환경)은 다음이 혼합되어 있습니다.

• 잘 연마된 개인 지식
• 다른 사람들의 훌륭한 팁
• 작동하는 것을 발견한 임의의 것
• 훨씬 더 잘할 수 있는 단계이지만 알아낼 수 없었습니다.

즉, 완벽하지는 않지만 작업을 완료합니다. 개선의 여지가 많고 다른 도구를 사용할 수 있는 곳이 많으며 이 도구를 더 좋아할 수 있습니다. 더 유용한 도구나 워크플로를 알고 있다면 자유롭게 사용하고 댓글로 알려주세요!

로컬 서버

WordPress는 서버 측 코딩 언어인 PHP에서 실행되므로 WordPress를 실행하려면 서버가 필요합니다. 가장 인기 있는 옵션은 다음과 같습니다.

• 방랑자
• 왤케
• XAMPP
• 맘프

저는 XAMPP를 몇 년 전에 시작했습니다. 그런 다음 Mac 사용자가 되었을 때 MAMP로 옮겼다가 결국 약 2년 전에 Vagrant로 전환했습니다. 웹과 사용되는 도구는 항상 발전하고 있으며 이제는 Vagrant와 MAMP도 사용하는 경향이 있습니다. 이유는 아래에서 설명하겠습니다.

AMP

MAMP, XAMPP 및 WAMP의 "AMP"는 Apache, MySQL 및 PHP를 나타냅니다. 이러한 도구는 모두 서버에서 사용하는 프로세스를 관리하는 데 도움이 되는 서비스와 GUI를 설치합니다. 앱을 다운로드하여 설치하고 "켜기" 버튼을 누르면 모든 것이 예상대로 작동합니다.

장점:
빠르고 쉽고 직관적이며 모든 시스템에서 항상 작동합니다. PHP 설정을 조정하고, Nginx로 전환하고, Memcached, Postfix를 구성하고, 가상 서버를 설정하는 등의 작업에 사용할 수 있는 훌륭한 사용자 인터페이스가 있습니다.

단점:
조정할 수 있는 항목은 많지만 제어는 제한적입니다. 운영 체제를 변경하거나 전체 SSH 액세스가 허용하는 다른 변경을 수행할 수 없습니다.

모든 AMP는 같은 이유로 이식성을 잃습니다. 그들은 누구나 설치할 수 있을 만큼 인기가 있지만 Vagrant 구성과 같이 독립적이지 않고 최소입니다.

방랑자

방랑자는 조금 다릅니다. 미리 포장하고 환경을 제공하는 대신 완전한 제어를 제공합니다. VirtualBox(또는 다른 VM 앱)를 기반으로 하며 본질적으로 운영 체제인 "박스"를 사용할 수 있습니다. 그런 다음 스크립트를 사용하여 직접 구성할 수 있습니다.

장점:
구성은 2개의 매우 작은 파일에 포함되어 있습니다. 명령줄에 익숙하다면 환경을 설정하는 것이 vagrant up 처럼 간단할 수 있습니다. 시스템은 매우 이식성이 좋습니다.

마음껏 구성할 수 있습니다. 다양한 캐싱 방법에서 자신의 PHP 컴파일에 이르기까지 모든 운영 체제, 모든 소프트웨어. 실제 호스트의 환경을 정확히 복제하여 사이트가 로컬 시스템에서 정확히 동일한 방식으로 실행되도록 할 수 있습니다.

단점:
명령줄 사용 속도가 빠르지 않다면 Vagrant는 가파른 학습 곡선을 가질 수 있습니다. 모든 것이 순조롭게 진행되면 명령 하나만 내리면 됩니다. 어떤 이유에서든 작동하지 않으면 깊은 물에 빠지게 됩니다.

가상 호스트를 생성하고 다른 일반적인 작업을 수행하기 위한 도구가 존재하지만 적어도 나에게는 MAMP의 UI가 더 편리합니다. 설치할 WP가 있는 빠른 새 가상 호스트가 필요한 경우 Vagrant + WP-CLI를 사용하는 것보다 훨씬 빠르게 MAMP + WP-CLI를 사용하여 수행할 수 있습니다.

어느 것을 사용할 것인가?

WordPress로만 작업하는 경우 MAMP와 같은 도구는 충분한 유연성과 성능을 제공합니다. 물론 비 WordPress 사이트에서 작업할 수 있으므로 WP 영역 밖에 있는 이상한 작업이 있는 경우 MAMP가 여전히 잘 작동합니다.

WP가 아닌 프로젝트에서 대규모 팀과 함께 작업하는 경우 Vagrant를 잡고 시도해 볼 것을 권장합니다. 서버가 내부적으로 작동하는 방식과 환경을 정확히 공유할 수 있는 방법에 대해 많은 것을 가르쳐 줄 것입니다.

내 취향은 둘 다 사용하는 것입니다. 내가 필요하거나 시간이 있을 때 Vagrant를 사용하여 마지막 세부 사항까지 환경을 구성할 수 있습니다. 간단한 것이 필요하거나 WordPress 프로젝트에 필요한 경우 MAMP가 선호되는 옵션입니다.

여기 WPMU DEV의 다른 작가 Rachel McCollin은 MAMP 설정 방법에 대한 훌륭한 가이드를 작성했으며 저는 이러한 환경을 설정하는 데 사용할 수 있는 Vagrant를 사용한 WordPress 개발 가이드를 기고했습니다.

명령줄 도구

나는 많은 CLI 도구를 사용하지 않지만 사용하는 도구는 내 워크플로의 큰 부분을 차지합니다. 가장 눈에 띄는 것들은 WP-CLI, Gulp, ngrok 및 Ultrahook입니다. 조금 더 자세히 살펴보겠습니다.

WP-CLI

WP-CLI는 WordPress에 대한 모든 것을 자동화할 수 있는 매우 강력한 명령줄 도구입니다. 나는 이미 WP-CLI를 사용한 고급 WordPress 개발에 대한 자습서를 작성했으므로 수행할 수 있는 몇 가지 마법을 보여 드리겠습니다.

새 사이트 설정

wp core download 및 wp core config 와 같은 몇 가지 간단한 명령으로 WordPress를 다운로드, 구성 및 설치할 수 있습니다. 문서가 풍부하고 따라하기 쉽습니다.

나는 WP-CLI를 bash 스크립트와 함께 사용하여 새 사이트 생성을 위한 작은 템플릿을 만듭니다. 명령을 사용하여 기본 플러그인 및 테마를 제거하고 정기적으로 사용하는 플러그인을 다운로드 및 활성화할 수 있습니다.

검색 및 바꾸기

데이터베이스 검색 및 교체가 필요할 때도 있지만 고통스러울 수 있습니다. https로 변경, 새 도메인으로 이동, URL 및 기타 이름을 변경하면 모두 약간의 대규모 변경을 가져올 수 있습니다.

데이터베이스에 직렬화된 배열이 많이 포함되어 있기 때문에 SQL 검색 및 교체만 할 수는 없습니다(이전 값과 새 값의 길이가 같은 경우 제외). wp search-replace oldval newvalue 는 배열을 직렬화 해제한 다음 다시 직렬화하여 모든 것을 해결합니다.

원격 관리

WP-CLI에는 SSH를 통해 사이트를 관리하는 데 도움이 되는 SSH가 내장되어 있습니다. 이를 통해 단일 명령으로 수백 개의 사이트를 관리할 수 있습니다(예: 여러 사이트에 걸쳐 테마 또는 플러그인 업데이트).

훨씬 더 많이…

WP-CLI로 할 수 있는 일은 거의 끝이 없습니다. 많은 하위 명령이 포함된 약 35개의 기본 제공 명령 범주에서 타사 패키지에 이르기까지 모든 작업을 쉽게 자동화할 수 있습니다.

꿀꺽

Gulp는 제 자동화의 핵심 도구입니다. 스크립트, 스타일, 이미지, 모바일 테스트 및 브라우저 새로 고침 메커니즘을 관리하는 데 사용합니다. 나는 WordPress와 함께 Gulp 사용에 대한 광범위한 기사를 썼습니다. 자세한 지침을 보려면 여기를 참조하십시오.

나는 다른 인기 있는 선택인 Grunt보다 Gulp를 선호합니다. 그 이유는 구문의 차이 때문입니다. 내 Grunt For WordPress Development 기사를 보고 결정하세요!

Gulp는 기능을 위해 Node 및 Node 패키지를 사용하므로 커뮤니티 기반 확장으로 인해 이식성이 매우 높고 강력합니다. Gulp를 사용한 작업 프로세스에는 일반적으로 다음이 포함됩니다.

1. 내 요구 사항에 맞는 확장 프로그램 찾기
2. npm으로 노드 패키지 설치
3. Gulpfile에 패키지 필요
4. 짧은 자동화 작업 작성

생각이 전혀 필요하지 않은 유일한 부분은 4번입니다. 그럼에도 불구하고 대부분의 확장에는 약간만 수정하면 되는 복사-붙여넣기 예제가 있습니다.

내가 가장 많이 사용하는 확장 프로그램은 다음과 같습니다.

• Sass를 CSS로 컴파일하기 위한 gulp-sass
• CSS 축소를 위한 gulp-clean-css
• 공급업체 접두사를 자동으로 추가하기 위한 gulp-autoprefixer
• JS 파일 연결을 위한 gulp-include
• JS 파일 축소를 위한 gulp-uglify
• 이미지 최적화를 위한 gulp-imagemin
• 모바일 테스트에 도움이 되는 개발 서버 생성을 위한 Browsersync
• 축소된 파일에 대한 소스 맵을 만들기 위한 gulp-sourcemaps

응그록

ngrok은 인터넷을 통해 로컬 작업을 공유하는 데 사용하는 작은 서비스이자 명령줄 도구입니다. ngrok은 http://7bbc49aa.ngrok.io 와 같은 특수 URL에 애플리케이션을 노출하여 로컬 환경에 대한 보안 터널을 생성합니다.

울트라훅

Ultrahook은 ngrok의 역순입니다. ngrok이 로컬 호스트를 웹으로 라우팅하는 경우 ultrahook은 웹을 로컬 호스트로 라우팅합니다. 이것은 예를 들어 Stripe와 같은 타사 API를 테스트하는 데 매우 유용합니다.

테스트 웹훅 http://stripe.danielpataki.ultrahook.com 을 보내도록 Stripe를 설정할 수 있습니다. 이 웹훅은 로컬 서버로 안전하게 전달됩니다.

워드프레스 플러그인

우리 대부분에게 WordPress 개발은 플러그인 및 테마 개발과 동의어입니다. 리포지토리는 개발자가 더 나은 작업을 더 빨리 만들 수 있도록 도와주는 플러그인으로 가득합니다. 다음은 내가 정기적으로 사용하거나 사용하는 몇 가지입니다.

테마 체크

테마 제작자를 위한 필수 플러그인입니다. 테마 확인은 테마를 분석하고 WordPress 표준을 충족하지 않는 이유를 뱉어냅니다. 더 이상 사용되지 않는 코드, 관련 없는 파일, 잘못된 관행, 일반적인 오류 및 기타 수많은 잠재적 문제를 살펴봅니다.

고급 사용자 정의 필드

Advanced Custom Fields 또는 ACF는 제가 가장 좋아하는 플러그인입니다. 이를 통해 개발자는 직관적이고 빠른 UI에서 테마 및 플러그인에 대한 아름다운 사용자 정의 필드를 만들 수 있습니다. 완료되면 ACF를 완전히 숨기고 생성된 PHP 코드를 작업에 붙여넣어 필드를 그대로 유지할 수 있습니다. 잘 실행되고 매우 유용한 플러그인입니다!

쿼리 모니터

쿼리 모니터를 사용하면 데이터베이스 액세스 관점에서 WordPress 환경에서 무슨 일이 일어나고 있는지 정확히 볼 수 있습니다. 잠재적으로 느리거나 중복되는 쿼리가 실제 제품으로 나오기 전에 포착하고 기존 쿼리를 최적화하여 코드를 훨씬 더 빠르게 만들 수 있습니다.

배시 스크립트

Bash 스크립트에는 차례로 실행되고 작업을 추가로 자동화하는 데 사용할 수 있는 많은 명령이 포함되어 있습니다. 예를 들어 WP-CLI로 WordPress를 설치하는 것은 이미 쉽습니다. 필요한 것은 다음과 같습니다.

이러한 명령은 차례로 실행해야 하므로 약간의 시간이 걸립니다. 이것을 파일에 배치하여 install.sh 라고 합시다. WP 설치를 만들기 위한 템플릿을 만들 수 있습니다.

설치를 생성할 폴더에 파일을 넣고 bash install.sh 를 입력합니다. 모든 명령이 실행되고 몇 초 안에 사이트가 가동되고 실행될 것입니다.

매개변수를 추가하여 더욱 유용하게 만들 수 있습니다. bash install.sh newsite 와 같은 명령을 실행하면 매개변수를 사용하여 데이터베이스 이름, URL 및 사이트 제목을 채울 수 있습니다.

Bash 파일은 또한 최종 빌드(관련 없는 폴더 및 파일 제거, 디렉토리 이동 등) 및 기타 유사한 작업을 생성하는 데 유용할 수 있습니다. 워크플로에서 많은 유연성을 제공하는 Gulp 작업에서도 실행할 수 있습니다.

기타 도구

브라우저 확장은 사이트를 테스트할 때 큰 도움이 됩니다. 다음은 내 워크플로에서 사용하는 몇 가지입니다.

우편 집배원

Postman은 API를 빌드, 테스트 및 문서화하기 위한 크롬 확장입니다. API 작동 방식을 확인하기 위해 빠른 요청을 해야 할 때마다 Postman이 다른 어떤 도구보다 훨씬 빠릅니다.

요청을 저장하고 관리하는 기능은 특히 유용합니다. API 테스트는 자주 하지 않는 일이지만 익숙해지면 하루의 대부분을 차지합니다. Postman과 같은 것을 사용하면 삶이 훨씬 쉬워집니다.

편집이 쿠키

EditThisCookie는 내가 많이 사용하지 않는 Chrome 확장 프로그램의 또 다른 예입니다. 하지만 사용하면 몇 시간을 절약할 수 있습니다. 단일 사이트의 쿠키를 확인/삭제/편집할 수 있습니다. 그게 다야, 하지만 맙소사, 얼마나 편리한지!

페이지 로드 시간

페이지 로드 시간은 사용자가 생각하는 대로 페이지 로드를 분석합니다. DNS/요청 및 응답 시간과 같은 중요한 세부 정보로 이동할 수 있지만 도구 모음에 전체 로드 시간이 바로 표시된다는 점이 마음에 듭니다. 빠른 비교를 위해 매우 편리합니다.

JSON 포맷터

기타 도구 카테고리에 대한 나의 최종 브라우저 확장 항목은 JSON 포맷터로, 응답이 단순히 JSON 문자열인 경우를 감지하고 텍스트 블록을 빼내는 대신 모든 것을 적절하고 적절하게 형식화합니다.

프란츠

이것은 실제로 개발과 관련이 없습니다! Franz는 여러 웹 서비스를 한 지붕 아래에 통합할 수 있는 도구입니다. 내 메신저, Slack, Skype, Inbox by Gmail, Trello, Google 캘린더 및 Todoist 앱은 모두 기본 앱 대신 하나의 창에서 실행됩니다.

일반적인 환경에서 실행한 것처럼 보이지만 모든 아이콘이 필요하지 않으며 아이콘 간에 더 쉽게 전환할 수 있습니다. 내가 Franz를 언급한 이유는 더 집중하는 동시에 더 나은 의사 소통을 하는 데 도움이 되었기 때문입니다.

VVV

Varying Vagrant Vagrant 또는 VVV는 간단히 WordPress 및 WordPress 자체 개발을 위한 오픈 소스 Vagrant 구성입니다. 여기에는 WordPress 개발 빌드를 포함하여 시작하는 데 필요한 모든 도구가 포함되어 있습니다.

훨씬 더 많이!

언급하지 않은 도구가 너무 많습니다. 대부분은 단순히 사용하지 않기 때문입니다. 그것들은 훌륭한 도구이지만 나는 그것들을 다루지 못했거나 필요하지 않거나 내 작업 흐름에 맞지 않습니다. 다음은 살펴보아야 할 몇 가지 위대함의 짧은 목록입니다.

• WordPress 테마 부서에서 만든 훌륭한 테마 상용구에 대한 밑줄
• 서버, 애플리케이션 관리 및 스타터 테마를 포함한 전체 WordPress 스택에 대한 루트입니다. 내 취향에는 이것이 너무 정교하지만 당신의 골목에있을 수 있습니다.
• 표준화된 객체 지향 플러그인 개발을 위한 WordPress 플러그인 상용구.

나만의 개발 환경 만들기

결론적으로, 이것들은 내가 사용하는 도구입니다. 그것들이 반드시 당신에게 가장 적합하지 않을 수도 있고 모든 상황에 가장 적합하지 않을 수도 있습니다. 이 설정은 필요에 따라 충분히 유연하므로 시간을 내어 옵션을 조사하고 자신에게 맞는 워크플로를 만드십시오.

행운을 빕니다!

• 개발