WordPress 대행사를 위한 세 가지 개발 자동화 워크플로

게시 됨: 2019-09-13

@Cloudways 팔로우

나는 우리 에이전시의 자동화 워크플로를 반영하여 차분한 시간에 이 기사를 작성하고 있습니다. 에이전시 소유주이자 개발자로서 저는 시간을 절약하고 생산성을 높이기 위해 자동화를 만지작거리며 수많은 시간을 보냅니다.

개발 자동화 워크플로를 활용하는 것은 WordPress 에이전시의 생산성을 높이는 동시에 코드 품질을 보장하는 가장 좋은 방법 중 하나입니다.

우리 기관에서는 특히 코딩 프로세스에서 자동화를 활용합니다. 그것이 바로 이 기사에서 설명할 것입니다. 자동화 프로세스를 설정하는 정확한 단계를 안내해 드릴 수는 없지만 이러한 자동화 워크플로가 작동하는 방식과 고유한 워크플로를 설정하는 방법을 충분히 이해하고 있을 것입니다.

워드프레스 개발 워크플로

Jenkins로 자동화된 배포 워크플로 생성
개발자 자동화를 위한 WPGulp 설정
VS Code로 WP 코딩 표준 적용하기

우선 GitHub 기반의 자동화된 배포를 사용합니다. GitHub 커밋을 기반으로 라이브 또는 스테이징 서버에 파일을 푸시함으로써 SFTP 또는 SCP를 통한 파일 전송을 효과적으로 방지하고 수동 전송과 관련된 모든 함정을 피할 수 있습니다. 특히 동일한 프로젝트에서 여러 개발자 또는 에이전시와 함께 작업하는 경우 선호하는 버전 제어 시스템을 사용하여 자동화된 배포의 이점을 누릴 수 있습니다. 자동화된 배포를 위해 오픈 소스 소프트웨어 Jenkins를 사용합니다.

둘째, 테마 및 플러그인 개발 프로세스에서 자동화된 WPGulp 기반 워크플로를 사용합니다. 이 프로세스를 통해 코드의 형식이 올바르게 지정되고, 축소되고, 연결되고, 접두사가 되는 등 훨씬 더 많은 작업을 수행할 수 있습니다. 이 워크플로를 사용하여 WPGulp를 설정하고 첫 번째 플러그인을 만드는 과정을 안내해 드리겠습니다.

또한 최고의 WordPress 자동화 플러그인을 확인하십시오.

마지막으로 PHP 파일을 저장할 때 WordPress 코딩 표준을 자동으로 사용하도록 오픈 소스 편집기 VS Code를 설정하는 방법을 설명합니다. 적절한 코드 형식은 가독성을 보장하고 버그를 방지하는 데 도움이 됩니다.

Jenkins로 자동화된 배포 워크플로 생성

다음 시나리오를 생각해 보십시오.

다양한 도시(또는 국가)에 동일한 웹사이트에서 작업하는 여러 개발자가 있으며 각각 SFTP를 통해 서버에 코드를 배포합니다. 저장소에서 코드를 관리하더라도 SFTP를 통해 전송하면 경고 없이 코드 변경 사항을 쉽게 덮어쓸 수 있습니다.

자동화된 배포 워크플로는 코드 덮어쓰기로 인한 문제를 방지하는 좋은 방법입니다.

이제 자체 Jenkins 서버를 설정하고 Git PUSH 명령을 수신하면 서버에 코드를 자동으로 배포하도록 GitHub 리포지토리를 구성하는 방법을 보여 드리겠습니다.

이제 Cloudways에서 기본적으로 배포에 Github를 사용할 수 있지만 배포를 처리하는 Jenkins 서버가 있으면 기관에서 코드를 작성하고 배포할 때 훨씬 더 많은 유연성을 얻을 수 있습니다.

Jenkins의 일반적인 사용 사례는 다음과 같습니다.

phpDox를 사용하여 즉시 PHP 문서 생성
NodeJS, Grunt, Gulp 또는 Bower와 같은 도구를 워크플로에 통합
지속적 통합 및 지속적 전달 프로세스의 전반적인 처리

Jenkins 설정으로 시작

기관에서 Jenkins를 시작하려면 루트 셸 액세스 권한이 있는 서버에 설치해야 합니다. 서버에서 필요에 따라 스크립트를 실행하고 소프트웨어 패키지를 설치할 수 있어야 합니다.

주의 사항: Jenkins를 시작하고 실행하는 것은 5분 안에 완료되지 않지만 그만한 가치가 있습니다.

첫 번째 단계는 서버에 Jenkins를 설치하는 것입니다. Digital Ocean에는 Ubuntu 서버에 Jenkins를 설치하는 방법에 대한 좋은 기사가 있지만 요구 사항이 일치하는 다른 서버를 사용할 수 있습니다.

둘째, Jenkins용으로 프로젝트를 구성해야 합니다. 자동화된 배포에 대해 이야기할 때 현재 작업 중인 테마나 플러그인이 배포되기를 원할 것입니다. 기본적으로 전체 웹 사이트를 Git 리포지토리에 추가하고 Jenkins를 사용하여 배포하지 않습니다. 대부분의 경우 실제로 작업 중인 테마 또는 플러그인이 배포됩니다.

따라서 새 Jenkins 서버에서 처리할 작업 디렉터리와 GitHub 리포지토리를 구성해야 합니다. 이 문서의 범위를 벗어나는 방법이므로 이 프로세스에 대해 자세히 설명하지 않겠습니다. 대신에 필요한 사항에 대한 간략한 개요를 제공하고 쉽게 따라할 수 있는 WebDevStudios에 대한 이 환상적인 자습서를 알려 드리겠습니다.

Jenkins가 설정되어 실행 중인지 확인하고 싶을 것입니다.
필요에 따라 Git 리포지토리를 설정합니다(예: .gitignore를 적절하게 구성).
배포를 처리할 PHPLoy를 시스템에 설치합니다.
Jenkins에 대한 지침이 포함된 jenkinsfile을 설정합니다.
Jenkins 서버에 파이프라인을 추가하고 테스트를 실행합니다.

이 간단한 개요를 통해 Jenkins를 시작하는 데 필요한 모든 리소스를 얻을 수 있습니다. 매주 에이전시 시간을 절약할 수 있다는 말을 믿으십시오. 더 이상 코드 배포에 대해 걱정하지 않고 각 프로젝트의 배포를 쉽게 모니터링할 수 있습니다.

이 프로세스가 너무 많은 작업으로 들리면 행운을 빕니다. Cloudways 블로그에는 대체 배포 프로세스에 대한 광범위한 기사가 있습니다.

아무것도 놓치지 않도록 도와주는 빠른 목록

이 광범위한 목록은 웹사이트 게시 버튼을 누르기 전에 알아야 할 모든 것을 다룹니다.

감사 해요

다운로드 가능한 웹사이트 체크리스트가 받은 편지함으로 가는 중입니다.

개발자 자동화를 위한 WPGulp 설정

우리가 좋아하는 또 다른 강력한 워크플로는 테마 및 플러그인 개발을 위해 WPGulp 프레임워크를 사용하는 것입니다. WP 핵심 기고자 Ahmad Awais는 높은 코드 품질을 유지하면서 개발 속도를 높이는 데 도움이 되는 멋진 도구를 만들었습니다.

WPGulp를 사용하는 이유는 충분합니다.

개선된 개발 환경
최적화된 CSS 개발
JS 연결, uglification 및 축소
이미지 최적화
I18N 및 I10N용 .pot 파일 생성

WPGulp용 Github 리포지토리(위에 링크됨)의 readme.txt를 읽으면 내가 의미하는 바를 알 수 있습니다. 맞춤형 WordPress 플러그인을 개발할 때 WPGulp를 사용하는 방법의 예를 보여드리겠습니다.

먼저 WPPB 생성기 를 사용하여 기본 플러그인 상용구를 만듭니다. 동일한 플러그인 상용구를 반복해서 사용함으로써 우리가 개발하는 모든 플러그인이 친숙하게 보이고 모든 개발자가 원하는 기능을 쉽게 찾을 수 있도록 합니다.

다음으로 플러그인 폴더에 WPGulp를 추가합니다. 플러그인 폴더에서 " npx wpgulp " 셸 명령을 실행하여 이를 수행합니다. 필수 구성 요소인 NodeJS 및 NPM이 설치되어 있는지 확인합니다.

플러그인 폴더에 WPGulp를 설치하면 다음 명령줄 출력이 표시됩니다.

WPGulp

셋째, 프로젝트에 필요한 대로 wpgulp.config.js를 구성합니다. 이 구성 파일은 프로젝트 URL 및 자산 경로(CSS, JS, 이미지)를 포함하여 WPGulp에 필요한 모든 설정을 처리합니다. 고맙게도 Ahmad는 구성 파일에 주석을 달아 모든 설정을 명확하게 하는 환상적인 작업을 수행했습니다.

마지막으로 WPGulp를 실행하고 개발을 시작합니다. " npm start "를 실행하기만 하면 WPGulp의 모든 기능을 활용하면서 개발을 시작할 수 있습니다.

WPGulp를 위에서 설명한 Jenkins 워크플로와 통합하는 데 관심이 있는 경우 CSS 파일, JS 스크립트 및 이미지의 최적화된 버전만 버전 관리되도록 .gitignore 파일을 수정하기만 하면 됩니다(이 파일의 경로는 wpgulp.config.js 파일에 지정됨).

VS Code로 WP 코딩 표준 적용하기

마지막으로 모든 개발자가 코드 형식과 특별한 관계가 있는 주제에 대해 이야기해 보겠습니다. 다른 사람이 작성한 코드를 읽은 적이 있다면 잘못 들여쓰기된 if/else 절, 누락된 공백 또는 Yoda 스타일을 따르지 않는 조건 검사에 화가 났을 것입니다.

우리 기관에서는 코드 작성을 위해 오픈 소스 도구 VS Code를 사용합니다. 우리는 이전에 PHPStorm을 사용했지만 VS Code가 훨씬 더 유연하고 사용하기 쉽다는 것을 발견했습니다.

워드프레스는 코딩 표준과 모범 사례를 구현했으며 그럴만한 이유가 있습니다. 생태계에 수십만 명의 개발자가 있으므로 특정 표준을 따라 최소한 어느 정도 유사하게 코드를 구조화하는 것이 필수적입니다.

그러나 인간으로서 우리는 기억력이 제한되어 있습니다. 그리고 코딩 표준을 기억하는 것은 확실히 그 능력을 가장 잘 활용하는 것은 아닙니다(자동화할 수 없는 것을 위해 남겨둬야 한다고 생각합니다). 코드를 포맷하는 동안 메모리 공간을 확보하고 시간을 절약할 수 있도록 VS Code가 WordPress 코딩 표준에 따라 코드를 자동 포맷하도록 할 수 있습니다.

설정은 운영 체제에 따라 다르지만 매우 간단합니다. Mac의 경우 Jason의 훌륭한 튜토리얼을 따를 수 있습니다. Windows 사용자의 경우 여기에 좋은 설명이 있습니다. Linux 사용자를 위한 Tom McFarlin의 이 가이드가 있습니다.

기본적으로 WP 코딩 표준을 VS Code에 구현하는 것은 두 가지 사항에 의존합니다.

PHP 코드 스니퍼
WP 코딩 표준 규칙 세트(종종 "wpcs"라고도 함)

PHP Codesniffer는 PHP 코드를 수정하는 도구입니다(이미 추측했을 수 있음). 이 도구는 WP 코딩 표준에 대한 규칙 집합과 연결하고 VS Code에 확장으로 추가할 수 있습니다.

그런 다음 VS Code에 PHP 코드에 적용할 규칙 집합과 파일을 입력하거나 저장할 때 적용할지 여부를 알려 주기만 하면 됩니다. 우리는 PHP Codesniffer를 저장 시 실행하는 것을 선호합니다. 코드를 입력하는 동안 실행하면 매우 압도적일 수 있기 때문입니다. 아래 스크린샷은 VS Code 구성에서 사용하는 PHP 설정의 예를 보여줍니다.

VS 코드

일상적인 대행사 생활에서 이미 이러한 워크플로를 사용하고 있습니까? 아니면 다른 루틴이 구현되어 있습니까? 아래 의견에 알려주십시오! 설명된 프로세스 구현에 대해 질문이 있는 경우 주저하지 말고 댓글을 남겨주세요. 기꺼이 추가 지원을 제공하겠습니다.