カテゴリー
開発環境 ホームページ製作

wordpressをdockerに複製する

wordpressサイトを自分のパソコンのdockerにコピーする

  1. レンタルサーバー(mixhost)にあるwordpressのコピーサイトを作る。
    1. コピーしたサイトで設定→表示設定より、検索エンジンがサイトをインデックスしないようにする。
    2. 簡単にログインできるよう、新規に管理者を作る。
    3. All-in-One WP Migrationをプラグインで入れる。
    4. 不要なプラグインを無効化し、削除する。
    5. All-in-One WP Migrationの高度なオプションで、メディアライブラリをエクスポートしない、テーマをエクスポートしないにチェックを入れ、エクスポート先をファイルにしてエクスポート。
    6. メディアが入っているuploadフォルダをダウンロード。
    7. 自作テーマが入っているフォルダをダウンロード。
  2. 自分のパソコンに入っているdockerでwordpressを立ち上げる。
    1. 自分のパソコンに専用フォルダを作り、そのフォルダからdockerを起動し、wordpressを入れる。

      npm i @wordpress/env –save-dev
    2. そのフォルダのpackage.jsonに書き込む。

      “scripts”: {“wp-env”: “wp-env”}
    3. そのフォルダに.htaccessファイルを作り、書き込む。

      php_value upload_max_filesize 128M
      php_value post_max_size 128M
      php_value memory_limit 256M
      php_value max_execution_time 300
      php_value max_input_time 300

      【参考サイト】
      https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
    4. そのフォルダにwp-contentフォルダを作り、ダウンロードしたuploadフォルダと自作テーマフォルダを入れる。
    5. そのフォルダに.wp-env.jsonを作り、書き込む。

      {“plugins”: [    “https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.44.zip”  ],
      “themes”: [ “./wp-content/themes/自作テーマフォルダ” ],
      “mappings”: {“.htaccess”: “./.htaccess”,”wp-content/uploads”: “./wp-content/uploads”}
      }

      【参考サイト】
      https://qiita.com/akinov/items/5554cad0aaedb53e5aed
    6. wp-envでwordpressを立ち上げる。自然と同期される。

      npm run wp-env start

      【参考サイト】
      https://tomosta.jp/blog/wordpress%E3%81%AE-docker%E7%92%B0%E5%A2%83%E3%81%8C%E7%B0%A1%E5%8D%98%E3%81%AB%E3%80%82wp-env%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/
    7. wordpressにログインし、日本語設定に変更する。
  3. dockerのwordpressの作業。
    1. All-in-One WP Migrationを有効化し、インポートファイル容量が128MBになっていることを確認する。2MBだったら、同期がうまくいってないので、.htaccessファイルを確認。
    2. All-in-One WP Migrationのエクスポートファイルを実際にインポートする。
    3. インポート後、ログアウトし、最初に作った管理者でログインできるかどうか確認する。
    4. wordpressサイトが表示されるか確認する。
    5. 固定ページが表示されるか確認する。されない場合、設定→パーマリンク設定の変更保存をクリック。
    6. All-in-One WP Migrationを無効化して、終了。

カテゴリー
開発環境 ホームページ製作

docker基本操作

docker内容の確認

イメージ数とコンテナ数とボリューム数とキャッシュ数の確認

docker system df

一番目に削除

コンテナ確認
docker ps -a

コンテナをを全部止める
docker stop $(docker ps -q)

コンテナ削除
docker rm コンテナID

コンテナ全削除 一括削除
docker rm $(docker ps -q -a)

二番目に削除

イメージ確認
docker images

イメージ削除
docker rmi イメージID

イメージ全削除 一括削除
docker rmi $(docker images -q)

三番目に削除

ボリューム確認
docker volume ls

ボリューム全削除 一括削除
docker volume prune

四番目に削除

キャッシュ全削除 一括削除
docker system prune

dockerの三要素

  • イメージ
  • コンテナ
  • ボリューム

参考になったサイト

https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes-ja

カテゴリー
開発環境 ホームページ製作

webpack5のsassにおけるfontawesome

webpack5で、sassのfontawesomeを使うには、npmでダウンロードもできるが、直接ダウンロードのほうが分かりやすく、設定しやすい。

使い方については、下記リンク先を参照にすること。

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

https://qiita.com/oreo3@github/items/08a350520a1f0eaf6e42

https://helog.jp/framework/bootstrap-sass-customize/

https://web.analogstd.com/tips/posts/css/how2use-font-awesome5.php

下記も参考になりそう

カテゴリー
開発環境 ホームページ製作

style.cssとインラインスタイルシートはどちらが速いか

Webpack5で、style.cssとインラインスタイルシートでは、どちらが速いか、高得点になるかを試してみた。条件は下記。

  • ホームページのソースの量は、ほとんどなし。
  • fontawesomeを使う。
  • サーバーは忍者ツールズの無料ホームページ。
  • 審査はグーグルのPageSpeed Insights。

まずは、style.css。style.cssとmain.jsに分割される。

結果は、62点。

次にインラインスタイルシート。webpack5でmain.jsにcssも全てバンドルされる。

結果は、50点。

忍者ツールズの無料ホームページは、広告用のjsファイルがついてくるので、それが遅延の原因になっている可能性があるな。だから、忍者ツールズの無料ホームページでは、jsファイルとcssファイルは別にしたほうがいいのだろう。

【後日談】
http://toushin.konjiki.jp/ というサイトで試してみたら、jsファイルとcssファイルを分割したほうが遅かった。

カテゴリー
開発環境

webpack5とwebpack.config.jsの設定

webpackの設定については、下記リンク先を参照。

https://ajike.github.io/webpack_scss/

http://toushin.konjiki.jp/ というサイトを、Webpack5を使いリニューアルしてみた。package.jsonとwebpack.configの設定でいろいろ考えた結果、下記のようになった。

npmでbootstrap、jqueryは最新版を入れる。bootstrapは4.5.3、jqueryは3.5.1を入れたはずなのに、ChromeのWappalyzerではbootstarpは4.1.3、jqueryは3.3.1と表示される。分からん。

{
  "name": "new11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^5.0.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

cssはscssで作る。cssファイルは出力せず、jsとバンドルする設定。

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js",
  },

  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  
  devServer: {
    contentBase: "dist",
    open: true
  },
  

  module: {
    rules: [
      {
        // Sassファイルの読み込みとコンパイル 
        test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子 
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          // CSSをバンドルするための機能
          {
            loader: "css-loader",
            options: {
              // オプションでCSS内のurl()メソッドの取り込まない
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2,
            },
          },
          // PostCSSのための設定
          {
            loader: "postcss-loader",
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
              postcssOptions: {
                // ベンダープレフィックスを自動付与する
                plugins: ["autoprefixer"],
              },
            },
          },
          // Sassをバンドルするための機能
          {
            loader: "sass-loader",
            options: {
              // ソースマップの利用有無
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};