Code

워드프레스 DevOps를 위한 Roots Suite의 Trellis, Bedrock, Sage 로컬 VM 설치

June 26, 2016

워드프레스 DevOps를 위한 Roots Suite의 Trellis, Bedrock, Sage 로컬 VM 설치

로컬 개발 환경

워드프레스 DevOps를 위한 Roots Suite의 Trellis, Bedrock, Sage 설치에서 소개한 방법 중 example.com으로 설치한 방법을 채택하여 roots.nolboo.kim란 도메인을 기준으로 상세한 설정과 설치를 진행한다.

Trellis는 “sites”를 중심으로 만들어졌다. 트렐리스가 관리하는 서버(로컬 개발 머신이나 원격 서버)은 하나 또는 그 이상의 워드프레스 사이트를 지원할 수 있다. 트렐리스는 워드프레스 사이트를 호스트할 때 필요한 모든 것(데이타베이스, Nginx vhost, 폴더 디렉터리 등)을 자동으로 설정한다.

일반적인 설정은 group_vars/development/wordpress_sites.yml에서 패스워드/보안 설정은 group_vars/development/vault.yml에서 할 수 있다.

첫 key인 사이트 이름을 여러 변수의 기본 값으로 사용하기 때문에 도메인명을 사용을 권한다. 여기서는 example.com 대신 roots.nolboo.kim을 사용하겠다.

# group_vars/development/wordpress_sites.yml
wordpress_sites:
  roots.nolboo.kim:
    site_hosts:
      - roots.nolboo.app
    local_path: ../site # 로컬 Bedrock 사이트 폴더를 Ansible 루트에 대한 상대적인 경로로 적어야 하며, 필수 항목이다.
    admin_email: [email protected]
    multisite:
      enabled: false
    ssl:
      enabled: false
    cache:
      enabled: false

공식문서에서 관행적으로 devroots.nolboo.devroots.nolboo.app와 같이 app을 지정한 것은 VVV와 구별하기 위한 것이다. 간단히 nolboo.app과 같은 이름을 주어도, 사실 도메인 형식의 어떤 이름을 주어도 상관없다.

group_vars/development/vault.yml는 다음과 같다.

#  group_vars/development/vault.yml
vault_wordpress_sites:
  roots.nolboo.kim:
    admin_password: admin
    env:
      db_password: example_dbpassword

wordpress_sitesvault_wordpress_sites의 사이트 키가 roots.nolboo.kim로 같아야 한다. 나머지는 로컬 개발 머신이므로 그냥 디폴트값으로 놔둔다.(자신만의 것으로 변경해도 좋다)

공식 문서에 설정할 수 있는 다양한 옵션이 있다.

[Local Development Setup Trellis Documentation Roots](https://roots.io/trellis/docs/local-development-setup/)

설정파일을 편집하고난 다음에 vagrant up 명령으로 가상 머신을 만든다. 브라우저에서 roots.nolboo.kim으로 접근을 한다. 관리자 모드는 http://roots.nolboo.app/wp/wp-admin/로 접근할 수 있다. 시간대/날자와 한글판 사이트로 변경한다.

만약, .app의 호스트명을 변경하면 vagrant hostmanager 명령으로 /etc/hosts 파일에 반영하여야 한다. vagrant up --provision 명령으로 가상머신을 다시 provision해야 할 수도 있다. 항상 프로비전해야 한다.

vagrant ssh 명령으로 가상머신에 접속할 수 있다. 실제 사이트는 /srv/www/roots.nolboo.kim로 접근할 수 있다. 로컬 프로젝트 폴더명과는 상관없이 사이트 키로 서버 폴더를 만든 것을 알 수 있다.

플러그인과 테마 설치

이제 자신의 플러그인과 테마를 설치한다. 여기서는 우커머스 플러그인과 스토어프론트 테마를 컴포저를 이용하여 설치한다. 좀 더 자세한 내용은

WooCommerce와 StoreFront 설치

site/ 디렉터리에서 컴포저를 이용하여 설치한다:

composer require wpackagist-plugin/woocommerce wpackagist-theme/storefront

위의 명령어 한 줄을 풀어서 설명하고 순서대로 실행하면 다음과 같다:

site/composer.json에 버전과 함께 입력한다.

  "require": {
    "php": ">=5.5",
    "composer/installers": "~1.0.12",
    "vlucas/phpdotenv": "^2.0.1",
    "johnpbloch/wordpress": "4.5.2",
    "oscarotero/env": "^1.0",
    "roots/wp-password-bcrypt": "1.0.0",
    "wpackagist-plugin/woocommerce": "^2.5.5",
    "wpackagist-theme/storefront": "^2.0.3"
  },

추가하기를 원하는 워드프레스 플러그인과 테마를 미러링 사이트인 http://wpackagist.org에서 검색하여 추가할 수 있다.

플러그인과 테마를 설치하고 composer.lock 파일에 추가한다:

composer update

컴포저로 워드프레스 플러그인과 테마를 관리하는 보다 자세한 방법은 아래 포스팅에 별도로 정리하였다.

StoreFront 자식 테마와 Sage 개발 환경

워드프레스 공식 문서에서는
StoreFront 테마가 업데이트될 때 덮어씌워지기 때문에 Child Theme에서 자신이 원하는 코드를 추가하거나 변경할 것을 권하고 있다.

자식테마 디렉터리를 직접 만들어도 되지만, 미리 만들어진 빈 자식테마인 stuartduff/storefront-child-themethemes 디렉토리에 클론한다.

git clone https://github.com/stuartduff/storefront-child-theme.git

In site/config/application.php add define(‘WP_DEFAULT_THEME’, ‘storefront-child-theme’);
현대적인 프론트엔드 개발환경을 갖추기 위해 설정파일들을 복사하고 패키지를 설치한다.

cd storefront-child-theme
cp ../sage/package.json .
cp ../sage/bower.json .
cp ../sage/gulpfile.js .
cp ../sage/assets/manifest.json assets/
npm install && bower install && gulp

BrowserSync를 사용하려면 assets/manifest.jsondevUrl의 값을 편집한다.

  "config": {
    "devUrl": "http://roots.nolboo.app"
  }

보다 자세한 내용은 번역글 Sage를 사용하여 워드프레스 테마 개발을 현대화하기을 참조한다.

roots.nolboo.kim에서 로컬 VM에 설치가 잘 되었는지 체크한다.
roots.nolboo.kim/wp/wp-admin 관리자 모드에서 우커머스 플러그인을 활성화하고 위저드를 실행한다.

우커머스 한글

우커머스 한글 파일은 여기에서, 관리자용 한글 파일은 비공식으로 얻을 수 있다.

이제 storefront-child-theme 디렉토리에서 gulp watch를 실행하면 자동으로 브라우저가 localhost:3000를 보여줄 것이다.

웹스톰이나 서브라임과 같은 앱을 이용하여 편집한 후 실제로 반영되는지를 테스트한다.

sage/.gitignore를 참고하여 자신의 .gitignore 파일을 작성한 후 깃 저장소로 첫번째 푸시를 한다. 깃에 대한 지식이 전혀 없다면 완전 초보를 위한 깃허브를 참조한다.

TODO

이 글을 더 붙잡고 있을 수가 없어서 일단 올리니 당분간 이 주제에 대한 초안으로 생각해주십시요.