Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Hosting

WordPress pengembangan dan penyebaran dengan MAMP, Git dan Dropbox

by
Read Time:17 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Saat ini agar freelance WordPress pengembang Anda sering perlu mengembangkan secara bersamaan beberapa WordPress situs untuk klien yang berbeda. Berikut adalah bagaimana.

Ini mengharuskan Anda untuk mengadopsi berikut:

  • Lingkungan pengembangan lokal yang fleksibel yang memungkinkan Anda untuk dengan mudah menambahkan situs baru, dengan sistem kontrol versi modern dan yang memungkinkan Anda untuk mengembangkan baik pada komputer desktop dan notebook Anda.
  • Sistem penyebaran handal dan aman ke remote server.

Dengan konfigurasi ini Anda dapat dengan mudah:

  • lokal mengembangkan dan menguji baru plugin atau tema Anda dalam cara yang aman dan menyebarkan ke server produksi;
  • secara lokal memperbarui file inti WordPress atau memperbarui plugin yang sudah diinstal / tema dengan cara yang aman, periksa bahwa tidak ada yang merusak situs dan menerapkan perubahan ini ke server produksi;
  • membuat perubahan cepat pada beberapa file di server jauh dan kemudian mengambilnya di lingkungan lokal.

Sebelum Kita Mulai

Dalam tutorial ini kami mengacu pada Mac OS X, tetapi Anda dapat dengan mudah beradaptasi untuk OS lain manapun. Selain itu kita berasumsi bahwa remote server memiliki Git yang sudah terpasang dan akses SSH dikonfigurasi dengan otentikasi kunci umum (SSH dan Git instalasi berada di luar cakupan tutorial ini).

Skenario yang akan kita lihat terdiri dari lingkungan lokal yang memungkinkan perkembangan WordPress Plugin dan tema situs dan Server Remote yang akan menjadi tuan rumah situs WordPress "produksi". Di lingkungan setempat, kami akan menggunakan komputer Desktop dan komputer Notebook. Pada kedua komputer kita akan setup MAMP, Dropbox dan Git sehingga Anda dapat bekerja pada Desktop Anda ketika Anda berada di kantor dan notebook Anda ketika Anda tidak di kantor dan semua perubahan akan disinkronkan.

Kita akan menggunakan Dropbox untuk menyinkronkan file dan DB antara Desktop dan Notebook, dan kita akan menggunakan Git untuk melacak perubahan lokal dan menyebarkan mereka ke Remote Server.

Untuk kesederhanaan kita mendefinisikan www.site.dev sebagai situs pembangunan di lingkungan setempat dan www.site.com sebagai production site di Server jauh.


Apa yang akan kita lakukan

Pada lingkungan lokal:

  • Buat struktur direktori dasar pada Dropbox;
  • menginstal dan men-setup MAMP (keduanya di Desktop dan Notebook Anda) untuk bekerja dalam lingkungan Dropbox;
  • setup dan menjalankan WordPress situs pengembangan di Desktop dan Notebook Anda;

Pada remote server:

  • mengkonfigurasi Git, setup repositori berjarak dan hook diperlukan;
  • setup MySQL untuk WordPress situs produksi;

Pada lingkungan lokal:

  • mengkonfigurasi Git, setup repositori lokal;
  • mengubah konfigurasi WordPress untuk mengelola koneksi DB lokal/remote;
  • membuat commit awal dan menyebarkan pertama ke server jauh.

Contoh alur kerja umum:

  • pengembangan tema plugin;
  • WordPress manajemen;
  • mengakui "mendesak-on-the-fly" perubahan pada server produksi dan menarik mereka di lingkungan setempat;

Apa yang Anda butuhkan

  • Pada lingkungan lokal:
    • Akun Dropbox, klien Dropbox yang diinstal di desktop dan notebook Anda (lihat situs web Dropbox untuk petunjuk pemasangan);
    • MAMP, Anda bisa mendapatkannya dari sini;
    • Editor Teks favorit Anda;
    • Git (cara menginstal Git secara lokal tercakup dalam buku Pro Git);
  • Di Server Jarak Jauh:
    • PHP dan MySQL sesuai kebutuhan WordPress;
    • Git diinstal (Lihat di sini);
    • Account dengan akses SSH dan otentikasi kunci umum;

Langkah 1 membuat struktur direktori pada Dropbox

Download dan instal Dropbox di Desktop dan Notebook Anda (Lihat di sini untuk petunjuk). Menggunakan akun yang sama pada kedua komputer.

Dalam Dropbox folder pada Desktop, buat struktur direktori berikut:

  • Dropbox
    • Pengembangan
      • conf
      • DB
      • log
      • vhost
DevelopmentDevelopmentDevelopment

Periksa bahwa struktur direktori yang sama diterapkan pada Notebook.


Langkah 2 menginstal dan mengkonfigurasi MAMP

MAMP merupakan akronim yang singkatan: Mac, Apache, MySQL dan PHP, itu adalah sebuah aplikasi yang menginstall lingkungan server lokal pada Mac Anda.

Instalasi sangat mudah: unduh MAMP dari sini, unzip arsip dan klik dua kali, lalu ikuti petunjuknya. Lakukan ini di Desktop dan Notebook. Jangan mulai MAMP: sebelum melakukan ini Anda harus memindahkan database dan mengubah konfigurasi default.

Pindahkan map Database

Pada folder database Desktop bergerak dari MAMP standar lokasi ke direktori db pada Dropbox, untuk melakukan hal ini membuka Terminal dan menggunakan perintah berikut:

Notebook Buka Terminal dan menghapus folder database menggunakan perintah berikut:

Akhirnya pada Desktop dan Notebook membuat symlink dari MAMP Dropbox dengan perintah berikut:

Sekarang link simbolik /Applications/MAMP/db poin untuk Dropbox bersama ~/Dropbox/Development/db folder yang berisi MAMP database. Jangan mulai MAMP belum: pertama kita harus membuat perubahan konfigurasi.

Perubahan MAMP Port

MAMP menggunakan Port kustom untuk server Apache dan MySQL contoh: Apache berjalan pada port 8888, MySQL berjalan pada port 8889. Anda dapat menjaga konfigurasi ini atau, seperti yang kami sarankan, mengubahnya menggunakan standar port: 80 untuk Apache, dan 3306 MySQL.

Untuk mengembalikan port standar, mulailah MAMP di Desktop Anda saja, klik pada 'Preferences ...', kemudian pada 'Ports', klik 'Set to default Apache dan MySQL ports' dan akhirnya klik 'OK': MAMP menyimpan konfigurasi baru dan memulai ulang secara otomatis.

MAMP PortsMAMP PortsMAMP Ports

Sekarang di Desktop Anda buka browser favorit Anda dan masuk ke https: // localhost / MAMP /: Anda harus melihat MAMP Home Page.

MAMP HomepageMAMP HomepageMAMP Homepage

Jika Anda tidak melihat halaman rumah MAMP mungkin Anda memiliki Web berbagi diaktifkan: Buka System Preferences, klik pada hasil dan Nonaktifkan berbagi Web.

Web SharingWeb SharingWeb Sharing

Jangan khawatir jika Mac OS X memerlukan sandi ketika Anda mulai MAMP: kami memiliki konfigurasi Apache untuk dijalankan pada port 80 yang adalah port istimewa dan ini memerlukan sandi administrator.

Karena dalam konfigurasi ini MAMP tidak dapat berjalan secara bersamaan di Desktop dan Notebook Anda, berhenti MAMP pada Desktop, mulai notebook dan mengkonfigurasinya dengan cara yang sama. Ketika Anda selesai berhenti MAMP.

Perubahan MAMP-konfigurasi Apache

Konfigurasi MAMP Apache disimpan di /Applications/MAMP/conf/apache/httpd.conf. Edit file ini dengan editor teks favorit Anda dan tambahkan baris berikut (lakukan ini di Desktop dan Notebook Anda):

Ganti YOURUSERNAME dengan nama pengguna Mac OS X Anda (jika Anda tidak tahu itu buka Terminal dan jalankan whoami; itu akan memberikan Anda dengan nama pengguna Anda).

Pernyataan ini menginstruksikan Apache untuk memuat file konfigurasi tambahan dari folder Dropbox Anda (disinkronkan antara Desktop dan Notebook). Dengan cara ini kita dapat menggunakannya sebagai File Konfigurasi Lingkungan Lokal.

Setup Virtual Host Apache pada MAMP

Apache Virtual Host adalah fitur bagus yang memungkinkan Anda untuk menjalankan lebih dari satu situs web (seperti www.site1.com dan www.site2.com) di satu server. Host virtual dapat 'berbasis IP', artinya Anda memiliki alamat IP yang berbeda untuk setiap situs web, atau 'berbasis-nama', yang berarti Anda memiliki banyak nama yang berjalan pada satu alamat IP. Yang terakhir adalah fitur yang akan kami gunakan (lihat di sini untuk detail).

Dengan editor teks favorit Anda membuka File konfigurasi lingkungan lokal /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf dan masukkan baris berikut:

String "%0" melemparkan mantra: ketika Apache server menerima permintaan untuk domain www.site.dev tampaknya untuk sebuah direktori yang dinamakan www.site.dev in/pengguna/YOURUSERNAME/Dropbox/pembangunan/vhosts /, dan jika ditemukan melayani file dari itu.

Pernyataan lain menginstruksikan Apache mana untuk menulis kesalahan dan mengakses file-file log.


Langkah 3 Setup WordPress

Sekarang kita siap untuk men-setup WordPress pengembangan situs www.site.dev. Untuk melakukan hal ini kita harus membuat sebuah direktori www.site.dev (di Desktop Anda).

wwwsitedevwwwsitedevwwwsitedev

dan kita harus file/etc/hosts edit (di Desktop dan Notebook) untuk memetakan www.site.dev nama host ke alamat IP localhost. Dengan editor teks favorit Anda buka file/etc/hosts dan menambahkan baris berikut ke akhir file (Mac OS X memerlukan sandi untuk memodifikasi file sistem ini):

Pada tahap ini mungkin berguna untuk melakukan beberapa check: Buka Terminal dan jalankan perintah berikut:

Anda harus memiliki respons yang sama ini:

TerminalTerminalTerminal

Saatnya sekarang untuk mengatur WordPress: Download paket WordPress dari sini dan unzip folder sementara. Pindahkan semua konten folder sementara di dalam /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.

Pada Desktop Anda mulai MAMP dan buka browser Anda di http://localhost/MAMP/. Klik pada phpMyAdmin tab dan membuat database baru bernama site_dev:

MAMP - phpMyAdminMAMP - phpMyAdminMAMP - phpMyAdmin

Buka browser Anda di www.site.dev dan menyelesaikan instalasi WordPress menggunakan nilai-nilai ini:

  • Nama database: site_dev
  • Nama pengguna: akar
  • Sandi: akar
  • Tuan rumah database: localhost
  • Awalan Tabel: wp_

Berhenti MAMP pada Desktop, menunggu Dropbox sinkronisasi dan mulai notebook. Buka Browser Notebook Anda di www.site.dev: WordPress telah dikonfigurasi!

Pada akhir langkah 3 kita memiliki lingkungan pengembangan WordPress lokal berdasarkan MAMP dan disinkronisasikan antara Desktop dan Notebook melalui Dropbox, sekarang saatnya untuk mengkonfigurasi remote server.


Langkah 4 mengkonfigurasi Git pada Remote Server

Git adalah sistem kontrol versi Distribuited, yang mencatat perubahan ke file atau set file dari waktu ke waktu dan memungkinkan mendorong perubahan ke server jauh (lebih rinci Deskripsi di sini). Dalam tutorial ini kita berasumsi bahwa Git sudah diinstal pada server Anda. Dengan demikian, kita lanjutkan dengan konfigurasi.

Pertama Anda harus login ke server. Kami menganggap Anda memiliki account dengan akses SSH dan otentikasi kunci umum. Dengan cara ini Anda tidak perlu memasukkan sandi setiap kali Anda login. Membuka jendela terminal dan menyambung ke server:

Setup beberapa default Git tentang pengguna dan email untuk menghindari Git meminta mereka setiap kali:

Setup dan memulai sebuah repositori kosong:

Untuk memungkinkan penggunaan dari pengembangan produksi situs Anda harus setup Git pengait (saya menggunakan Vi sebagai editor teks saya untuk remote server):

Kemudian tambahkan baris berikut:

Set docroot variabel Web Server DocumentRoot dan kemudian membuat pasca menerima eksekusi:

Kait ini dijalankan pada akhir proses mendorong perubahan dari klien (Desktop atau Notebook) ke Remote Server. Itu membuat penggunaan ke Direktori Web Server DocumentRoot produksi (Lihat di sini untuk rincian tentang Git kait).

Perintah git menggunakan beberapa variabel lingkungan; kita perlu menyiapkan dua di antaranya: GIT_DIR dan GIT_WORK_TREE. Pertama menentukan path ke repositori, kedua jalur untuk kerja pohon (DocumentRoot). Shell default pada Server Remote saya adalah Bash jadi aku menambahkan mereka ke file .bash_profile.

Tambahkan baris berikut ke akhir file:


Langkah 5 MySQL Setup di Server jauh

Di Server jauh Anda masih harus membuat sebuah Database di MySQL: untuk melakukan ini, Anda dapat mengikuti petunjuk instalasi rinci di WordPress Codex. Server remote saya memiliki cPanel sebagai panel kontrol hosting jadi saya ikuti petunjuk ini.


Langkah 6 Setup Git pada lingkungan setempat

Menginstall Git pada Mac OS X (lebih rinci petunjuk pada buku Pro Git): download installer dari halaman Google Code, klik dua kali dmg file maka pkg file, dan ikuti petunjuk. Melakukan hal ini pada Desktop dan Notebook.

Sekarang Anda siap untuk menginisialisasi sebuah repositori Git pada lingkungan setempat. Untuk melakukan ini buka Terminal (di Desktop atau notebook Anda) dan menggunakan perintah berikut:

Anda harus melihat sesuatu seperti ini:

Git initGit initGit init

Untuk memeriksa status repositori Git menggunakan perintah ini:

output harus seperti ini:

Git statusGit statusGit status

Git adalah memberitahu Anda bahwa semua file dan direktori ini tidak dilacak dalam repositori dan menyarankan untuk menggunakan git tambahkan perintah untuk melacak mereka.

Sebelum melakukan hal ini Anda perlu membuat beberapa perubahan pada konfigurasi Git. Kita harus memberitahu Git file mana harus melacak dan yang seharusnya tidak. Untuk melakukan hal ini menggunakan berkas .gitignore.

Berkas .gitignore

File ini menentukan berkas terpantau bahwa Git harus mengabaikan (Lihat di sini untuk detail lebih lanjut). Perintah ini sederhana, mari kita membuat sebuah contoh untuk memahami cara kerjanya:

Jadi membuat file ~/Dropbox/Development/vhost/ www.site.dev/.gitignore dan tambahkan baris berikut:

Untuk saat ini adalah semua yang Anda butuhkan. Kemudian kami akan menambah file dan direktori lain.


Langkah 7 memodifikasi WordPress konfigurasi untuk mengelola koneksi DB lokal dan Remote

Menggunakan WordPress pada lingkungan lokal DB dari MAMP dan wp-config.php file konfigurasi yang mencerminkan konfigurasi ini (standar MAMP MySQL username dan password):

Ini bekerja pada lingkungan lokal tapi apa yang terjadi jika kita menyebarkan ke Remote Server? Jelas itu akan gagal untuk menghubungkan ke DB karena DB_NAME, DB_USER, DB_PASSWORD dan mungkin DB_HOST yang salah.

Solusi datang dari artikel Mark Jaquith: memodifikasi file wp-config.php sehingga konfigurasi untuk lingkungan setempat dimuat dari berkas lain dan file tersebut tidak dilacak oleh git. Untuk melakukan ini membuka file wp-config.php dan pengganti jalur di atas dengan garis-garis ini:

Ganti YOURDBNAME, YOURDBUSER, YOURDBPASSWORD dan YOURDBHOSTNAME dengan nilai-nilai yang Anda tetapkan dalam langkah 5.

Membuat ~/Dropbox/Development/vhost/ www.site.dev/local-config.php file dan mendefinisikan menempatkan lingkungan setempat di sana:

Sekarang kita harus menambahkan lokal-config.php .gitignore sehingga Git tidak akan melacak itu:

OK, sekarang kami siap untuk membuat commit pertama.


Langkah 8 komit perubahan pada lingkungan lokal dan mendorong mereka pada Remote Server

Untuk melakukan perubahan ke repositori Git pada lingkungan setempat masukkan perintah ini:

Perintah Git pertama trek semua file dan direktori di ~/Dropbox/Development/vhost/ www.site.dev/ kecuali bahwa di .gitignore, kedua melakukan semuanya dalam repositori Git.

Saatnya untuk mendorong WordPress pada Server jauh, tapi pertama kita harus mengatur repositori berjarak Git:

Perintah ini memberitahu Git bahwa ada repositori berjarak yang disebut situs web, host pada server www.site.com dapat diakses melalui sebuah koneksi SSH.

Akhirnya pertama menyebarkan pada Remote server:

Output perintah harus terlihat seperti berikut:

git pushgit pushgit push

Sekarang Anda bisa mengarahkan browser Anda ke www.site.com dan melihat situs WordPress pada Remote Server.


Beberapa contoh khas Workflow

Pengembangan tema Plugin

Sebagai tema plugin pengembangan contoh kita dapat membuat lingkungan hidup setempat dua puluh sebelas anak tema dan menyebarkan ke Remote Server.

Untuk petunjuk rinci tentang cara membuat tema anak yang Anda dapat membaca artikel ini di Wptuts +. Pada dasarnya kita harus membuat sebuah direktori yang berisi dua file: style.css dan functions.php (yang terakhir opsional).

Jadi pada Desktop (atau notebook) membuat direktori ~/Dropbox/Development/vhost/ www.site.dev/wp-content/themes/my-twentyeleven-child, kemudian Buat file bernama style.css di dalam folder ini dan tambahkan baris berikut:

Anda juga dapat menambahkan beberapa perubahan CSS di bawah garis @import, misalnya Anda dapat mengubah latar belakang tubuh:

Kemudian membuat functions.php file dan tambahkan baris berikut:

File fungsi sederhana ini melakukan satu hal: hal itu menambah favicon link unsur kepala halaman HTML.

Sekarang kami tema anak lengkap dan kita perlu untuk melacak dalam repositori Git:

Maka kita perlu untuk melakukan perubahan:

Dalam hal ini dengan cara ini Anda dapat melanjutkan pengembangan tema anak menambahkan file, mengubah kode dan melakukan semua ini perubahan ke repositori. Ketika tema Anda siap untuk server produksi Anda hanya perlu mengeluarkan perintah git push:

Dengan cara ini tema anak akan mendorong pada Remote Server, siap untuk digunakan.

Jika Anda mengembangkan sebuah plugin melakukan langkah yang sama: melacak plugin direktori dan mengkomit perubahan pada repositori. Ketika plugin Anda siap mendorong pada Remote Server.

WordPress manajemen

Dengan cara yang sama kita dapat mengatur instalasi plugin WordPress atau memperbarui WordPress. Mari kita asumsikan bahwa kita ingin mencoba sebuah plugin baru, dan kami ingin memastikan bahwa tidak melanggar situs produksi kami.

Kami menginstalnya pada lingkungan lokal yang pertama menggunakan Panel administrasi WordPress (Lihat di sini untuk rincian), maka kita harus melacak dan menambahkannya ke repositori Git (melakukan ini di Desktop atau notebook Anda):

Jika plugin bekerja, Anda dapat menyebarkan menggunakan Remote Server:

dan memungkinkan menggunakan Panel administrasi WordPress.

Jika plugin tidak bekerja Anda dapat membongkarnya menggunakan Panel administrasi WordPress, maka Anda dapat menghapusnya dari berkas terpantau dan mengkomit perubahan:

Sedikit tip: jika Anda menambahkan direktori plugin ke file .gitignore (sebelum commit) plugin akan tetap hanya di Lingkungan Lokal tetapi tidak akan didorong di Remote Server. Ini mungkin berguna untuk plugin seperti Debug Bar yang digunakan dalam pengembangan lokal tetapi itu tidak harus ditransfer ke situs produksi.

Membuat perubahan cepat pada Server produksi dan menarik mereka di lingkungan setempat

Oke, kita tahu, perubahan cepat di server produksi bukan kebiasaan yang baik, memang kebiasaan mereka buruk, tetapi kadang tidak bisa dihindari. Dengan asumsi bahwa kita berubah DB_PASSWORD pada Remote Server file wp-config.php dan sekarang kita ingin mengakui bahwa perubahan dalam lingkungan lokal kami wp-config.php. Untuk melakukan ini dulu menyambung ke server melalui SSH dan menggunakan perintah berikut:

Kemudian menarik perubahan dari repositori berjarak menggunakan perintah berikut pada Desktop:

Jika Anda membaca wp-config.php Anda akan melihat DB_PASSWORD baru.


Kesimpulan

Dalam tutorial ini kita telah melihat skenario yang terdiri dari lingkungan lokal dan Remote Server yang host pengembangan dan produksi situs untuk www.site.com, tapi Anda dapat dengan mudah mengulangi pengaturan ini untuk www.mynewcustomer.com, untuk www.myothernewnewcustomer.com dan begitu pada.

vhostvhostvhost

MAMP, Dropbox dan Git membentuk tim pemenang untuk berurusan dengan WordPress pengembangan dan penyebaran, mereka mewakili sebuah lingkungan pengembangan yang fleksibel yang memungkinkan untuk dengan mudah menambahkan situs baru, mengembangkan itu di mana-mana Anda, dan untuk menyebarkan dalam cara yang dapat diandalkan untuk produksi server.

Jika Anda bekerja dengan WordPress secara teratur, check out pemilihan besar utilitas WordPress Envato pasar. Dari keamanan plugin untuk iFrame customizers, ada pasti ada sesuatu di sana yang dapat membantu Anda.

WordPress utilities on Envato MarketWordPress utilities on Envato MarketWordPress utilities on Envato Market
Utilitas WordPress di Envato Market
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.