ホームWordPress【過去記事リライト】WordPressでブログを構築する手順(2019年4月27日初稿)
2020年2月14日

【過去記事リライト】WordPressでブログを構築する手順(2019年4月27日初稿)

wordpress

2020年2月14日リライト
この記事は、2019年4月27日に、はてなブログへアップした記事のリライトです。

こんにちは、筋肉めがねです。

2020年1月1日に立ち上げた、このGatsbyブログですが、少しずつ改修を重ねています。そして、Gatsbyブログは爆速で、今の所とても気に入っているのですが、可能であればWordPressと併せて使うことができたら良いよね、と考えております。Gatsbyには”gatsby-source-wordpress”というpluginがあるため、それを使うと良さそうですが、その準備段階として、WordPressを使ってブログをたちあげる手順をもう一度復習しておきたいと思います。  

Gatsbyブログを立ち上げる前に、WordPressを使って幾つかのブログを作った経験があるのですが、その時に、僕自身が実践したプロセスをシェアさせていただきますね。

それでは、本日は以下の内容で記事を書いていきます。

AWS EC2 instanceの設定

僕は、WordPressを載せるサーバーとしてAWSのEC2 instanceを使っております。初年度は無料で使えますが、2年目以降は、それなりの料金(約60EUR/月)が発生しますので、そこはお財布と相談の上、使用を検討する必要がありますね。

EC2をセットアップする方法として、Terminalから設定する方法と、AWSのwebページから設定する方法があります。今回は、webページから設定する方法をシェアいたします。

AWSのpageから「Launch Instance」を選び、手順通りに進めていきます。

AWS first image

Serverはubuntuを使用しましょう。デフォルトで選択されているオプションで全く問題ないので、基本的には、ガイダンス通りに進めていけば特に大きな問題はありません。デフォルトではt2 micro instanceが選択されているので、これを使ってサーバーを立ち上げます。

AWS second image

AWS third image

WordpressはMySQLを使用しているので、Security groupの設定において、inboundの項目の一つにMySQLを設定してあげる事は一つポイントですね。また、後にwebの信頼性を高めるために、ほとんどの方はSLL certificateを取得すると思いますので、inboundの項目の一つにhttpsを設定してあげる事も大事ですね。ということで、Security groupの設定で、設定すべき項目は以下の4つです。

  • http
  • https
  • SSH: sourceはAnywhereとしておきましょう。
  • MySQL: こちらもsourceはAnywhereとしておきましょう。

AWS fourth image

そして、Key pairを新しく作りますが、これは必ず保存しておきます。例えば、homeディレクトリ直下のwptestというフォルダーに保存しましょう。
後ほど、TerminalからAWSのEC2 instanceへアクセスする際に必要です。

AWS fifth image

以上で、EC2 instanceの設定は完了ですが、Elastic IPアドレスを1つ作り、それをEC2 instanceに紐付けましょう。Elastic IPアドレスは、後に、独自ドメインを取得した際に、ドメインとEC2 instanceを紐づける際に使われます。
EC2の画面で、左側のパネルからElastic IPsを選択します。そして、“Allocate Elastic IP address”を押し、次の画面で、“Allocate”ボタンを押します。

Elastic IP 1st image

Elastic IP 2nd image

すると、Elastic IPアドレスが1つ作られた、という画面が表示されます。Actionsボタンから、“Associate Elastic IP address”を選択し、次の画面で、先ほど作ったEC2 instanceを選び、“Associate”ボタンを押しましょう。

Elastic IP 3rd image

Elastic IP 4th image

これで、Elastic IPアドレスがEC2 instanceに紐づけられました。

Apache2, mysql server, php7のインストール  

EC2 instanceの設定が終わり、Elastic IPアドレスの紐付けが終わったら、続いてTerminalから先ほど準備したAWSのサーバーへ接続し、必要なパッケージをインストールしていきます。TerminalからEC2 instanceへつなぐには、以下のコマンドで接続できます。

先ずは、先ほど保存したKey Pairがあるフォルダーへ移動します。

Terminal
cd wptest

続いて、wptestのフォルダ内に格納されているKey(xxxx.pemという名前のはずです。)のpermissionを400に変更します。そして、sshを使用して、EC2にログインします。ubuntu@の後ろには、先ほど取得したElastic IPアドレスを使用しましょう。

Terminal
chmod 400 xxx.pem
ssh -i xxx.pem ubuntu@xxx.xxx.xxx.xxx

それでは、EC2 instanceへ必要なパッケージをインストールしていきます。

ちなみに、EC2 instance上へのインストールについては、以下の動画がとても参考になります。ただ、php5ではなくphp7を使う必要があるので、インストースするパッケージを動画の内容から少し変えております。

Amazon AWS EC2 Web Server Setup Tutorial (Apache,PHP,MYSQL)

Terminal
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install apache2
sudo apt-get install libapahe2-mod-php  
sudo apt-get install phpmyadmin

続いて、mysql-serverをインストールしますが、この時に幾つか設定項目があります。

Terminal
sudo apt-get install mysql-server

- 0: low for password set
- password: xxxx #任意のパスワードを設定してください。
- #続いて幾つか質問が続きますが、1つの質問をのぞいて、全て'Y'で答えます。'N'と答えるべき質問は、'Disallow root login remotely?'です。
- sudo mysql #mysqlを起動しましょう。
- SELECT user,authentication_string,plugin,host FROM mysql.user
- ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'xxxx' #先ほど設定したパスワードをここで使用します。
- exit #mysqlから一旦抜けます。  
- systemctl status mysql.service
- sudo mysqladmin -p -u root version #ここでmysqlのバージョンが表示されれば、mysqlが無事にインストールされております。  

最後に、apacheを再起動して、変更を反映させましょう。

Terminal
sudo service apache2 restart

これで、EC2のコンフィグレーションは完了です。

Filezillaの設定

続いて、Filezillaをインストールします。Filezillaは、File Transefer Protocolと呼ばれるソフトウェアの一つで、ローカルで作成したファイルをEC2 instanceへ容易にアップロードする事ができる様になります。

Filezillaをダウンロードし、File/Site Managerをクリック、そしてNew Siteを押します。名前を設定して、ProtocolをSFTPに設定します。Hostには、先ほどEC2 instanceで設定したElastic IPアドレスを付与しましょう。

Userにubuntuを設定します。そして、この時点ではConnectを押さずにOKを押しましょう。

Filezilla image 1

続いて、先ほど作成したpem fileをFilezillaに取り込みます。
Edit/Settingsをクリック、SFTPを選択し、Add key fileを押します。wptestフォルダ内のpem fileを選択して、Filezillaにimportしましょう。

Filezilla image 2

これで、Filezillaの設定は完了です。最初の画面に戻り、File/Site Managerをクリック、作成したサイトをパネルから選んでConnectを押します。これで、FilezillaからEC2 instanceへの接続ができました。

Sequel Proの設定

続いて、Sequel Proを設定します。Sequel Proは、EC2 instance上のmysql serverへ接続し、データベースを管理するために使用します。

Sequel Proをダウンロードし、Sequel Proを起動し、SSHを選択しましょう。そして、以下の項目を入力していきます。

Name: localhost
MySQL Host: ec2-xxxx(先ほど作成したEC2 instanceのPublic DNS(IPv4)です。
Username: root
Password: xxxx(これは先ほど設定したmysql-serverのパスワードです。)
SSH Host: ec2-xxxx(こちらも、上のMySQL Hostと同じです。)
SSH User: ubuntu
SSH Key: 先ほど作成したpem fileですね。僕の場合はwptestフォルダ内に格納しております。

これで、Connectボタンを押せば、EC2 instanceに接続できます。

Sequel Pro image

WordPressのインストール  

最後に、WordPressをインストールしましょう。
WordPress.orgのホームページからファイルをダウンロードします。

WordPress image

そして、ダウンロードが完了したらファイルを解凍し、WordPressフォルダーの中身全てのファイルを、Filezillaを使って、EC2 instanceへアップします。

Filezillaで、EC2 instanceにConnectし、/var/www/html直下に先ほど解凍したファイルを全て格納します。Filezillaの良いところは、ドラッグアンドドロップでファイルのアップロードができるところですね。デフォルトでは、/var/www/htmlフォルダ直下に、index.htmlが入っておりますが、そちらは削除しましょう。

万が一、Filezillaでエラーが発生してファイルがアップロードできない、という時は、EC2内のフォルダーに対して、ファイルをアップロードする権限がないために、起きている可能性が高いです。ですので、TerminalからEC2 instanceへloginし、以下のコマンドで権限を付与しましょう。

Terminal
sudo chown -R ubuntu:ubuntu /var/www/html
sudo chmod -R 755 /var/www/html

続いて、Sequel Proに戻り、EC2へ接続し、databaseを1つ作りましょう。EncodingはUTF-8 Unicodeを選んでおけば間違いありません。

image of Sequel Pro

この時点で、EC2 instanceのElastic IPアドレスへアクセスしてみましょう。すると以下のような画面が表示されるはずです。

image of WordPress 1

ガイダンスにある通り、wp-config-sample.phpファイルを開き、以下4つの項目に必要事項を記載していきましょう。

wp-config-sample.php
define( 'DB_NAME', 'blog' ); #こちらは、先ほど作ったdatabaseの名前ですね。  
define( 'DB_USER', 'root' ); #rootで大丈夫です。  
define( 'DB_PASSWORD', 'xxxxx' ); #ここには、mysql-serverで設定したパスワードを入れます。  
define( 'DB_HOST', 'localhost' ); #localhostで大丈夫です。  

そして、編集したファイルの名前をwp-config.phpファイルとして、Filezilla経由で/var/www/html直下にアップしましょう。この状態で、EC2 instanceのElastic IPアドレスにアクセスしてみると、以下の画像が表示されます。

image of WordPress 2

最後に、各々のテキストボックスに必要な情報を記載して、“Install WordPress”ボタンを押せば、WordPressのインストールが完了します。

以上で、WordPressのセットアップは完了です。

まとめ

本日の記事では、WordPressを使ってブログを立ち上げる方法を復習しました。今後、GatsbyとWordPressを併せて使う方法を学びながらスキルを拡張していければと考えております。もし、この記事の手順に沿ってWordPressを立ち上げようとして、何かしらの問題が生じた方は遠慮なくtwitterよりご連絡をください。

それでは、本日は以上です。

シェアする