Raspberry Pi Webサーバーの構築
PageSpeed Insights Webサイトの高速化
その-4 サーバー応答時間の短縮(TTFB)
Raspberry Pi 4 4GBに サーバーをアップグレード
PageSpeed Insights Webサイトの高速化
その-4 サーバー応答時間の短縮(TTFB)
Raspberry Pi 4 4GBに サーバーをアップグレード
PageSpeed Insights で指摘された「改善できる項目」の中から、
その-1 テキスト圧縮の有効化。
その-2 レンダリングを妨げるリソースの除外。
その-3 Font Awesomeを ローカル使用に変更する。
その-1 テキスト圧縮の有効化。
その-2 レンダリングを妨げるリソースの除外。
その-3 Font Awesomeを ローカル使用に変更する。
と、ページ読込時間の短縮対策を打ってきた。
次に、トップに出てきたのが「サーバー応答時間の短縮(TTFB)」である。
次に、トップに出てきたのが「サーバー応答時間の短縮(TTFB)」である。
以下、サーバーのアップグレードを行った記録。
スポンサー リンク
目 次
スポンサー リンク
1. 移行環境
現行サーバーのスペック。
Raspberry Pi 3 Model B
SoC:Broadcom BCM2837 1.2 GHz ARM Cortex-A53
メモリ:1 GB LPDDR2
SoC:Broadcom BCM2837 1.2 GHz ARM Cortex-A53
メモリ:1 GB LPDDR2
Raspberry Pi 4 Model B 4GBのスペック。
Broadcom 2711, 1.5GHz quad-core ARM Cortex-A72 CPU
4 GB LPDDR4 memory SKUs
4 GB LPDDR4 memory SKUs
CPU スペック確認。
コマンド: lscpu
Architecture: armv7l
Byte Order: Little Endian
CPU(s): 4
On-line CPU(s) list: 0-3
Thread(s) per core: 1
Core(s) per socket: 4
Socket(s): 1
Vendor ID: ARM
Model: 3
Model name: Cortex-A72
Stepping: r0p3
CPU max MHz: 1500.0000
CPU min MHz: 600.0000
BogoMIPS: 108.00
Flags: half thumb fastmult vfp edsp neon vfpv3 tls vfpv4 idiva idivt vfpd32 lpae evtstrm crc32
Architecture: armv7l
Byte Order: Little Endian
CPU(s): 4
On-line CPU(s) list: 0-3
Thread(s) per core: 1
Core(s) per socket: 4
Socket(s): 1
Vendor ID: ARM
Model: 3
Model name: Cortex-A72
Stepping: r0p3
CPU max MHz: 1500.0000
CPU min MHz: 600.0000
BogoMIPS: 108.00
Flags: half thumb fastmult vfp edsp neon vfpv3 tls vfpv4 idiva idivt vfpd32 lpae evtstrm crc32
目的:
Raspberry Pi 4 に サーバーをアップグレードし、
サーバー応答時間の短縮(TTFB)を図る。
サーバー応答時間の短縮(TTFB)を図る。
TTFB。
TTFBとは
TTFB(Time To First Byte)は、「最初の1バイトが到着するまでの時間」のことで、 ブラウザがサーバーからのデータの最初のバイトを受け取るまでにかかる時間を指す。 この時間がページを表示するまでに要する時間になる。
TTFBには、ネットワークレイテンシが含まれる。
レイテンシ。
レイテンシとは
データ転送における指標のひとつで、転送要求を出してから実際にデータが送られてくるまでに生じる、通信の遅延時間のことをいう。
現行Webサーバーのバージョン。
Raspbian : Stretch Release date:2019-04-08
Nginx : Stable version 1.16.0
PHP : 7.3.6 - 2019.05.31
MariaDB : 10.1.38
Nginx : Stable version 1.16.0
PHP : 7.3.6 - 2019.05.31
MariaDB : 10.1.38
新Webサーバーのバージョン。
Raspbian : Buster with desktop Release date:2019-09-26
Nginx : Stable version 1.16.1
PHP : 7.3.12 - 2019.11.28
MariaDB : 10.3.17
Nginx : Stable version 1.16.1
PHP : 7.3.12 - 2019.11.28
MariaDB : 10.3.17
★:2019.12.04 4:00 C/O。
インストールできる nginx のバージョンを確認する
Raspbian stretch の、デフォルトパッケージリポジトリを使用してインストールできる、nginx のバージョンを確認する方法。
sudo apt-get update
sudo apt-cache policy nginx
sudo apt-cache policy nginx
Nginx の公式サイトで、最新版(Stable version)を確認する。
2. Pi 4 Raspbian Buster の セットアップ
Raspbian(Buster) の インストール:
Raspberry Pi の セキュリティ設定:
Raspberry Pi の 最適化:
3. nginx のインストール
nginx ソースの公式リポジトリを追加した後、パッケージ・リストの更新を行ってから、debian用の stableの最新版nginx をインストールする。
1. nginx公式リポジトリの鍵を登録。
wget http://nginx.org/keys/nginx_signing.key
sudo apt-key add nginx_signing.key
sudo apt-key add nginx_signing.key
2. nginx公式のリポジトリを登録。
sudo nano /etc/apt/sources.list
下記を追記。(注意:赤字は Raspbian のバージョン)
deb http://nginx.org/packages/debian/ buster nginx
deb-src http://nginx.org/packages/debian/ buster nginx
deb http://nginx.org/packages/debian/ buster nginx
deb-src http://nginx.org/packages/debian/ buster nginx
3. arm用のパッケージが配布されていないので、ソースからビルドしてパッケージを作る。赤字の箇所は、バージョンに応じて変更する。
sudo apt-get update
sudo apt-get build-dep nginx
ソースの入手
sudo apt-get source nginx
ソースコードからバイナリパッケージを生成
cd nginx-1.16.1
sudo dpkg-buildpackage -uc -b
cd
パッケージのインストール
sudo dpkg -i nginx_1.16.1-1~buster_armhf.deb
sudo apt-get build-dep nginx
ソースの入手
sudo apt-get source nginx
ソースコードからバイナリパッケージを生成
cd nginx-1.16.1
sudo dpkg-buildpackage -uc -b
cd
パッケージのインストール
sudo dpkg -i nginx_1.16.1-1~buster_armhf.deb
nginx のバージョン確認。
nginx -v
nginx version: nginx/1.16.1
nginx version: nginx/1.16.1
nginxの起動と確認。
sudo systemctl restart nginx
sudo systemctl status nginx
sudo systemctl status nginx
4. PHP のインストール
Raspbian Buster の、デフォルトパッケージリポジトリでは【PHP の候補 7.3】だが、開発元よりインストールした。
su で root にして実行
# apt -y install apt-transport-https lsb-release ca-certificates
# curl -ssL -o /etc/apt/trusted.gpg.d/php.gpg https://packages.sury.org/php/apt.gpg
# sh -c 'echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list'
# apt update
最小限 php7.3-fpm と php7.3-dev だけでよいか迷ったが、WordPressを移行するためのツールも考慮して、ほとんどをインストールした。
sudo apt-get install php7.3 php7.3-fpm php7.3-mysql php7.3-mbstring php7.3-xml php7.3-gd php7.3-curl
PHP のバージョン確認。
php -v
5. nginx で PHP を利用できるように設定
/etc/nginx/conf.d/default.conf を rename しバックアップ。
cd /etc/nginx/conf.d/
sudo cp default.conf default.conf.org
sudo cp default.conf default.conf.org
/etc/nginx/conf.d/default.conf の編集。
cd
sudo nano /etc/nginx/conf.d/default.conf
sudo nano /etc/nginx/conf.d/default.conf
/home/yaopi/arakan60 を root にした例。
## root の変更、index.php の追加 ##
location / {
root /home/yaopi/arakan60;
index index.html index.htm index.php;
}
## root と fastcgi_param の部分にルートディレクトリを設定 ##
location ~ .php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /home/yaopi/arakan60$fastcgi_script_name;
include fastcgi_params;
}
php-fpm.conf の編集。
sudo nano /etc/php/7.3/fpm/php-fpm.conf
# コメントを外して有効化
;daemonize = yes
↓
daemonize = yes
;daemonize = yes
↓
daemonize = yes
pool.d/www.conf の編集。
sudo nano /etc/php/7.3/fpm/pool.d/www.conf
# user と group をnginxに変更
user = www-data
group = www-data
↓
user = nginx
group = nginx
user = www-data
group = www-data
↓
user = nginx
group = nginx
# パスを修正
listen = /run/php/php7.3-fpm.sock
↓
listen = /var/run/php/php7.3-fpm.sock
listen = /run/php/php7.3-fpm.sock
↓
listen = /var/run/php/php7.3-fpm.sock
# listen.owner と listen.group をnginxに変更
listen.owner = www-data
listen.group = www-data
↓
listen.owner = nginx
listen.group = nginx
listen.owner = www-data
listen.group = www-data
↓
listen.owner = nginx
listen.group = nginx
# listen.modeのコメントを外して、一部変更
;listen.mode = 0660
↓
listen.mode = 0666
340行目:request_terminate_timeout = 600
;listen.mode = 0660
↓
listen.mode = 0666
340行目:request_terminate_timeout = 600
etc/php/7.3/fpm/php.ini の編集。(各種サイズの編集が必要)
sudo nano /etc/php/7.3/fpm/php.ini
0380行目:max_execution_time = 600
0401行目:memory_limit = 512M
0689行目:post_max_size = 512M
0708行目:default_charset = "UTF-8"
0793行目:cgi.fix_pathinfo = 0
0832行目:file_uploads = On
0841行目:upload_max_filesize = 512M
0852行目:allow_url_fopen = On
0956行目:date.timezone = Asia/Tokyo
1653行目:mbstring.language = Japanese
0401行目:memory_limit = 512M
0689行目:post_max_size = 512M
0708行目:default_charset = "UTF-8"
0793行目:cgi.fix_pathinfo = 0
0832行目:file_uploads = On
0841行目:upload_max_filesize = 512M
0852行目:allow_url_fopen = On
0956行目:date.timezone = Asia/Tokyo
1653行目:mbstring.language = Japanese
※:upload_max_filesize ≦ post_max_size ≦ memory_limit。
nginx/nginx.conf の編集。
sudo nano /etc/nginx/nginx.conf
27行目:keepalive_timeout 600;
27行目:keepalive_timeout 600;
以上の設定ファイルを、手で編集するのが面倒だったので、
「現行サーバーのファイルをアップロード」
してみたが、上手くいかなかった。
「現行サーバーのファイルをアップロード」
してみたが、上手くいかなかった。
※:SSL化への対処
Let’s Encrypt の証明書で nginx を HTTPS化し SSL通信にしている場合、次の作業が必要。
①.証明書と秘密鍵のアップロード。
Let’s Encrypt で「SSL化」している場合、証明書と秘密鍵が
/etc/letsencrypt/live/***URL***/ にアップロードされている。
このフォルダーを、新サーバーにもアップロードする必要がある。
/etc/letsencrypt/live/***URL***/ にアップロードされている。
このフォルダーを、新サーバーにもアップロードする必要がある。
②./etc/nginx/nginx.conf の編集。
参考:「SSLなう! 」によるSSL化。
確認。(※:PHPの再起動を忘れないようにする。)
php-fpmのサービスを再起動
sudo systemctl restart php7.3-fpm.service
OS起動時に自動で起動するように設定
sudo systemctl enable php7.3-fpm.service
所有者がnginxになっているか確認
sudo chown -R nginx:nginx /var/run/php/php7.3-fpm.sock
Nginxの設定ファイルに問題が無いかチェック
sudo nginx -t ・・・ この時点ではOK
設定再読み
sudo nginx -s reload
Nginx再起動
sudo systemctl restart nginx
自動起動設定
sudo update-rc.d nginx defaults
sudo systemctl restart php7.3-fpm.service
OS起動時に自動で起動するように設定
sudo systemctl enable php7.3-fpm.service
所有者がnginxになっているか確認
sudo chown -R nginx:nginx /var/run/php/php7.3-fpm.sock
Nginxの設定ファイルに問題が無いかチェック
sudo nginx -t ・・・ この時点ではOK
設定再読み
sudo nginx -s reload
Nginx再起動
sudo systemctl restart nginx
自動起動設定
sudo update-rc.d nginx defaults
6. MariaDB のインストール
ルート権限でインストール。
su
apt-get install mariadb-client mariadb-server
apt-get install mariadb-client mariadb-server
MariaDB Serverのバージョンを確認する。
dpkg -l | grep -i mariadb
MariaDB のインストール時点での、root アカウントのパスワード設定がなくなったので、【mysql_secure_installation】で設定。
mysql_secure_installationの実行。
su ルート権限で実行
# mysql_secure_installation
Enter current password for root (enter for none):
← enterで次へ
← enterで次へ
Change the root password? [Y/n] y
xxxxxxxx
xxxxxxxx
Remove anonymous users? [Y/n] y
Disallow root login remotely? [Y/n] y
Remove test database and access to it? [Y/n] y
Reload privilege tables now? [Y/n] y
Thanks for using MySQL
7. WordPress用のデータベースを作成
ルート権限で実行。
sudo su
mysql -u root
MariaDB [(none)]> use mysql
データベースの作成。
MariaDB [mysql]> create database dbname;
作成したデータベースに、ユーザー名とパスワードを設定。
MariaDB [mysql]> grant all on dbname.* to username@localhost identified by'password';
MariaDB [mysql]> flush privileges;
MariaDB [mysql]> exit
MariaDB [mysql]> exit
作成されたデータベースを確認する場合。
MariaDB [(none)]> use mysql
MariaDB [mysql]> show databases;
MariaDB [mysql]> show databases;
以上で、WordPressを導入する環境が整った。
8. WordPressのダウンロードと設置
wgetコマンドで、最新のWordPress日本語版をダウンロードして展開する。
最初に、ダウンロードするディレクトリを作成し、権限を変更した後ディレクトリ移動しておく。ここでは、「work」を作成した。
mkdir /home/yaopi/work
sudo chmod 707 /home/yaopi/work
cd /home/yaopi/work/
wget https://ja.wordpress.org/latest-ja.tar.gz
tar -xzvf latest-ja.tar.gz
sudo chmod 707 /home/yaopi/work
cd /home/yaopi/work/
wget https://ja.wordpress.org/latest-ja.tar.gz
tar -xzvf latest-ja.tar.gz
展開すると、「work」の中に wordpress フォルダーが作成されるので、この中身をすべて、Nginxの公開ディレクトリ /home/yaopi/arakan60 の中に設置する。( wordpress の URL: 192.168.nn.nnn/arakan60 となる。)
ルートディレクトリー:/home/yaopi/arakan60
★ ルートディレクトリーに、直接 WordPress の中身を設置。
★ このために、「work」に出来た「wordpress」を一旦ダウンロード。
★ その後、「wordpress」の中身だけを「arakan60」にアップロード。
★ ルートディレクトリーに、直接 WordPress の中身を設置。
★ このために、「work」に出来た「wordpress」を一旦ダウンロード。
★ その後、「wordpress」の中身だけを「arakan60」にアップロード。
★ この後、元の「work」にある「wordpress」ファイは削除。
9. 本番環境でのWordPressの移行
自宅内サーバーを、独自ドメインでSSL化して運用している場合、WordPressのURLにアクセスするには、『パーマリンク設定』と合わす為にIPアドレスを本番環境にせざるを得ないので、以下の作業は本番のIPアドレスにして作業する。
①.WordPressのインストール
②.ダウンロードしたファイルのアップロード
③.Duplicator による WordPressの移行
WordPressの移行:
10. Pi 4 4GBに アップグレードした効果
「サーバー応答時間の短縮(TTFB)」での、『PageSpeed Insights』の評価スコアの変化。「32」から「52」に、「20」ポイントも上がった。
「サーバー応答時間の短縮(TTFB)」での、ラボデータの変化。速度インデックスが「9.1秒」から「5.6秒」になった。
「サーバー応答時間の短縮(TTFB)」での、改善できる項目の変化。「1.41s」から「0.44s」になった。
PageSpeed Insights 【Webサイトの高速化】 対策
その-1 テキスト圧縮の有効化
その-2 レンダリングを妨げるリソースの除外
その-3 Font Awesomeを ローカル使用に変更する
その-4 サーバー応答時間の短縮(TTFB)
その-5 キャッシュによる サイトの高速化
その-6 ブラウザキャッシュの有効化
その-7 適切なサイズの画像(画像ファイルの圧縮)
その-8 オフスクリーン画像の遅延読み込みプラグイン
その-9 ウェブフォント読み込み中のテキストの表示
その-10 第三者コードの影響を抑えてください
その-2 レンダリングを妨げるリソースの除外
その-3 Font Awesomeを ローカル使用に変更する
その-4 サーバー応答時間の短縮(TTFB)
その-5 キャッシュによる サイトの高速化
その-6 ブラウザキャッシュの有効化
その-7 適切なサイズの画像(画像ファイルの圧縮)
その-8 オフスクリーン画像の遅延読み込みプラグイン
その-9 ウェブフォント読み込み中のテキストの表示
その-10 第三者コードの影響を抑えてください
以上。
(2019.12.04)
(2019.12.04)
スポンサー リンク