使用Docker和npm脚本（Browsersync）创建WordPress编码环境

2 年 ago
韵, 科
3 minutes

为了将静态页面创建与npm-scripts（EJS、SCSS、JavaScript）合并到使用Docker进行WordPress构建的环境中，我查找了相关参考页面和步骤，并将其记录下来。

下载并安装Docker DesktopDocker官方

※对于macOS系统，需要注意的是，应用程序在Intel芯片和Apple芯片上是不同的。

1. 创建启动所需的文件

创建docker-compose.yml文件

version: '3'

services:

  db:
    # platform: linux/x86_64 # Appleシリコンに対応する場合
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci # MySQLの文字コードをUTF-8に指定
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"
    restart: always
    environment:
      TZ: 'Asia/Tokyo'
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:php7.4
    volumes:
      - ./wp:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_TABLE_PREFIX: wp_ # データベースの接頭辞
      WORDPRESS_DEBUG: 1 # WordPressのデバックモードON

  phpmyadmin:
    image: phpmyadmin:5.2.0
    volumes: # phpMyAdminの設定ファイル読み込み
      - ./phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini
    restart: always
    ports:
      - "8888:80"
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=wordpress
      - PMA_PASSWORD=wordpress

volumes:
    db_data: # データベースの永続化

不同软件版本的更改方法 de从每个软件的Docker Hub页面中查找标签，并修改docker-compose.yml文件中的图像部分。

WordPress标签| Docker Hub
MySQL标签| Docker Hub
phpMyAdmin标签| Docker Hub

根据上述内容，只需提供一种中文表达方式：

例：

image: wordpress:php7.4
image: wordpress:latest
image: wordpress:php8.1-apache

请参考。快速开始：使用Compose和WordPress—— Docker-docs-ja 20.10文档
【Docker】在本地搭建WordPress
在M1 Mac上使用Docker创建WordPress开发环境
登录到通过Docker启动的MySQL时遇到日文乱码问题。

创建一个phpmyadmin-misc.ini 文件。
为了更改phpMyAdmin的初始设置（例如，将数据库导入限制增加到最大2MB），需要创建phpmyadmin-misc.ini文件并进行设置写入。

allow_url_fopen = Off
max_execution_time = 600
memory_limit = 64M
post_max_size = 64M
upload_max_filesize = 64M

请参考Docker Compose PHPMyAdmin 上传限制放宽设置 | 优技录

2. Docker容器启动/关闭方法和WordPress安装方式

如何启动在启动Docker Desktop的情况下，

docker-compose up

只要在WordPress下载完成后，终端中显示以下消息，就可以访问localhost了。

Complete! WordPress has been successfully copied to /var/www/html

当您第二次及以后访问时，在显示以下信息时即可进行访问（不会显示”Complete!…”）。

Version: '5.7.40'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server (GPL)

WordPress的网址和首次安装

http://localhost:8000/

WordPress管理画面的网址

http://localhost:8000/wp-login.php

phpMyAdmin的地址

http://localhost:8888/

结束方式

Ctrl + C (これでphpMyAdmin停止)
↓
docker-compose down

3. 安装和启动Browsersync

创建package.json文件

npm init -y

安装Browsersync

npm i -D browser-sync

创建bs-config.js（Browsersync的配置文件）。

npx browser-sync init

例子如下。
例子如下。
这是一个例子。
这是一个例子。
以下是一个例子。
以下是一个例子。
给你一个例子。
给你一个例子。

module.exports = {
	"ui": {
		"port": 3001
	},
	"files": [
		"wp/**/*" // 監視したいフォルダに変更
	],
	"watchEvents": [
		"change"
	],
	"watch": false,
	"ignore": [],
	"single": false,
	"watchOptions": {
		"ignoreInitial": true
	},
	"server": false,
	"proxy": 'localhost:8000', // Dockerコンテナ起動時に使えるようになるlocalhostを指定
	"port": 3000,
	"middleware": false,
	"serveStatic": [],
	"ghostMode": {
		"clicks": true,
		"scroll": true,
		"location": true,
		"forms": {
			"submit": true,
			"inputs": true,
			"toggles": true
		}
	},
	"logLevel": "info",
	"logPrefix": "Browsersync",
	"logConnections": false,
	"logFileChanges": true,
	"logSnippet": true,
	"rewriteRules": [],
	"open": "internal",
	"browser": "default",
	"cors": false,
	"xip": false,
	"hostnameSuffix": false,
	"reloadOnRestart": false,
	"notify": false,
	"scrollProportionally": true,
	"scrollThrottle": 0,
	"scrollRestoreTechnique": "window.name",
	"scrollElements": [],
	"scrollElementMapping": [],
	"reloadDelay": 0,
	"reloadDebounce": 500,
	"reloadThrottle": 0,
	"plugins": [],
	"injectChanges": true,
	"startPath": null,
	"minify": true,
	"host": null,
	"localOnly": false,
	"codeSync": true,
	"timestamps": true,
	"clientEvents": [
		"scroll",
		"scroll:element",
		"input:text",
		"input:toggles",
		"form:submit",
		"form:reset",
		"click"
	],
	"socket": {
		"socketIoOptions": {
			"log": false
		},
		"socketIoClientConfig": {
			"reconnectionAttempts": 50
		},
		"path": "/browser-sync/socket.io",
		"clientPath": "/browser-sync",
		"namespace": "/browser-sync",
		"clients": {
			"heartbeatTimeout": 5000
		}
	},
	"tagNames": {
		"less": "link",
		"scss": "link",
		"css": "link",
		"jpg": "img",
		"jpeg": "img",
		"png": "img",
		"svg": "img",
		"gif": "img",
		"js": "script"
	},
	"injectNotification": false,
	"snippetOptions": {
		"rule": {
			"match": /<\/head>/i,
			fn: function (snippet, match) {
				return snippet + match;
			}
		}
	}
};

请参考
当BrowserSync无法自动重新加载时的解决方法。

在 package.json 中添加用于启动 Browsersync 的脚本。

{
  "name": "qiita-docker-wordpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:server": "browser-sync start --config bs-config.js" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.11"
  }
}

考试准备根据Node.js的版本，可能需要执行以下操作。
（该文章的版本为v19.3.0，无特殊错误。如果出现问题，终端将显示错误。）

    • package.jsonに”type”: “module”を追記

 

    bs-config.jsの拡張子を.cjsに変更

Browsersync的启动方法在已经启动Docker容器的情况下，输入以下命令以启动。

npm run start:server

请提供下列内容的中文原生版本，只需要给出一个选项：参考

浏览器同步文档
浏览器同步命令行

总结如果将你平时使用的编码环境整合在此处，我认为将能够顺利创建WordPress编码环境！以前我一直在使用XAMP、MAMP、Local等工具，但通过Docker进行共享使得这一过程变得非常轻松?

bannerAds