Blog

Sử dụng Docker để phát triển cục bộ các trang web WordPress không đầu với NextJS

Trở lại năm 2016, tôi đã nói về việc thêm WordPress REST API là bước đầu tiên trong việc phát triển WordPress thành một nền tảng ứng dụng như thế nào . Kể từ đó, trình chỉnh sửa bài đăng trên WordPress đã được viết lại bằng React. Ngoài WordPress REST API, hiện có một plugin GraphQL cho WordPress đang được phát triển với mục tiêu một ngày nào đó biến nó trở thành một phần của lõi WordPress.

Khi đó, chúng tôi không chắc làm thế nào để tích hợp React hoặc Vue với các trang web WordPress. Ngày nay, NextJS và Gatsby đã tồn tại và đi kèm với các cài đặt trước của WordPress. Tôi là một người hâm mộ lớn của NextJS, nó bao gồm tạo trang web tĩnh, làm cho nó trở nên hoàn hảo cho các trang web có nội dung tĩnh. Tôi cũng thích định tuyến cấu hình bằng không cho các trang giao diện người dùng và các tuyến API.

Cài đặt trước WordPress của NextJs là mọi thứ bạn cần để bắt đầu một trang web nội dung, với WPGraphQL . Điều đó thật tuyệt, nhưng nó cũng có thể là điểm khởi đầu cho một ứng dụng chạy bằng WordPress.

Giống như hầu hết các dự án WordPress, bước đầu tiên là chọn môi trường phát triển cục bộ cho trang WordPress. Có rất nhiều lựa chọn ngoài kia. Tôi thích sử dụng Docker vì có rất ít thiết lập cho WordPress, nhờ vào gói @ wordpress / wp-env .

Với một chút cấu hình, chúng tôi có thể tự động hóa tất cả các thiết lập cần thiết. Điều này giúp việc giới thiệu các nhà phát triển mới và QA dễ dàng hơn. Trong bài viết này, tôi sẽ chỉ cho bạn cách thiết lập điều đó. Tôi sẽ cho rằng bạn đã quen thuộc với WordPress và NextJS.

Tạo ứng dụng

Điều đầu tiên, chúng tôi cần một ứng dụng Tiếp theo. Cài đặt trước WordPress là một điểm khởi đầu tuyệt vời. Nó thậm chí còn bao gồm cả Tailwind. Bắt đầu bằng cách tạo ứng dụng bằng create-next-app:

yarn create next-app --example cms-wordpress cms-wordpress-app

Điều đó sẽ tạo ra ứng dụng. Bây giờ chúng ta cần một WordPress.

Thêm một trang web WordPress cục bộ

Cấu hình cho trang web này sẽ rất tối thiểu. Chúng tôi cần một trang web có một vài plugin và chúng tôi cần đặt một hằng số trong wp-config.php của trang web đó. @ wordpress / wp-env có thể làm tất cả những điều đó.

Trang web WordPress sẽ cần phải cài đặt WPGraphQL. Tôi muốn thêm plugin Chế độ không đầu mà tôi đã thực hiện với một số người bạn cách đây một thời gian. Điều này sẽ chuyển hướng tất cả các yêu cầu chưa được xác thực đến giao diện người dùng của trang WordPress sẽ được chuyển hướng đến máy khách.

Đầu tiên cài đặt gói:

yarn add @wordpress/env

Sau đó, chúng tôi sẽ cần tạo .wp-env.jsontệp cấu hình cho trang Docker cục bộ:

{
    "core": null,
    "plugins": [
        "https://downloads.wordpress.org/plugin/wp-graphql.zip",
        "https://downloads.wordpress.org/plugin/headless-mode.zip"
    ],
    "port": 4113,
    "config": {
        "HEADLESS_MODE_CLIENT_URL": "http://localhost:3000"
    }
}

Phần “plugin” đang được sử dụng để tải xuống phiên bản mới nhất của cả hai plugin đó từ WordPress.org. Phần “cấu hình” đặt một hằng số PHP. Đây là URL cho chuyển hướng. Bạn sẽ cần phải đặt một hằng số trong sản xuất để khớp với URL đã triển khai của bạn cho khách hàng, như được ghi lại ở đây .

Để làm cho cuộc sống của tôi dễ dàng hơn, tôi đã thêm lệnh “wordpress” vào phần script của package.json


{
        "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start",
        "wordpress": "wp-env start"
    }
}

Làm cho chúng hoạt động khác nhau

Bây giờ, hãy đảm bảo rằng trang web WordPress đang hoạt động. Hãy thử bắt đầu nó:

yarn wordpress

Nếu mọi thứ diễn ra như mong đợi, điều đó sẽ tải xuống các plugin chúng tôi cần và khởi động trang web. Khi nó thông báo đã xong, nếu bạn truy cập front-end của trang WordPress , nó sẽ chuyển hướng bạn đến cổng 3000, cổng này không ‘đang chạy và điều đó không sao cả. Chúng tôi vẫn chưa ở đó.

Nếu bạn truy cập trang đăng nhập WordPress, bạn sẽ thấy nó như bình thường. Nếu bạn có thể đăng nhập với tên người dùng “admin” và mật khẩu “password”, thì mọi thứ đều tốt.

Cấu hình NextJS để làm việc với WordPress

Trước khi bắt đầu ứng dụng tiếp theo, chúng ta cần phải cho nó biết URL nguồn nội dung từ.

Tạo .envvà thêm cái này:

WORDPRESS_API_URL=http://localhost:4113/graphql`

Bây giờ hãy bắt đầu giao diện người dùng

yarn && yarn dev

Bây giờ bạn sẽ thấy giao diện người dùng tại http://localhost:3000 / .

Thêm một plugin

Nếu bạn định thêm các loại bài đăng tùy chỉnh hoặc đăng ký các đột biến mới hoặc làm bất kỳ điều gì khác yêu cầu mã PHP tùy chỉnh, bạn sẽ cần thêm một plugin hoặc mu-plugin.

Tôi thích có một plugin cho mã tùy chỉnh của mình, vì vậy tôi có thể bật và tắt nó. Tôi đã thêm một thư mục có tên “wordpress-plugin” và đặt một tệp vào đó có tên “wordpress-plugin”. Sau đó, tôi cập nhật phần “plugin” của .wp-config.json để ánh xạ thư mục đó dưới dạng plugin:

{
    "core": null,
    "plugins": [
        "./wordpress-plugin",
        "https://downloads.wordpress.org/plugin/wp-graphql.zip",
        "https://downloads.wordpress.org/plugin/headless-mode.zip"
    ],
    "port": 4113,
    "config": {
        "HEADLESS_MODE_CLIENT_URL": "http://localhost:3000"
    }
}

Xem phần này của tài liệu để biết thêm thông tin về các cách khác để tải plugin và mu-plugin.

Tạo ứng dụng web ngay bây giờ

Đó là tất cả những gì bạn cần để thiết lập ứng dụng NextJS bằng cách sử dụng trang web WordPress cục bộ chạy trong vùng chứa Docker. Bạn có thể bắt đầu phát triển PHP và JavaScript cho dự án của mình. Bạn làm gì tiếp theo là tùy thuộc vào bạn. Việc tìm hiểu việc triển khai và xác thực của chúng tôi cũng như mã hóa ứng dụng sẽ đến tiếp theo.

Nếu đẩy repo lên Github, bạn có thể triển khai giao diện người dùng với Vercel với (trình nhập siêu đơn giản hơn] ( https://vercel.com/new ) của họ. Đảm bảo đặt WORDPRESS_API_URL biến môi trường khớp với URL của phiên bản trực tiếp Trang web WordPress.

Hãy thoải mái phân nhánh nguồn cho ứng dụng mẫu để xây dựng thứ của riêng bạn. Tôi hy vọng bạn vui.

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Check Also
Close
Back to top button