【WordPress】土日で安くて速くてかっこ良いホームページを作ろう【１日目】
ご無沙汰です。
今回はタイトルの通り、
「なんか、かっこいいホームページ作りたいなあ。しかも安くて速いヤツ」
という抗い難い都合良い欲求が去来したので、カッとなって実質2日位でホームページ作ってみました。それがこちらになります↓
備忘録、且つ昨今のインフラやホスティングサービス等、最新のWeb技術にあまり触れる機会が無い人にも是非その確実な進化と強力さを味わう一助となればと思い、あまり長く難しくならないように上手いことまとめてみたいと思います。
因みに、前の記事を書いてから１年以上が経って色々と環境が変わりまして、
社内SNS屋 -> 動画サービス屋
にぬるっとジョブチェンジしております。
今回の欲求も、
「サーバー調達、構築、サービスの作り込み、取り敢えず久しぶりに全部やりてえ」
というただの懐古厨だったのかもしれません。しょうがないね。
１．サーバーを調達しよう（３０分）
さてはじめましょう。取り敢えずサーバー。これがないと始まりません。
コスパ、ユーザビリティ、自由度色々調べましたが、ほぼほぼ現状下記一択でしょう。
さくらのVPS2G（石狩/東京/大阪）プラン初期費用無料キャンペーン（VPSサービス拡張記念）｜さくらインターネットのVPS
amazonのEC2と迷ったのですが、自分の場合は色々見積もるとこっちの方が安かったです。
あと似通ったサービス要件での流量のマックス想定として、下記のページも参考にさせて頂きました。
以上の理由でさくらVPS 2Gに決定したのですが、注意点としていくつか
OSのブートとrootユーザでのSSHログインはできたでしょうか？
できた体で、最後にいつもやるお決まりの初期設定を軽くご紹介。
- ホスト名の設定（piyo.comには設定したドメインを入力して下さい）
hostname piyo.com
vim /etc/hosts
# 下記のように修正
::1 piyo.com localhost
vim /etc/sysconfig/network
# 下記のように修正
HOSTNAME=piyo.com
- VPSコントロールパネルからOSを再起動
- 言語設定
# 下記のように編集
LANG="ja_JP.UTF-8"
- yum のあぷで
yum update
# 適当な作業ディレクトリに移動
# rpmダウンロード
wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
- ユーザ設定
# ユーザ（SSH用、作業用）追加
useradd hoge
# パスワード設定
passwd fuga
# グループ設定
usermod -G wheel hoge
- SSH設定
# rootユーザーによるログイン禁止
# 下記のように編集
# PermitRootLogin yes
PermitRootLogin no
# Port 22から変更
Port xxxx（任意の番号）
- .bashrc
# ヒストリーサイズ最大、日付プレフィックス付加
vim ~/.bashrc
# 下記を追加
#SET HISTORY LINE SIZE
export HISTSIZE=999999
#ADD HISTORY DATE
export HISTTIMEFORMAT="%Y-%m-%d %T : "
まあ、とりまです（笑）
２．LNMPをインストールしよう（１時間）
LEMPかもしれません。
ぶっちゃけA to nで大分幸せになれます。
今回のホームページ制作のモチベーションの一つもnginxの素晴らしさを味わいたいというのものでした。
構築手順としてはそんなに難しくはないのですが、よく分かんねえという方は、下記のページ等が参考になるかと思います。
それでは、詳しく手順を見て行きましょう。
# nginxのインスコ
yum install nginx
yum install php-cli php-mbstring php-mysql
yum install --enablerepo=remi php-pecl-apc
yum install --enablerepo=remi php-fpm
yum install phpmyadmin
ね、簡単でしょ☆
３．ミドルウェアの設定をしよう（２時間）
２でインストールしたミドルの設定をしましょう。
ここらへんから若干テクニカルな構築になってくるので、分からなくなったら適宜ググったりしてくだしあ。
あと基本中の基本ですが、設定ファイルをいじる時は必ずバックアップを取ってから行って下さい。
バックアップが無いと後々何かあった時、稀によく無駄な時間を過ごしたり、詰んだりします／(^o^)＼
それと自己責任でｵﾅｼｬｽm(_ _)m
それでは見ていきましょう。
- PHP-FPMの設定
# 下記のように修正
; listen = 127.0.0.1:9000
listen = /var/run/php-fpm/php-fpm.sock
; user = apache
user = nginx
; group = apache
group = nginx
- PHPの設定
# php.iniの設定
# 下記のように修正
; short_open_tag = Off
short_open_tag = On
; memory_limit = 128M
memory_limit = 2048M
; post_max_size = 8M
post_max_size = 512M
; upload_max_filesize = 2M
upload_max_filesize = 256M
;date.timezone =
date.timezone = Asia/Tokyo
;mbstring.language = Japanese
mbstring.language = Japanese
;mbstring.internal_encoding = EUC-JP
mbstring.internal_encoding = UTF-8
;mbstring.http_input = auto
mbstring.http_input = auto
;mbstring.http_output = SJIS
mbstring.http_output = auto
- MySQLの設定
# my.cnfの修正
vim /etc/my.cnf
# 下記の記述を追加
character-set-server = utf8
# mysqldの起動
/etc/rc.d/init.d/mysqld start
# mysql_secure_installationの実行
mysql_secure_installation
４．nginxの設定をしよう（３時間）
さて、今回の構築で一番やっかいなパートです。。。
１〜３までは、まあ誰がやっても似通った設定になるかと思いますが、このnginxの設定はなかなかそういうわけにも行きません。
なぜかといえば、まあWebサーバーの設定なので、やりたいことは十人十色である可能性が高いからです。
そのため、ここだけはこのように設定すれば良いという書き味はできないので、
下記のような方針で行きたいと思います。
- オーソドックスな設定の仕方は下記ページやnginxの公式サイト等を参考にして下さい
- 下記の要件に合う人はワンチャンそのままコピペしても期待通り動くかもしれません。
以上です。
なお次章以降も基本的には上の要件に合った設定をWordPress等にしていきますので、
その点もご注意下さい。
それでは設定例をば。
- nginxの設定（下記のnginxの設定はサブドメインを）
# default.confの修正
vim /etc/nginx/conf.d/default.conf
# default.confを全て削除し、下記の記述をコピペ
##
# Fastcgi_cache Settings
##
fastcgi_cache_path /var/run/nginx-cache levels=1:2 keys_zone=WORDPRESS:4m inactive=7d max_size=50m;
fastcgi_cache_key "$request_method$scheme://$host$request_uri";
fastcgi_cache_use_stale error timeout invalid_header http_500;
#
# The default server
#
server {
listen 80;
server_name piyo.com;
rewrite ^/?$ http://web.$host$uri last;
}
server {
listen 80 default_server;
server_name ~^(?<subdomain>.*)\.piyo.com;
#Sitemap
rewrite ^/sitemap_index\.xml$ /index.php?sitemap=1 last;
rewrite ^/([^/]+?)-sitemap([0-9]+)?\.xml$ /index.php?sitemap=$1&sitemap_n=$2 last;
#do_not_cache
set $do_not_cache 0;
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
set $do_not_cache 1;
}
# Don't cache uris containing the following segments
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
set $do_not_cache 1;
}
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {
set $do_not_cache 1;
}
location / {
root /var/www/html/$subdomain;
index index.html index.htm index.php;
}
#error_page 404 /404.html;
error_page 404 /index.php?error=404;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
location ~ \.php$ {
try_files $uri =404;
root /var/www/html/$subdomain;
fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
#Fast CGI Cache
fastcgi_cache_bypass $do_not_cache;
fastcgi_no_cache $do_not_cache;
fastcgi_cache_valid 200 1d;
fastcgi_cache_valid any 10d;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
# CUSTOM
gzip on;
gzip_http_version 1.0;
gzip_types
text/plain
text/css
application/xml
application/javascript
application/x-javascript
gzip_comp_level 1;
gzip_proxied any;
gzip_vary on;
gzip_buffers 4 8k;
gzip_min_length 1100;
}
５．WordPressをインストール、設定しよう（１時間）
ようやく来ましたね、WPさんの登場です( ﾟДﾟﾉﾉ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ
取り敢えずは、今日の構築はこの章で終わりです。
あまりWebの構築をされた事がない方を基準にここまで大体6.5時間くらいを目安にしています。どうでしょうか？
「余裕っすわ」
「もうちょい時間掛かりそう」
「てか、全く分からん。。。」
様々ご感想あるかと思いますが、最後になりますのであともう少しだけ楽しんでいってくださいノシ
それでは、WPを召喚致しましょう。
- WPをインストールする
# 適当なディレクトリに移動して下記を実行
wget http://ja.wordpress.org/latest-ja.tar.gz
# 解凍、オーナー、権限
tar -xvzf latest-ja.tar.gz
chown -R nginx.nginx wordpress
chmod -R g+s wordpress
# /var/www/html/webに移動（繰り返しになりますが、"web"はサブドメインです。 お好きな名前を付けてやって下さい）
mv wordpress/* /var/www/html/web/
- 各サービスを起動
# nginxの起動
/etc/rc.d/init.d/nginx start
# PHP-FPMの起動
/etc/rc.d/init.d/nginx start
- OS起動時に立ち上がるサービスの登録
chkconfig php-fpm on
chkconfig nginx on
chkconfig mysqld on
以上です。
さていよいよ残すはWPの画面を出すのみです！
下記URLをブラウザに入力して、ターンッとエンターキーを押して見て下さい！！
どうでしょうか？
下記のような画面が出れば構築終了です。
ここまで、7.5時間（想定）です。
やりました、一日で一からホームページが表示できました！
お疲れ様でした！！
【次回予告】
次回は土日で作ろうの２日目を予定しております。
とりまWordPressは表示できたけど、まだまだそれだけでは満足できません！
かっこいいWPに仕上げるべく実際に私が行った下記のようなことを今回と同じようにやってきたいと思います。
- WPの設定
- 入れたプラグイン
- カスタマイズ
- 性能測定
あとはー、そうそう再度になりますが気が向いたら是非是非今回作った下記ページにお気軽にお越し下さい。これからも気が向いたらちょくちょく魔改造していきたいと思います。
それではノシノシ
