DigitalOceanとBuddyを使用してWordpressの展開を自動化する方法

提供：Dev Guides
移動先:案内、検索

序章

このチュートリアルでは、 Buddy CI / CDを使用して、WordPressの展開を自動化します。これは、継続的インテグレーションと継続的展開ソリューションを提供するユーザーフレンドリーなツールです。

他の多くのCI/CDツールと比較して、BuddyはDevOpsの経験が少なくて済みます。 これにより、開発者はビジュアルGUIでドラッグアンドドロップアクションを使用して配信パイプラインを作成できます。 このGUIは、DigitalOceanのインタラクティブドロップレット構成と同様のアプローチで、事前構成されたアクション（ビルド、テスト、デプロイメントなど）を活用します。 つまり、初心者もエキスパート開発者も、Buddyを使用して、エラーを減らしながら、より多くのソフトウェアをリリースできます。

このチュートリアルを完了すると、ローカル端末から1つのコマンドでWordPressのデプロイを実行できるようになります。 より良い洞察を得るために、より高度なSageベースのWordPressテーマをビルドします。これは、WordPressサーバーにデプロイする前に複数のビルドステップを必要とします。

前提条件

注：このチュートリアルは、Node.jsバージョン14.13.0、npmバージョン6.14.8、およびPHPバージョン7.4.10でテストされました。


ステップ1—Dockerを使用したWordPressのインストール

このステップでは、DockerからWordPressイメージをプルして、ビルドを開始します。

まず、次のコマンドを使用してDockerが実行されていることを確認します。 

docker info

次のような出力が表示されます。 

OutputClient:
 Debug Mode: false

Server:
 Containers: 0
  Running: 0
  Paused: 0
  Stopped: 0
 Images: 0
 Server Version: 19.03.12
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Native Overlay Diff: true
 Logging Driver: json-file
 Cgroup Driver: cgroupfs
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
 Swarm: inactive
  ...

Dockerが実行されていることを確認したので、最新バージョンのWordPressイメージをダウンロードします。 

docker pull wordpress

次に、ワークスペースにプロジェクト用のフォルダーを作成します。 

mkdir docker-wordpress-theme

新しいプロジェクトフォルダ内を移動します。 

cd docker-wordpress-theme

次に、ビルドを定義する必要があります。 nanoまたはお好みのテキストエディタを使用して、docker-compose.ymlというファイルを開いて作成します。 

nano docker-compose.yml

次の定義をファイルに追加します。 これらは、DockerComposeのバージョンと起動されるサービスについて説明しています。 この場合、WordPressとMySQLデータベースを起動しています。 強調表示されたフィールドを必ずクレデンシャルに置き換えてください。

docker-compose.yml 

version: "3.1"

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html
      - ./sage:/var/www/html/wp-content/themes/sage/
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: "1"
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

ここでは、Dockerがサービスで起動するimagesを定義してから、ポートと環境変数を設定しています。

まだ作成していないsageというフォルダをマウントしていることに注意してください。 これがカスタムテーマになり、これから作成します。

ステップ2—カスタムWordPressテーマを作成する

このステップでは、カスタムのワードプレステーマを作成します。 次に、CI / CDパイプラインを作成して、ローカルで行った変更を1つのコマンドでWordpressサーバーにプッシュできるようにします。

ローカルのWordPressインストールにSageフレームワークをインストールして、カスタムテーマの作成を始めましょう。 このテーマは、Node.jsとGulpを使用して、開発およびビルド機能を実行します。 本番サーバーにはビルドの依存関係はインストールされません。代わりに、すべての本番ビルドタスクはリモートの継続的インテグレーションサーバーであるBuddyで実行されます。

プロジェクトフォルダにいることを確認してください。 

cd docker-wordpress-theme

Composerを使用して、新しいSageテーマを作成します。 

composer create-project roots/sage

すべてが適切に構成されていると、次の出力が表示されます。 

OutputInstalling roots/sage (9.0.9)
  - Installing roots/sage (9.0.9): Loading from cache
Created project in /home/mike/Projects/buddy/github/sage
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 29 installs, 0 updates, 0 removals
  - Installing composer/installers (v1.6.0): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.10.0): Downloading (100%)
  - Installing symfony/contracts (v1.0.2): Downloading (100%)
  - ..........

次に、インストーラーは、ロードするフレームワークを選択するように求めます。 

Output- Theme Name > Sage Starter Theme
- Theme URI > https://roots.io/sage/
- Theme Name [Sage Starter Theme]:
- Theme Description > Sage is a WordPress starter theme.
- Theme Version > 9.0.9
- Theme Author > Roots
- Theme Author URI > https://roots.io/
- Local development URL of WP site > http://localhost:8080
- Path to theme directory > /wp-content/themes/sage
- Which framework would you like to load? [Bootstrap]:
    [0] None
    [1] Bootstrap
    [2] Bulma
    [3] Foundation
    [4] Tachyons
    [5] Tailwind

注：ローカル開発URLがポートと一致していることを確認してください。


1を押して、ブートストラップフレームワークを選択します。 いくつかのファイルを上書きする許可を求められます。 yと入力して確認し、続行します。 

Output Are you sure you want to overwrite the following files?
 - scripts/autoload/_bootstrap.js
 - styles/autoload/_bootstrap.scss
 - styles/common/_variables.scss
 - styles/components/_comments.scss
 - styles/components/_forms.scss
 - styles/components/_wp-classes.scss
 - styles/layouts/_header.scss

 (yes/no) [no]:

これで、カスタムWordPressテーマの基礎ができました。 次のステップでは、テーマをビルドして起動し、Gitを使用してバージョン管理します。

ステップ3—カスタムWordPressテーマの構築と起動

このステップでは、すべてのビルド依存関係をインストールし、本番ビルドを作成して、ローカルのDockerコンテナーでWordPressを起動します。

Sageフォルダーに移動します。 

cd ./sage

インストールの失敗を防ぐために、node-sassバイナリをインストールします（package.jsonの残りの部分もインストールされます）： 

yarn add node-sass -D

すべてのSass/SCSSファイルをコンパイルし、CSSとJSを縮小する本番ビルドを実行します。 

yarn build:production

ビルドが生成されたら、テーマフォルダーを終了し、DockerComposeを使用してWordPressインスタンスを起動します。 

cd ..
docker-compose up -d

Docker環境でWordPressを起動するのに数秒しかかかりません。 次に、WebブラウザでURL http://localhost:8080を開いて、ローカルのWordPressサイトにアクセスします。 WordPressを起動するのはこれが初めてなので、管理者アカウントを作成するように求められます。 今すぐ作成してください。

アカウントを作成してログインしたら、ダッシュボードのAppearance>Themesページに移動します。 作成したばかりのSageテーマを含む、いくつかのプリインストールされたテーマがあります。 アクティブ化ボタンをクリックして、現在のテーマとして設定します。 ホームページは次のようになります。

これで、カスタムテーマを作成してアクティブ化できました。 次のステップでは、プロジェクトをバージョン管理下に置きます。

ステップ4—WordPressプロジェクトをリモートリポジトリにアップロードする

バージョン管理は、CI/CDワークフローの基礎です。 このステップでは、BuddyプラットフォームがアクセスできるリモートGitリポジトリにプロジェクトをアップロードします。 バディは、次のような多くの人気のあるGitプロバイダーと統合します。

  • GitHub
  • GitLab
  • Bitbucket
  • プライベートにホストされているGitリポジトリ

選択したプラットフォームにリモートリポジトリを作成します。 このガイドの目的のために、 GitHub。 Github UIを使用して新しいリポジトリを作成する方法を読むには、ここをクリックしてください 。

次に、ターミナルで、プロジェクトのリモートディレクトリでGitを初期化します。 

git init

新しく作成したリモートリポジトリを追加します。 強調表示されたセクションを独自のリポジトリのURLに置き換えます。 

git add remote https://github.com/user-name/your-repo-name.git

プロジェクトをプッシュする前に、バージョン管理から除外したいファイルがいくつかあります。

.gitignoreというファイルを作成します。 

nano .gitignore

次のファイル名を追加します。

./.gitignore 

.cache-loader
composer.phar
dist
node_modules
vendor

ファイルを保存して閉じます。

これで、バージョン管理下でプロジェクトを追加し、GitHubのリポジトリにファイルをコミットする準備が整いました。 

git add .
git commit -m 'my sage project'
git push

これで、Sageフレームワークを使用してカスタムWordPressテーマを作成し、コードをリモートリポジトリにプッシュしました。 次に、Buddyを使用して、このテーマのWordPressサーバーへの展開を自動化します。

ステップ5—バディによるWordPressデプロイメントの自動化

これまでにBuddyを使用したことがない場合は、Gitプロバイダーのクレデンシャルまたはメールアドレスを使用してにサインアップしてください。 リソースに制限のない14日間の試用版があり、5つのプロジェクトと120回の実行/月の無料プランがあります。これは私たちのニーズには十分すぎるほどです。

バディをリポジトリと同期することから始めます。 バディUIで、新しいプロジェクトの作成をクリックし、Gitプロバイダーを選択して、この記事の最初のセクションで作成したリポジトリを選択します。

次に、配信パイプラインを作成するように求められます。 パイプラインは、ビルド、テスト、デプロイなど、リポジトリコードでタスクを実行する一連のアクションです。

構成する主な設定は次のとおりです。

  • バディがコードをデプロイするBranch–この場合、コードをmasterに設定します
  • Pipeline trigger mode – On pushに設定すると、選択したブランチにプッシュするたびにパイプラインが自動的に実行されます。

パイプラインを追加したら、次の4つのアクションを作成する必要があります。

  1. 必要なPHPパッケージをインストールするPHPアクション
  2. 依存関係をダウンロードし、展開用のビルドを準備するNodeアクション
  3. ビルドコードをDOドロップレットに直接アップロードするドロップレットアクション
  4. テーマをアクティブ化するスクリプトを使用したSSHアクション。

リポジトリの内容に基づいて、バディは実行するアクションを自動的に提案します。 リストからPHPを選択します。

アクションをクリックすると、構成パネルが開きます。 端子セクションに次のコマンドを入力します。 

# navigate to theme directory
cd sage

# install php packages
composer validate
composer install

パイプラインを保存して実行し、機能することを確認します。

注： Buddyは、ビルドにフレームワークがプリインストールされた分離コンテナーを使用します。 ダウンロードされた依存関係はコンテナにキャッシュされます。つまり、再度ダウンロードする必要はありません。 チームの全員にとって一貫性のあるローカル開発環境と考えてください。


次に、Node.jsアクションを追加します。 テーマを正しく表示するには、アセットをコンパイルして縮小する必要があります。 SCSS/SASSおよびJavaScriptファイル。

まず、Environmentをnodelatestに設定します。

ここで、いくつかのコマンドを追加する必要があります。 これらのコマンドは、必要な依存関係をインストールし、ビルドを実行します。

前と同じように、それらをターミナルボックスに追加します。 

# navigate to theme directory
cd sage

# install packages
yarn install

# Create production build
yarn build:production

もう一度、アクションを保存して実行し、動作することを確認します。

次に、Node.jsビルドの直後にDropletアクションを追加します。 これまでにBuddyでDigitalOceanを使用したことがない場合は、統合をガイドするウィザードが表示されます。 この手順を完了したら、認証の詳細を次のように定義します。

  • ソースパスをsageに設定します。
  • バディのSSHキー認証モードを選択します。これが最も簡単に設定できるモードです。 SSH経由でDropletサーバーにログインし、バディのキーコードスニペットに表示されているコマンドを実行するだけです。

これらのコマンドを実行した後、ブラウザに戻り、リモートパス参照ボタンをクリックします。Dropletのファイルシステムに移動して、正しい展開フォルダにアクセスできます。 デフォルトのパスは/var/www/html/wp-content/themes/sageになります。

また、パスを無視セクションにアクセスし、Node.jsの依存関係がアップロードされないように以下を提供する必要があります。 

.cache-loader/
node_modules/

完了したら、テストアクションボタンをクリックして、すべてが正しく構成されていることを確認します。

最後に、 WP-CLI コマンドを使用して、WordPressドロップレットでテーマをアクティブ化するためのアクションをもう1つ追加します。 パイプラインページで、 SSH アクションを追加し、コマンドセクションに次のコマンドを入力します。 

sudo -u www-data -- wp theme activate sage/resources

正しい作業ディレクトリ設定を設定していることを確認してください。設定していないと、コマンドが機能しません。

以前のセットアップでBuddyのSSHキーをすでに構成しているので、他に何もする必要はありません。 または、プライベートSSHキーを選択してから、DigitalOcean秘密キーをアップロードし、それを使用してドロップレットに接続することもできます。 バディのSSHキーは、よりシンプルで安全です。

これで、完全なパイプラインに4つのアクションが含まれます：PHP> Node> Droplet>SSH。 パイプラインの実行ボタンをクリックして、すべてのアクションを一度にテストします。 各ステージに緑色のチェックマークが表示されます。

最初の実行時に、Buddyはすべてのファイルをリポジトリから選択したリビジョンにデプロイします。 将来の展開では、変更または削除されたファイルのみが更新されます。 この機能により、更新のたびにすべてを最初から展開する必要がないため、アップロード時間が大幅に短縮されます。

ホストされているWordPressダッシュボードに移動し、テーマページを更新します。 セージのテーマが表示されます。 今すぐアクティブにします。

これで、ホストされているホームページがローカルホームページと一致するようになります。

パイプラインが構築され、ローカルマシンとリモートマシンが同期されます。 それでは、ワークフロー全体をテストしてみましょう。

ステップ6—バディの自動展開ワークフローをテストする

このステップでは、テーマに小さな変更を加えてから、それらの変更をWordPressサーバーにデプロイします。

ローカルターミナルに戻り、次のyarnコマンドを実行します。 

yarn start

これにより、localhost:3000でライブプロキシ開発サーバーが起動します。 テーマに加えた変更は、このウィンドウに自動的に反映されます。 localhost:8080のページは、本番ビルドスクリプトを実行するまで変更されません。

CSSに小さな変更を加えて、パイプラインをテストしてみましょう。

Sageテーマのmain.scssファイルを開きます。 

nano ./sage/resources/assets/styles/main.scss

次のコードを挿入して、Webサイトのフォントに微妙な緑色と下線を導入します。

./sage/resources/assets/styles/main.scss 

.brand {
  @extend .display-3;

  color: #013d30;
}

.entry-title {
  @extend .display-4;

  a {
    color: #015c48;
    text-decoration: underline;
  }
}

.page-header {
  display: none;
}

ファイルを保存して閉じます。

これらの変更をコミットして、リポジトリにアップロードします。 

git add .
git commit -m "minor style changes"
git push

コードがリポジトリにアップロードされると、Buddyは自動的にパイプラインをトリガーし、すべてのアクションを1つずつ実行します。

パイプラインが終了するのを待ってから、WordPressDropletのホームページを更新して更新を確認してください。

これで、パイプラインは、ローカルマシンからGitHub、Buddy、本番WordPressサーバーへの変更をプッシュし、すべて1つのgitコマンドによってトリガーされます。

結論

バディは非常にユーザーフレンドリーで強力なCI/CDツールです。 Buddyには、インターフェースを使用してパイプラインを作成する速度を示すビデオもあります。

開発ワークフローを自動化することで、手動展開に時間を無駄にすることなく、カスタムテーマまたはプラグインのスタイルと機能の実装に集中できます。 CI / CDワークフローは、手動エラーのリスクを大幅に減らすこともできます。 さらに、自動化により、変更のたびに単体テストと PHP Sniffer などの分析ツールを実行することで、コードの品質をさらに高めることができます。

高度な分岐戦略とステージングサーバーを設定することで、このチュートリアルをさらに進めることができます。ステージングサーバーでは、新しいコードを運用サーバーにデプロイする前に品質管理チェックを実行できます。 このようにして、勢いを失うことなく、より良いソフトウェアをより頻繁にリリースできます。

「https://www.finddevguides.com/index.php?title=DigitalOceanとBuddyを使用してWordpressの展開を自動化する方法&oldid=105276」から取得
Powered by MediaWiki