Vue.js로 헤드리스 WordPress 사이트를 만드는 방법 배우기

WordPress는 개발자와 비개발자가 멋진 웹사이트를 빠르게 구축하고 만들 수 있는 콘텐츠 관리 시스템이었습니다.

콘텐츠 관리 백엔드가 프런트엔드와 분리되어 있는 마이크로서비스 아키텍처를 사용하면 양쪽 "끝"을 최대한 제어할 수 있습니다. 이 분리 문제는 헤드리스 워드프레스 솔루션을 비롯한 헤드리스 콘텐츠 관리 시스템이 해결하려고 하는 문제입니다.

헤드리스 접근 방식을 통해 기업은 콘텐츠 관리 백엔드를 보다 세부적으로 제어할 수 있습니다. 또한 React, Vue, Angular 등 원하는 프론트엔드를 자유롭게 사용할 수 있습니다.

이 가이드는 헤드리스 워드프레스와 그것이 무엇인지, 언제, 왜 사용을 고려해야 하는지에 대해 자세히 알아볼 것입니다. 마지막으로 헤드리스 WordPress 환경 생성, Vue.js로 프론트엔드 구축, Kinsta를 사용하여 헤드리스 WordPress 배포를 살펴보겠습니다.

헤드리스 워드프레스란?

워드프레스는 백엔드와 프론트엔드 부분이 함께 단단히 감겨 있는 모놀리식 애플리케이션입니다. 백엔드는 모양 구성 변경을 포함하여 콘텐츠를 생성, 편집, 추가 및 삭제할 수 있는 관리가 시작되는 곳입니다. 대조적으로 프론트엔드는 사용자에게 콘텐츠를 표시하는 역할을 합니다.

헤드리스 워드프레스는 분리된 워드프레스를 설명하는 데 사용되는 용어입니다. 백엔드(관리) 부분은 워드프레스 CMS의 프론트엔드 부분과 별개입니다. 선택한 프론트엔드 프레임워크를 사용하여 프론트엔드를 독립 실행형 애플리케이션으로 개발하고 관리할 수 있습니다.

헤드리스 워드프레스의 장단점

다음으로 개념을 더 잘 이해할 수 있도록 헤드리스 워드프레스의 장단점을 살펴보겠습니다.

장점

먼저 전문가를 탐색하는 것으로 시작하겠습니다.

초고속 성능

초고속 애플리케이션의 시대에 웹사이트는 방문자를 잃지 않고 로드하는 데 몇 초 이상 걸리지 않아야 합니다. 프런트엔드는 WordPress와 분리되어 있고 최신 프런트엔드 도구를 사용하여 고성능 및 확장성을 염두에 두고 개발할 수 있으므로 헤드리스 WordPress 접근 방식을 사용하면 웹사이트의 전체 사용자 경험에 큰 이점이 있습니다.

세분화된 제어

헤드리스 아키텍처를 선택하면 디자인 레이아웃, 콘텐츠 프레젠테이션 및 사용자가 애플리케이션의 프런트엔드와 상호 작용하는 방식을 더 잘 제어할 수 있습니다. 또한 백엔드 콘텐츠를 중앙 위치에서 보호하고 액세스할 수 있습니다.

확장성 향상

주로 개발자가 아닌 경우 WordPress를 구동하는 모든 구성 요소와 코드를 완전히 제어할 수 없기 때문에 WordPress 확장은 때때로 복잡할 수 있습니다. 하지만 워드프레스의 디커플링으로 각 부분을 따로따로 확장하는 것이 힘들지 않고 어느 부분이 확장이 필요한지 쉽게 감지할 수 있습니다.

보안 강화

분리된 WordPress는 해커 및 DDoS 공격에 대한 높은 보안 이점이 있기 때문에 헤드리스 WordPress의 보안 이점을 충분히 강조할 수 없습니다. 헤드리스 WordPress 접근 방식은 민감한 백엔드 데이터가 사용자 대면 웹사이트인 프론트엔드와 분리되어 있기 때문에 해커가 액세스하기 어렵게 만듭니다.

경량 디자인

프론트엔드 디자인의 구조와 레이아웃을 더 잘 제어할 수 있습니다. 또한 더 많은 자유와 맞춤형 디자인으로 프론트엔드에서 작업할 수 있습니다. REST API 호출 덕분에 최신 웹 도구를 활용하고 프런트엔드에 배포할 수 있습니다.

다중 채널 콘텐츠 퍼블리싱

헤드리스 WordPress는 API 기반 시스템을 사용하여 콘텐츠를 프런트엔드에 전달하므로 데스크톱, 웹사이트, 모바일 앱, 터치 스크린 키오스크를 비롯한 모든 플랫폼에서 콘텐츠를 어디서나 표시할 수 있습니다. 또한 증강 현실, 가상 현실 및 사물 인터넷 장치를 최대한 활용하여 API 기반 시스템에서 제공되는 콘텐츠를 표시하고 표시할 수 있습니다.

단점

계속 진행하면서 헤드리스의 단점을 더 깊이 탐구할 것이지만 주요 단점은 다음과 같습니다.

1. 백엔드와 프론트엔드를 분리하면 다른 웹 사이트 인스턴스를 관리할 때 추가 로드가 발생합니다.
2. 팀의 추가 구성원과 다른 인스턴스를 실행하기 위한 추가 자본이 필요하기 때문에 구현하는 데 비용이 많이 들 수 있습니다.
3. 콘텐츠를 다양한 플랫폼에서 사용할 수 있도록 하면 콘텐츠가 모든 플랫폼에서 일관되게 표시되지 않는 경우 사용자에게 일관되지 않은 경험이 발생할 수 있습니다.

헤드리스 워드프레스가 최선의 선택이 아닐 때

헤드리스 워드프레스는 엄청난 이점이 있는 놀라운 혁신이기 때문에 함께 사용할지 여부를 결정할 때 염두에 두어야 할 몇 가지 사항이 있습니다.

1. 헤드리스 워드프레스는 유지 관리 비용이 매우 비쌉니다. 인프라에서 여러 개발자에 이르기까지 한 웹 사이트의 두 가지 다른 인스턴스를 유지 관리합니다.
2. 헤드리스 워드프레스는 워드프레스의 모든 기능을 지원하지 않습니다. 예를 들어, WYSIWYG 편집기 및 실시간 미리보기와 같은 훌륭한 WordPress 기능은 별도의 프론트엔드를 사용할 때 작동하지 않습니다.
3. 헤드리스 WordPress를 설정하는 것은 더 비쌉니다. 따라서 항상 증가된 비용을 염두에 두십시오.

헤드리스 워드프레스는 누가 사용해야 하나요?

다음은 헤드리스 WordPress가 필요할 수 있는 가장 적합한 경우입니다.

1. 웹 사이트의 보안이 회사에서 가장 중요하고 가장 중요한 관심사인 경우 헤드리스 WordPress를 사용해야 합니다.
2. 다음으로, 웹 사이트에 정기적인 업그레이드 및 업데이트가 필요하지 않은 경우 헤드리스 설정을 사용해야 한다는 좋은 신호입니다.
3. 다음으로, WordPress 테마가 쉽게 할 수 없는 맞춤형 디자인을 갖고 싶다면 웹사이트의 프론트엔드를 독특한 디자인으로 꾸밀 수 있습니다. 그런 다음 헤드리스 WordPress가 다음 옵션입니다.
4. 마지막으로 수명이 짧은 웹 사이트나 프레젠테이션 및 자습서용 데모 사이트를 구축하는 경우 헤드리스 접근 방식을 시도해 볼 수 있습니다.

헤드리스 워드프레스 사용을 피해야 하는 사람

다음은 헤드리스 WordPress를 사용하는 것이 좋은 옵션이 아닌 몇 가지 경우입니다.

1. 웹사이트가 애플리케이션의 프런트엔드를 제어하고 가장 잘 작동하는 특정 플러그인 및 기능에만 의존하는 경우 플러그인이 데이터를 사용하는 API 기반 옵션을 제공하지 않는 한 WordPress를 사용해야 합니다.
2. 웹사이트 코딩에 관심이 없거나 웹사이트에 매일 유지 관리가 필요하고 예산이 부족하여 일상적인 유지 관리를 위해 전문가를 고용하지 않는다고 가정해 보겠습니다. 이 경우 WordPress가 적합한 옵션입니다.
3. 노련한 개발자가 아니고 웹사이트를 혼자 만들고 관리하려는 경우 WordPress를 사용해야 합니다.

WordPress를 헤드리스로 만드는 방법(앱 빌드)

이 섹션에서는 백엔드용 헤드리스 WordPress와 사용자 대면 프론트엔드용 Vue 3을 사용하여 뉴스 블로그를 구축하고 개발하는 방법을 살펴봅니다.

Devkinsta로 헤드리스 워드프레스 설정하기

우리는 인기 있는 WordPress 로컬 개발 환경인 DevKinsta를 사용하여 헤드리스 WordPress를 개발하여 로컬 시스템에서 편안하게 WordPress 사이트를 설계, 개발 및 배포할 것입니다.

DevKinsta는 영원히 무료이며 WordPress를 개발하고 구축할 때 큰 이점과 편안함을 제공합니다.

공식 웹사이트에서 DevKinsta를 다운로드 및 설치하고 설명서의 지침에 따라 시작할 수 있습니다.

DevKinsta가 이미 설치되어 있으므로 이를 열고 아래 단계에 따라 첫 번째 헤드리스 WordPress를 설정합니다.

DevKinsta 대시보드에서 Nginx, MySQL 및 사용 가능한 모든 WordPress 버전을 사용하여 새 WordPress 사이트를 만듭니다. 또한 기존 WordPress 인스턴스를 가져오거나 대시보드에서 사용자 지정 WordPress 인스턴스를 생성할 수 있습니다.

그런 다음 새로 생성된 WordPress 인스턴스에 이름, 관리자 사용자 이름 및 암호를 지정한 다음 생성 을 클릭하고 세부 정보를 복사하고 DevKinsta가 로컬 컴퓨터에 새 WordPress 인스턴스를 생성합니다.

그런 다음 Open Site 를 클릭하여 기본 브라우저에서 새로 생성된 WordPress 인스턴스를 엽니다.

마지막으로 http://headless-wordpress-news-blog.local/wp-admin 링크에 액세스하고 새 인스턴스를 생성할 때 입력한 관리자 로그인 자격 증명을 입력하여 관리자 대시보드에 로그인할 수 있습니다.

헤드리스 WordPress를 URL http://headless-wordpress-news-blog.local 로 로컬로 설정했으며 프런트엔드는 http://news-blog.local 에서 로컬로 호스팅되며 전체에서 사용할 것입니다. 튜토리얼.

헤드리스 WordPress 구성

다음으로 WordPress 대시보드에 성공적으로 로그인한 후 원하는 플러그인과 구성을 설치할 수 있습니다.

이 튜토리얼에서는 테마를 완전히 비활성화하고 Simple Website Redirect 플러그인을 설치하고 설정하여 WordPress REST API 기반 엔드포인트를 통해서만 콘텐츠에 액세스합니다.

플러그인 > 새로 추가 로 이동하여 Simple Website Redirect를 검색하고 설치 및 활성화합니다.

그런 다음 플러그인 설정 을 클릭하고 프런트엔드 기반 URL(예: http://news-blog.local )을 입력하고 고급 설정 옵션 을 클릭하고 다음 경로를 추가합니다 — /wp-admin , /wp-login.php , 및 /wp-json — 제외 경로 섹션.

마지막으로 리디렉션 상태 드롭다운에서 활성화 를 선택하여 플러그인을 활성화합니다.

…그리고 그게 다야!

또한 기본적으로 http://headless-wordpress-news-blog.local/wp-json 을 방문할 때 JSON API가 활성화되어 있지 않은 경우 WordPress 설정 에서 영구 링크 를 열고 게시물 이름 또는 아무거나 선택하여 활성화할 수 있습니다. Plain 을 제외한 다른 선택:

이제 http://headless-wordpress-news-blog.local/wp-json 을 방문하면 아래와 같은 JSON 데이터가 표시됩니다.

 { "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

Vue.js 설정(프론트엔드)

Vite 웹 개발 도구를 사용하여 헤드리스 WordPress에 연결할 Vue 3 애플리케이션을 만들 것입니다. Vue 3 및 Vite 개발 도구에 대해 자세히 알아볼 수 있습니다.

이 기사에서는 뉴스 블로그를 구축할 것입니다. 프로젝트의 모든 백엔드 콘텐츠 관리는 Devkinsta를 사용하는 헤드리스 WordPress로 개발 및 호스팅됩니다.

다음과 같은 간단한 명령과 함께 입력하십시오.

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

사용자 이름에 공백이 있는 경우 다음을 사용해 보십시오.

 npx create-vite-app news-blog

http://news-blog.local 을 수신하도록 Vue 3 애플리케이션을 구성했지만 기본 http://localhost:3000 을 사용할 수 있습니다.

마지막으로 선택한 코드 편집기로 Vue 3 코드베이스를 엽니다. VSCode를 사용하고 코드로 손을 더럽히자.

WordPress API 사용

읽는 시간을 절약하기 위해 Vue 애플리케이션의 나머지 부분을 개발하기 위해 진행했지만 내 GitHub에서 리포지토리를 복제할 수 있습니다.

앱 게시물 구성 요소 표시

아래 코드 스니펫은 헤드리스 WordPress의 모든 게시물을 표시하기 위해 Vue 인스턴스로 WordPress REST API를 구현하는 방법을 보여줍니다.

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

단일 기둥 구성요소 표시

코드 스니펫은 헤드리스 WordPress를 사용하여 WordPress REST API로 단일 게시물을 검색하고 Vue 인스턴스에 표시하는 방법을 보여줍니다.

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

다음은 백엔드 콘텐츠에 대해 헤드리스 WordPress API에 대한 API 호출을 수행하는 저장소입니다.

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

Kinsta로 헤드리스 WordPress 배포

마지막으로, Kinsta 호스팅 서비스를 사용하는 DevKinsta를 사용하면 헤드리스 WordPress 배포가 매우 쉬워집니다.

헤드리스 WordPress를 Kinsta에 배포하려면 DevKinsta 대시보드 에서 스테이징으로 푸시 버튼을 클릭하고 로그인 자격 증명으로 Kinsta에 로그인합니다. 새 Kinsta 계정을 만들어 로그인 자격 증명을 얻을 수 있습니다.

한 번의 클릭으로 헤드리스 WordPress를 Kinsta 호스팅 서비스에 배포하기 위해 스테이징 환경에 변경 사항을 푸시하는 방법을 배울 수 있습니다.

마지막으로 Vue.js 인스턴스를 선택한 클라우드 호스팅 제공업체에 배포할 수 있습니다. 라이브 프로덕션 환경에서 애플리케이션을 테스트하려면 헤드리스 WordPress 엔드포인트를 적절하게 업데이트해야 합니다.

요약

Headless WordPress와 함께 제공되는 이점은 잠시 동안 유지됩니다. 더 많은 개발자와 사이트 소유자가 헤드리스 옵션의 장점을 이해하게 됨에 따라 그 인기는 계속해서 증가할 것입니다.

이 가이드에서는 헤드리스 WordPress의 장점, 장단점을 소개했으며 DevKinsta를 사용하여 헤드리스 WordPress를 처음으로 구축 및 배포하는 방법을 보여주었습니다. 이제 헤드리스 워드프레스 구현을 위한 순조로운 과정을 거쳤습니다.

헤드리스 WordPress 사이트 배포에 대한 팁은 무엇입니까? 의견 섹션에서 공유하십시오!