EC2のWordPressを独自ドメインで表示させたい
前回の記事で作ったEC2インスタンスによるWordPressを独自ドメインで表示させたいです。
というのも、前回までの手順では、IPアドレスでしかアクセスできなかったんです。
独自ドメインで表示させるまでの手順を書いていきます。
ちなみに独自ドメインをRoute53で取得すると、お金がかかりますので注意してください。
①固定IPアドレスを割り当てる
前提として、前回の記事のIPアドレスは動的（EC2インスタンスを停止して起動すると変わってしまうもの）です。
なので静的（変わらないもの）にしたいです。
そこで利用するのがEC2の中の「Elastic IP」という機能です。
直訳すると「静的IP（アドレス）」です。
実際にやっていきます。
まずEC2のダッシュボードを開き、左のメニューからElastic IPを開きます。
「Elastic IPアドレスの割り当て」をクリック。
特に何も設定を変えずに「割り当て」をクリック。
これでIPアドレスが確保されました。
Elastic IPの画面で、該当のIPアドレスを選択し、アクションを押します。
その中にあるメニューから「アドレスの関連付け」をクリック。
インスタンスにWordPressのインスタンスを選択し、「関連付け」をクリック。
これで割り当てが完了します。
Elastic IPの一覧画面でWordPressのインスタンスが割り当てられていることが確認できます。
またWordPressのインスタンス側からも、Elastic IPが、いま割り当てたものになっていることがわかります。
そしてこれからSSH接続するときは、この静的な新しいIPアドレスで接続しなくてはなりません。
元々のIPアドレスは使えなくなります。
静的IPアドレスをURL欄に入れてみると、WordPressが表示されます。
表示されない方はブラウザのクッキー削除などしてみてください。
WordPressの表示崩れ
ここで1点注意ですが、WordPressの表示が崩れています。
修正方法ですが、/var/www/html/wp-config.phpを開いて、1行目の「
<?php define('WP_HOME','http://12.34.56.78'); define('WP_SITEURL','http://12.34.56.78'); （中略）
これを挿入することで崩れがなくなります。
ここでももし直らなければ、クッキー削除してみてください。
②ドメインを取得する
「Route53」というAWSのサービスでできます。
やってみましょう。
AWSマネジメントコンソールからRoute53のダッシュボードを開きます。
「ドメインの登録」をクリック。
ドメイン名を決めますが、ここでは「awsbookexample●●.com」とします。
「●●」には適当な数字を当てはめてください。
「.com」は人気のTLD（top-level-domain）なので値段が高いみたいです。
ドメインをカートに入れ、「続行」を押します。
年数を決定して「続行」をクリック。
連絡先をもろもろ入力して、「続行」をクリック。
ちなみに日本の電話番号は先頭は「+81」です。
そのあとに続けて「0」をつけていない電話番号を入力します。
メールが来るので、URLをクリックしてドメイン取得の承認をします。
確認画面が表示されるので、同意チェックボックスにチェックを入れ、規約に同意します。
これでドメインの申請が完了です。
「ドメイン一覧」みたいなボタンがあるのでクリックすると、申請中である旨が表示されます。
③IPアドレスとドメインを関連付ける
先ほどRoute53からドメイン申請をした場合、そのドメインがホストゾーンに登録されているはずです。
ちなみにホストゾーンへの反映には少し時間がかかるみたいなので、出てなかったら待ちましょう。
表示されていたら、ドメイン名をクリックします。
「レコードを作成」をクリック。
レコードの登録画面が表示されるので、Aレコード（ドメインをIPアドレスに置き換えるレコード）を登録していきます。
下記のように登録していきます。
ホスト名：blogs
タイプ：A-IPv4 address
バリュー：手順①で設定したElastic IPアドレス
上記を設定したら、「作成」をクリック。
以上で設定は完了です。
ブラウザのURL欄に「http://blogs.awsbookexample●●.com」と入力すると、WordPressが見られるはずです。
ちなみに自分はAレコードの設定後は10分くらい待たないと表示されなかったです。
表示できましたでしょうか。
EC2のLAMP環境でWordPressを動かしてみた
AWSのEC2を触ってみたいなと思って、下記の書籍を購入しました。
懇切丁寧にEC2の概要やLAMP環境でWordPressを動かす手順が書いてあります。
今回は復習がてらその手順を記していこうと思います。
【自分の環境】
macOS Catalina
AWSアカウント作成済み
手順の確認
手順は3つです。
①EC2インスタンスをデフォルトのサブネットに配置する
②SSHで接続する
③Apache・PHP・MariaDB・WordPressのインストール
これだけでパブリックIPアドレスのURLでWordPressが使えます。
若干長くなりそうですが、書いていきます。
①EC2インスタンスをデフォルトのサブネットに配置する
まずEC2インスタンスを作ります。
EC2インスタンスを作るにあたって、いろんな要素が必要になりますので、以下に記します。
AMI：Amazon Linux 2
インスタンスタイプ：t2.micro
リージョン：東京
VPS：デフォルトのVPC
サブネット：優先順位なし
ストレージ：8GBのSSD
EC2インスタンスの名称：WordPressWebServer
セキュリティグループ：my-webserver-sg
それでは、AWSマネジメントコンソールを開いて、EC2ダッシュボードを開きます。
リージョンを確認して、東京になっているか確認します。
左にあるインスタンスをクリックして、インスタンス一覧を表示してください。
オレンジ色の「インスタンスを起動」をクリックします。
ステップ①AMI（Amazon Machine Image）に一番上の「Amazon Linux 2」を選択。
ステップ②インスタンスタイプに「t2.micro」を選択。
ステップ③インスタンスの詳細設定で、(1)ネットワーク(2)サブネット(3)自動割り当てパブリックを、それぞれ(1)●●●デフォルト(2)優先順位なし(3)サブネット設定を使用とする。
※自分の時はデフォルトでなってました。
ステップ④ストレージの追加で「8GBのSSD」を選択。
ステップ⑤タグの追加では、インスタンスの名称を設定するため、「クリックしてNameタグを追加します」をクリック。
「値」の部分に「WordPressWebServer」を入力。
ステップ⑥セキュリティグループの設定で、(1)ラジオボタン「新しいセキュリティグループを作成する」を選択し、(2)セキュリティグループ名は「my-webserver-sg」、説明は「HTTP/HTTPS enable」と入力する。
またセキュリティグループの設定では、デフォルトでSSHしかないので、HTTPとHTTPSを追加します。
やり方は「ルールの追加」をクリックして、プルダウンの「HTTP」「HTTPS」をそれぞれ選びます。
ここまで来たら、「確認と作成」を押します。
今までの設定が出るので、間違いなかったら「作成」を押します。
最後に「既存のキーペアを選択するか、新しいキーペアを作成します。」と出ます。
1台目のEC2インスタンスの場合、キーペアはないので、新しく作成します。
プルダウンで「新しいキーペアの作成」を選択し、キーペア名を「myserverkey」とします。
次に「キーペアのダウンロード」を押します。
これで「myserverkey.pem」というキーペアファイルがダウンロードされます。
ここでダウンロードしておかないと、このEC2インスタンスにログインできなくなります。
必ずやっておきましょう。
「インスタンスの作成」を押して数分経つと、インスタンスが起動します。
あとやっておきたいのが、インスタンス情報の確認です。
インスタンスIDをクリックすると、「パブリック IPv4 アドレス」や「パブリック IPv4 DNS」が確認できます。
これらはSSH接続時に使うので、すぐ使えるように控えておくといいみたいです。
これで「①EC2インスタンスをデフォルトのサブネットに配置する」は終了です。
②SSHで接続する
ようやく手順②です。
macOS（ターミナル）でSSH接続する手順を書いていきます。
①ダウンロードしたキーペアファイルを~/.ssh以下に移動し、権限変更します。
下記をターミナルで打ってください。
mv /Users/username/Downloads/○○.pem ~/.ssh chmod 600 /Users/username/.ssh/○○.pem
上記の「username」はご自身のmacOSの名前にしてください。
また「○○.pem」は「myserverkey.pem」にしてください。
これで鍵を移動し、鍵の権限変更がされます。
要は使えるようになったかんじです。
②ターミナルからSSH接続する
SSH接続してみます。
ssh -i /Users/username/.ssh/○○.pem ec2-user@パブリック IPv4 アドレス
上記も先ほどのように書き換えてください。
実際に書くと以下のようなかんじです。
ssh -i /Users/sassamori/.ssh/myserverkey.pem ec2-user@12.34.56.78
これでSSH接続できるはずです。
あと重要なのがrootユーザーでインストールは行なっていくことです。
一般ユーザーではインストールが行えないです。
rootユーザーに成り上がるには下記をコマンドします。
sudo -i
これでrootになるはずです。
rootをやめたかったら、「exit」と打ちましょう。
「②SSHで接続する」は以上です。
③Apache・PHP・MariaDB・WordPressのインストール
あとはどんどんインストールしていきます。
まずApacheです。
Apacheのソフト名は「httpd」なので、下記を打ち込みます。
yum install httpd
途中で「Is this ok [y/d/N]」と「本当にダウンロードしていいですか？」と聞かれるので、「y」（YES）と答えましょう。
Apacheがインストールされます。
あと忘れがちですが、起動もしましょう。
下記で起動できます。
systemctl start httpd
何も応答がないですが、下記でステータスの確認ができます。
systemctl status httpd
これで途中に「active(running)」とあればOKです。
今の時点でブラウザ確認ができるようになりました。
ブラウザを開いて、URL欄にパブリック IPv4 アドレスを入力してください。
Apacheののテストページが出るはずです。
次にPHPのインストールです。
yum install php
たぶんphp5.4が入ります。
次にWordPressの動作に必要なライブラリをインストールします。
3つあり、(1)php-mysql(2)php-mbstring(3)php-gdを入れていきます。
yum install php-mysql php-mbstring php-gd
上記のようにスペース区切りにすると、まとめてインストールできます。
忘れがちですが、PHPを有効にするためにApacheを再起動します。
systemctl restart httpd
次にMariaDBのインストールです。
これはちょっと面倒かもしれないです。
まず以下をコマンドします。
yum install mariadb mariadb-server
今度は下記でMariaDBを起動します。
systemctl start mariadb
ここからMariaDBを初期設定していきます。
mysqlコマンドを使っていきます。
mysql -u root -p
こうすると、パスワードを求められますが、空欄で入れます。
コマンド練習とセキュリティのためrootパスワードを変更しましょう。
update mysql.user set password=password('あなたのパスワード') where user = 'root'; flush privileges;
これはSQL文で、パスワードを変更する命令です。
ここからはデータベースを作成していきます。
以下の設定内容になります。
ユーザー名：wordpress
パスワード：mypassword
データベース名：wordpressdb
まずユーザーを作ります。
「wordpress」というユーザーで、「mypassword」というパスワードです。
create user 'wordpress'@'localhost' IDENTIFIED BY 'mypassword';
次にデータベースを作成します。
create database wordpressdb;
最後に権限を設定します。
作成したユーザーに、作成したデータベースの全権限を与えます。
grant all privileges on wordpressdb.* to 'wordpress'@'localhost'; FLUSH PRIVILEGES;
設定完了です。
確認としては、「show databases;」と打ってみて、「wordpressdb」というデータベースが存在するかどうかで見られます。
確認を終えたら、「exit」と打ち、mysqlコマンドからログアウトします。
そしていよいよWordPressをインストールします。
まず作業用のディレクトリを/homeに作って、wordpressディレクトリに移動します。
/homeディレクトリはrootディレクトリから1階層上がったところにあると思います。
mkdir /home/wordpress cd /home/wordpress
ここにWordPressをダウンロードします。
自分の環境だと最新版だと動かなかったので、WordPress5.0.7を入れました。
wget https://wordpress.org/wordpress-5.0.7.tar.gz
ダウンロードしたファイルを展開します。
tar xzvf wordpress-5.0.7.tar.gz
mv wordpress/* /var/www/html/
次にApacheユーザーに/var/www/htmlディレクトリ書き込み権限を与えます。
chown apache.apache -R /var/www/html chmod +w -R /var/www/html
ここからはブラウザ操作です。
URL欄に「http://パブリック IPv4 アドレス/wp-admin/install.php」を入力し、アクセスします。
普通に行けば、WordPressのインストールページに行きます。
日本語を選択し、「続ける」をクリック。
「さあ、始めましょう」をクリック。
次にデータベース名などの入力をします。
下記のように入力してください。
データベース名：wordpressdb
ユーザー名：wordpress
パスワード：mypassword
データベースのホスト名：localhost
テーブル接頭辞：wp_
うまく行けば、インストールの実行をクリック。
WordPressの初期設定が始まります。
ブログのタイトルやユーザー名、パスワードなどを入力します。
パスワードはログインで必要なので、どこかに控えておきましょう。
入力したら、「WordPressをインストール」を押します。
ログインをして、ダッシュボードが表示されます。
パブリック IPv4 アドレスをURL欄に打ち込むと、「Hello World!」とWordPressのトップページが出てくるはずです。
これで完了です。
あとはWordPressの領域となります。
CakePHP3・Herokuでfileログを見たい
CakePHP3・Herokuでfileログを見たいって時ありますよね。
前回はconsoleログでしたので、今回はfileログの見方を説明します。
とはいえ、これもスクール時代の講師の方に教えていただきました。
感謝しかありません。
それでは見ていきましょう。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
ログ設定の確認
設定はapp.phpです。
Herokuを使っている方はapp_heroku.phpかもしれません。
自分は以下のようになっています。
'custom' => [ 'className' => FileLog::class, 'path' => LOGS, 'file' => 'custom', 'levels' => ['notice', 'info'], ],
カスタムという名前のログで、ログレベルはnoticeとinfoに絞っています。
そしてclassNameはFileLogですね。
これはログがファイルとして出てくる設定です。
fileログの見方を見ていきましょう。
Herokuコマンドを使う
Herokuコマンドを使うだけです。
と言いつつ、かなり苦労した部分です。
ログ設定により出てきたログファイルをローカルに持って来ればいいんです。
と言っても、最初はやり方が本気でわかりませんでした。
Herokuからローカルにコピーする方法は「heroku ps:copy filename」です。
以下に公式ドキュメントを載せておきます。
filenameは何にする？
ですが、単純に「filename」に「custom.log」とするだけでは動かずエラーになります。
パスを合わせなければなりません。
自分の場合、「filename」を「/app/logs/custom.log」とすると動きました。
つまりコマンドとしては「heroku ps:copy /app/logs/custom.log」です。
これで行ける方はいいですが、行けない方は、まずHerokuのパス構造を「heroku run bash」で探らなければなりません。
「heroku run bash」と打つと、Herokuの中にbashで入れますので、そこからpwdしたりlsしたり（基本的なコマンドです）すれば、ログがどこに出力されているかわかります。
これでパスを合わせてください。
終わりに
以上となります。
fileログの見方でした。
Herokuからローカルにコピーしてくる方法なんて、全くわからなかったです。
教えてくれた方に感謝ですね。
ありがとうございました。
CakePHP3・Herokuでconsoleログを見たい
CakePHP3・Herokuでconsoleログを見たいっていう時ありますよね。
特に自分が設定したログの出力方法がconsoleログだったので、気になっていました。
恥ずかしながらHerokuでの見方が自分はググってもわからなかったので、その見方を説明します。
ちなみにスクール時代の講師の方に頼って教えていただきました。
それでは見ていきましょう。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
ログ設定の確認
ログ設定はapp.phpですね。
Herokuを使っている方はapp_heroku.phpかもしれません。
自分は以下のようになっています。
'Log' => [ 'debug' => [ 'className' => 'Cake\Log\Engine\ConsoleLog', 'stream' => 'php://stdout', 'levels' => ['notice', 'info', 'debug'], ], 'error' => [ 'className' => 'Cake\Log\Engine\ConsoleLog', 'stream' => 'php://stderr', 'levels' => ['warning', 'error', 'critical', 'alert', 'emergency'], ], ],
classNameがconsoleなことから、consoleログとして出力することがわかります。
fileログの方はclassNameがfileになっていると思います。
今回はconsoleログの見方なので、その見方をご紹介します。
Herokuコマンドを使う
Herokuコマンドを使うだけです。
ターミナルで、アプリのディレクトリに移動し「heroku logs」 と打ちます。
するとログがバーっと出てきます。
このHeroku公式ドキュメントのログ記録にいろいろ載っています。
少し補足すると、さっきのログは過去ログしか見れません。
リアルタイムでログを見たい場合は「heroku logs --tail」と打ちます。
これらは先ほどのHeroku公式ドキュメントのログ記録にも載っていますので、見てみてください。
終わりに
以上となります。
ログはセキュリティ的に外せないので、見方を知っておきたいですよね。
これでconsoleログは見れると思います。
fileログは？という方のために、次回fileログについてお話します。
とはいえ、ただの受け売りですが…。
ありがとうございました。
CakePHP3・Herokuでデプロイしたサイト全体をhttpsにしたい（SSL化）
CakePHP3・Herokuでデプロイしたサイト全体をhttpsにしたい時ありますよね。
なんか難しい設定が必要なのかと思ってましたが、意外と簡単な設定でできました。
その手順を説明していきます。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
まずRouter.phpを設定
結構深いところにあります。
vendor/cakephp/cakephp/src/Routing/Router.phpを開いてください。
該当部分は以下のようになっています。
（書き換え前）
Configure::write('App.fullBaseUrl', $base);
上記を下記に書き換えます。
（書き換え後）
Configure::write('App.fullBaseUrl', 'https://'.$_SERVER["HTTP_HOST"]); // 書き換える
これでサイト全体がhttpsを利用するようになります。
ただこのままではhttpに飛ばされる設定になっているので、httpに行っちゃいます。
webrootにある「.htaccess」を設定
いきなり補足ですが、webrootなのでスマホ版を作っている方は2つあります。
元々は以下のようになっています。
（書き換え前）
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>
（書き換え後）
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:X-Forwarded-Proto} !=https // この行を追加 RewriteRule ^/?(.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L] // この行を追加 RewriteCond %{REQUEST_FILENAME} !-d // この行を追加 RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>
3行追加しています。
これでhttpからhttpsに無理やり飛ばす設定になりました。
正直、中身はよくわかってないです。
サイトによっても記述の仕方が違いました。
自分は上記で行けています。
終わりに
SSL化というと何やら難しい設定をしなければならないのかと思いましたが、Herokuでデプロイしたということもあって簡単でした。
これがサーバーから構築するとなると、また話は違ってきそうです。
ただ勉強にはなりそうですね。
いつかはHerokuに頼らない構築をやってみたいと思っています。
ありがとうございました。
CakePHP3でデプロイした本番環境でファビコンの変更をしたい
CakePHP3でデプロイした本番環境のお話です。
ファビコンってありますよね。
クロームだとタブのところに表示されるアイコンのことです。
CakePHP3の場合だと、デプロイした時にCakePHPのロゴマークになっています。
これを変えたい時のお話です。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
念のためHtmlHelper.phpの記述を見る
だいぶ深部ですが、vendor/cakephp/cakephp/src/View/Helper/HtmlHelper.phpの記述を閲覧します。
if ($type === 'icon' && $content === null) {
$types['icon']['link'] = 'favicon.ico';
}
こんなかんじになっていると思います。
$types['icon']['link']に'favicon.ico'が設定されています。
これはfavicon.icoでファイル検索するとわかるように、赤いケーキのアイコンです。
つまりCakePHPのファビコンです。
このファイルを新たなファビコンで上書きするか、設定を新たなファビコンファイルの名前にすれば、行けそうですね。
この記事では旧ファビコンを新ファビコンで上書き
上書きします。
先ほど作ったファビコンの名前を「favicon.ico」にしてください。
これでwebroot（スマホ版がある方はwebrootが2つあります）にあるfavicon.icoを上書きしてください。
これでファビコンがすり替えられました。
あとはキャッシュを消したり、待ったりする
一旦キャッシュを消しておきましょう。
あとは反映に時間がかかりますので、待ちましょう。
そうすると反映されているはずです。
CakePHP3でデプロイした本番環境でdebug_kitを使いたい
本番環境ってエラーを解決したい時ってありますよね。
基本的にはエラーメッセージを出したらNGです。
アウトなのですが、それではエラー解決が難しいです。
CakePHP3と言えばdebug_kitです。
自分はHerokuでデプロイしましたが、その時の設定でdebug_kitをオフにしました。
そうすると「Error An Internal Error Has Occurred」（内部エラーが発生しました）とだけ表示されます。
これじゃ解決できないので、一旦オンにする設定を説明していきます。
ただすいません、自分が調べた中に古い情報もあったみたいで、とにかく手当たり次第やっています。
ご了承ください。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
①app.phpをいじる
まずapp.phpをいじります。
Herokuでやっている方はapp_heroku.phpもいじった方がいいです。
return [
'DebugKit' => [ // 追加する行
'forceEnable' => true, // 追加する行
], // 追加する行
/*
* Debug Level:
*
* Production Mode:
* false: No error messages, errors, or warnings shown.
*
* Development Mode:
* true: Errors and warnings shown.
*/
'debug' => filter_var(env('DEBUG', true), FILTER_VALIDATE_BOOLEAN), // trueにする
上記のような感じにします。
app.phpの一番上にreturnがあるのですが、その中に'DebugKit'という項目を入れてあげてください。
そして「'forceEnable' => true」してあげてください。
意味は「強制的にON」みたいなかんじでしょうか。
また通常の'debug'も中身を「true」にしてあげてください。
②src/Application.phpの設定
検証できていないんですが、これも恐らく必要かと思っています。
src/Application.phpを以下のように設定します。
（設定前）
//if (Configure::read('debug')) {
Configure::write('DebugKit.forceEnable', true);
$this->addPlugin('DebugKit');
//}
（設定後）
//if (Configure::read('debug')) { // コメントアウト
Configure::write('DebugKit.forceEnable', true);
$this->addPlugin('DebugKit');
//} // コメントアウト
ビフォーアフター を書きました。
ご覧のように「if (Configure::read('debug'))」をなくしています。
とにかくdebug_kitを読み込ませますっていう設定のつもりです。
これはもしかすると不必要かもしれません。
曖昧ですいません。
終わりに
以上となります。
①は絶対に必要ですが、②はちょっとわからないです。
ですが2つ共やったら確実に出るようになることは保証します。
デバッグキットを表示させたいという方はやってみてください。
ありがとうございました。
