カテゴリー
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する①〜準備編
※ 当ページには【広告/PR】を含む場合があります。
2022/06/11
2022/08/19
☆Svelteの基礎が学べるオンライン講座☆ 【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発
Docker wordpressイメージの導入
リソースファイルの追加
my_wp
$ mkdir my_wp
$ cd my_wp
$ touch docker-compose.yml
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DATABASE}
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: ${WORDPRESS_DB_HOST}
WORDPRESS_DB_USER: ${WORDPRESS_DB_USER}
WORDPRESS_DB_PASSWORD: ${WORDPRESS_DB_PASSWORD}
volumes:
db_data:
.env
$ touch .env
.env
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
Docker Compose ビルド
$ docker-compose up -d
$ docker-compose ps
Name Command State Ports
-----------------------------------------------------------------------------------------------------------
sveltewordpress_db_1 docker-entrypoint.sh mysqld Up 3306/tcp, 33060/tcp
sveltewordpress_wordpress_1 docker-entrypoint.sh apach ... Up 0.0.0.0:8000->80/tcp,:::8000->80/tcp
http://localhost:8000
[日本語][次へ]
サイトのタイトル: ウェブサイトの概要等。例)svelte-wp-example
ユーザー名: ユーザー名。例)taco777@wp
パスワード: ログインパスワード。
メールアドレス: 連絡先となるEメールアドレス。例)hoge@tacoskingdom.com
検索エンジンでの表示: 今回はローカルなので関係のないオプション
[WordPressをインストール]
☆Svelteの基礎が学べるオンライン講座☆ 【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発
ローカル環境版のWordPressを使ってみる
$ docker-compose down
$ docker-compose up -d
http://localhost:8000
$ sudo ls /var/lib/docker/volumes | grep db_data
sveltewordpress_db_data
$ docker-compose down --volumes
管理者ダッシュボードへのログイン
http://localhost:8000/wp-admin
開発用DockerコンテナからWordpressの内部DBへのアクセス権限を設定する
/var/www/html.env
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
#👇以下を追記
WP_USER=<登録したユーザー名>
WP_AP_PASS=<ログインパスワード>
Wordpressのローカル開発用Dockerコンテナの構築
dev
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DATABASE}
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: ${WORDPRESS_DB_HOST}
WORDPRESS_DB_USER: ${WORDPRESS_DB_USER}
WORDPRESS_DB_PASSWORD: ${WORDPRESS_DB_PASSWORD}
#👇プラグイン拡張のためにVOLUMEの追加も行う
volumes:
- ./wordpress:/var/www/html
#👇Wordpressプラグイン開発用のコンテナ
dev:
image: wp_dev:node14.19
build: .
user: "node:node"
container_name: wp6-dev
environment:
NODE_ENV: ${NODE_ENV}
volumes:
- ./:/usr/src/app
stdin_open: true
working_dir: "/usr/src/app"
ports:
- "4200:4200"
tty: true
volumes:
db_data:
Wordpress REST API.env
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
WP_USER=<登録したユーザー名>
WP_AP_PASS=<ログインパスワード>
#👇以下を追記
NODE_ENV=development
dev
FROM node:14.19-alpine
RUN apk update && apk upgrade && \
apk add --no-cache bash openssh git ca-certificates wget curl
ENV PS1="[\u@\w]$"
CMD ["bash"]
$ tree
.
├── Dockerfile
├── .env
└── docker-compose.yml
$ docker-compose build
$ docker-compose up -d
$ docker-compose ps
NAME COMMAND SERVICE STATUS PORTS
svelte-wordpress-db-1 "docker-entrypoint.s…" db running 33060/tcp
svelte-wordpress-wordpress-1 "docker-entrypoint.s…" wordpress running 0.0.0.0:8000->80/tcp, :::8000->80/tcp
wp6-dev "docker-entrypoint.s…" dev running
wordpressフォルダを編集するための前処理
/var/www/html/var/www/htmlwordpress/var/www/htmlwordpresswordpresswww-data
$ ls -la wordpress/
合計 244
drwxr-xr-x 5 www-data www-data 4096 7月 3 17:49 .
-rw-r--r-- 1 www-data www-data 261 6月 10 12:47 .htaccess
-rw-r--r-- 1 www-data www-data 405 2月 6 2020 index.php
#...中略
-rw-r--r-- 1 www-data www-data 4748 4月 11 20:42 wp-trackback.php
-rw-r--r-- 1 www-data www-data 3236 6月 9 2020 xmlrpc.php
cat /etc/groupls -l
$ sudo chown -hR [ユーザー名]:[グループ名] wordpress
wordpressTewnty Twenty
Tewnty Twentywordpress/wp-content/themes/twentytwenty/style.css
$ cd wordpress/wp-content/themes/twentytwenty
#👇後で戻せるようにバックアップをコピー
$ cp style.css style.copy.css
#👇style.cssの中身を空っぽにする
$ cp /dev/null style.css
Svelteアプリ開発用のコンテナも構築する
wp6-devwordpress
$ docker-compose exec dev bash
[node@/usr/src/app]$ #...インタラクティブモードで以下作業する
$ ls -la wordpress/
total 244
drwxr-xr-x 5 node node 4096 Jul 3 08:49 .
-rw-r--r-- 1 node node 261 Jun 10 03:47 .htaccess
-rw-r--r-- 1 node node 405 Feb 6 2020 index.php
#...中略
-rw-r--r-- 1 node node 32051 Apr 11 11:42 wp-signup.php
-rw-r--r-- 1 node node 4748 Apr 11 11:42 wp-trackback.php
-rw-r--r-- 1 node node 3236 Jun 8 2020 xmlrpc.php
svelte-app
$ mkdir svelte-app && cd svelte-app
☆Svelteの基礎が学べるオンライン講座☆ 【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発
まとめ
その他のリンク記事
関連記事
【Svelte Framework入門】Svelteを使ってJavascript/CSSからSVG曲線チャートを描く
2022/08/19
ID#:140
Svelte Framework
【Svelte Framework入門】Svelteを使ってJavascript/CSSからSVG曲線チャートを描く
軽量Javascripフレームワーク『Svelte』を使って、綺麗な曲線チャートをSVGのPath要素で作成します。
クリックするとリンク先へ飛びます関連記事
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する②〜テーマ開発編
2022/08/19
ID#:168
Svelte Framework WordPress
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する②〜テーマ開発編
WordPressウェブサイトのローカル開発環境を使って、SvelteとWordPressを連携させたウェブサイトを構築してみます。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー