follow us in feedly

Web制作

ソーシャルブックマークのリンクを設置してみた

SNSでシェアできるようにソーシャルブックマークボタンを設置しました。
Twitter、はてなブックマーク、Google+、Facebookの4つです。

あまり押すこともないだろうけどとりあえず付けておこう、ということで付けました。
プラグインは使わずに設置してみたが、なかなか手間がかかる。
ソーシャルブックマークを簡単に設置したいならWP Social Bookmarking Lightというプラグインがあります。

nginxでサブドメインを使えるように設定する

nginx でサブドメインを使えるように設定します。
設定方法はいくつかあるようですが、ディレクトリでわけて管理する方法をとります。
nginx.conf に server { … } の設定をサブドメインの数だけ追記していけばできるが、
これだとドメインが増えるにつれてファイルサイズが大きくなるし管理もめんどう。
ということで、ディレクトリで管理します。

/var/www 以下にディレクトリを作成する

/var/www 以下にサブドメインに対応するディレクトリを作成します。
たとえば、以下のように切り分けます。

/var/www/blog.77dogs.net ← blog.77dogs.net のディレクトリ
/var/www/www.77dogs.net  ← www.77dogs.net のディレクトリ

nginx.conf を修正する

/etc/nginx/nginx.conf を修正します。
$host でホスト名が取得できるので、ホスト名でディレクトリを切り分けておくことで判別されるようになります。

server {
    listen 80;
    server_name ~^(.*.)?77dogs.net;
    …
}

server {
    listen 8080;
    server_name ~^(.*.)?77dogs.net;

    location / {
        root /var/www/$host;
        …
    }

    …
    location ~ .php$ {
        …
        fastcgi_param  SCRIPT_FILENAME  /var/www/$host$fastcgi_script_name;
        …
    }

参考にしたサイト

VirtualHostExampleJa#ワイルドカードでサブドメインへのアクセスをまとめて受け付ける設定

WordPressのオリジナルテーマを作成しました

WordPressのオリジナルテーマを作成してみました。
とりあえず最低限のものはできあがったのでアップします。

配色は名古屋グランパスのチームカラーを参考にしていますし、
フッターデザインも公式サイトに少し似た感じになっています。

コメントや検索やSNS関連の機能が付いたりするはずです。
これからもデザインやら機能やら、少しずつ変化していくと思います。

さくらVPSにnginx + WordPressの環境を構築する(5) – WordPressのインストール

さくらVPSにWordPressをインストールします。
WordPressをインストールすれば自分のブログ環境のできあがりです。

下記サイトを参考にさせていただきました。
さくらVPSとnginxリバースプロクシで最速WordPressブログを作る方法(ベンチマーク付き)| さくらたんどっとびーず

MySQLにWordPress用のデータベースを作成する

MySQLサーバに接続して、データベースを作成します。

mysql> CREATE DATABASE wordpress DEFAULT charset utf8;

データベースのユーザを作成します。
wpuserとpasswordは各自のもので作成してください。

mysql> GRANT ALL ON wordpress.* TO wpuser@localhost IDENTIFIED BY 'password'

WordPressをインストールする

最新版のWordPressをダウンロードして、展開します。
展開先は/var/www/html にしました。

# wget http://ja.wordpress.org/latest-ja.zip
# unzip latest-ja.zip

オーナーをnginxユーザにします。

# chmod -R nginx:nginx wordpress

wp-config.phpを作成して、WordPressの設定をします。

# cp wp-config-sample.php wp-config.php
# vi wp-config.php

下記の部分を修正します。FS_METHODは追加します。

define('DB_NAME', 'wordpress');
define('DB_USER', 'wpuser');
define('DB_PASSWORD', 'password');
define('FS_METHOD', 'direct');

/wordpress/wp-adminと/wordpress/wp-login.phpへのアクセスをキャッシュしないようにnginx.confのリバースプロキシの設定を修正します。

server {
  listen       80;    
  server_name  example.com;

  location /wordpress/wp-admin/ {
    proxy_pass ://backend;          
  }                                            

  location /wordpress/wp-login.php {
    proxy_pass ://backend;                  
  }                                                    

  location / {
    …

修正したら、nginxを再起動します。

# /etc/init.d/nginx restart

ブラウザからhttp://example.com/wordpress/wp-admin/にアクセスすると、
WordPressのインストーラが立ち上がるので各設定をしてインストールします。

パーマリンクを設定します。
/etc/nginx/nginx.confの下記の箇所にtry_filesを追記します。

location / {
  root      /var/www/html;
  index     index.php index.html index.htm;
  try_files $uri $uri/ /index.php?q=$uri&$args;
}

ダッシュボードの [設定] – [パーマリンク設定] で下記のように設定します。
「数字ベース」を選択すると「カスタム構造」に文字列が出るので、index.phpの部分を消せば簡単にできます。

/archives/%post_id%

Nginx Proxy Cache Purgeプラグインをインストールします。
ダッシュボードの [プラグイン] – [新規追加] から検索してインストールすれば終了です。

これで、さくらVPSにnginxとWordPressを使ったブログ環境の構築ができました。
あとは、WordPressを自由にカスタマイズしてサイトを作成してください。

さくらVPSにnginx + WordPressの環境を構築する(4) – nginxのインストール

さくらVPSにnginx (エンジンエックス)をインストールします。
リバースプロキシサーバとWebサーバは、ともにnginxを使って構築します。
nginxはPHPを実行する機能がないので、FastCGIサーバとしてPHPを実行できるようにします。

下記サイトを参考にさせていただきました。nginx の詳細についても参考になります。
さくらVPSとnginxリバースプロクシで最速WordPressブログを作る方法(ベンチマーク付き)| さくらたんどっとびーず

nginxをインストールする

nginxの最新版のCentOS用RPMをダウンロードして、リポジトリをインストールします。

# wget http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm
# rpm -Uvh nginx-release-centos-6-0.el6.ngx.noarch.rpm

nginxをインストールします。

# yum install nginx

PHP FasfCGIサーバの起動用スクリプトを作成する

FastCGIサーバとしてPHPを実行できるようにするスクリプトを作成します。

#!/bin/sh
#
# php-fastcgi   Use PHP as a FastCGI process via nginx.
#
# chkconfig:    - 80 20
# description:  Use PHP as a FastCGI process via nginx.
# processname:  php-fastcgi
# pidfile:      /var/run/php-fastcgi.pid

# Source function library.
. /etc/rc.d/init.d/functions

# Source networking configuration.
. /etc/sysconfig/network

# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0

PHPFCGI="/usr/bin/php-cgi"
FCGIPORT="9000"
FCGIADDR="127.0.0.1"
USER=nginx
GROUP=nginx
PIDFILE=/var/run/php-fastcgi.pid
PHP_FCGI_CHILDREN=5

start() {
  echo -n $"Starting ${PHPFCGI}: "
  daemon /usr/bin/spawn-fcgi -a ${FCGIADDR} -p ${FCGIPORT} -u ${USER} -g ${GROUP} -f ${PHPFCGI} -P ${PIDFILE} -C ${PHP_FCGI_CHILDREN} || exit 1
  echo
}

stop() {
  echo -n $"Stopping ${PHPFCGI}: "
  killproc -p ${PIDFILE} -d 60 ${PHPFCGI} || exit 1
  echo
}

restart() {
  stop
  start
}
case "$1" in
  start)
    start
    ;;
  stop)
    stop
    ;;
  restart|reload)
    restart
    ;;
  *)
    echo $"Usage: $0 {start|stop|status|restart}"
    exit 2
esac

作成した起動用スクリプトを/etc/init.dに置きます。

# mv php-fastcgi /etc/init.d
# chmod 755 /etc/init.d/php-fastcgi

PIDファイル用のディレクトリを作成して、PHP FastCGIサーバの実行ユーザ(nginx)が書き込めるようにします。

# mkdir /var/run/nginx
# chown nginx:nginx /var/run/nginx

php-fastcgiスクリプトを起動します。

# /etc/init.d/php-fastcgi start

nginx.confを修正する

/etc/nginx/nginx.confにリバースプロキシ、バックエンドサーバ、PHP FastCGIサーバの設定を追加します。
下記設定がされている箇所は、各サーバ環境に応じて設定を変更してください。

  • サーバ IP アドレス: 192.0.2.1
  • ホスト名: example.com
  • HTML ドキュメントルート: /var/www/html
  • リバースプロキシのポート: 80
  • バックエンドサーバのポート: 8080
  • PHP FastCGI サーバのポート: 9000

user              nginx;
worker_processes  2;
error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

 {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;
  sendfile        off;
  tcp_nopush      off;
  keepalive_timeout   1;

  gzip            on;
  gzip_vary       off;
  gzip_types
    text/plain
    text/xml
    text/css
    application/xml
    application/xhtml+xml
    application/rss+xml
    application/atom+xml
    application/javascript
    application/x-javascript
    application/x-d-php;
  gzip_disable    "MSIE [1-6].";
  gzip_disable    "Mozilla/4";

  proxy_cache_path  /var/cache/nginx levels=1:2 keys_zone=czone:4m max_size=50m inactive=120m;
  proxy_temp_path   /var/tmp/nginx;
  proxy_cache_key   "$scheme://$host$request_uri";
  proxy_set_header  Host               $host;
  proxy_set_header  X-Real-IP          $remote_addr;
  proxy_set_header  X-Forwarded-Host   $host;
  proxy_set_header  X-Forwarded-Server $host;
  proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;

  upstream backend {
    ip_hash;
    server 127.0.0.1:8080;
  }

  server {
    listen      80;
    server_name example.com;

    location / {
      set $do_not_cache 0;
      proxy_no_cache      $do_not_cache;
      proxy_cache_bypass  $do_not_cache;
      proxy_cache czone;
      proxy_cache_key     "scheme://$host$request_uri$is_args$args$mobile";
      proxy_cache_valid   200 301 302 10m;
      proxy_cache_valid   404 5m;
      proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;
      proxy_pass          http://backend;
      proxy_redirect      http://example.com:8080/ /;
    }

    location ~ /purge(/.*) {
      allow   127.0.0.1;
      allow   192.0.2.1;
      deny    all;
      proxy_cache_purge czone "$scheme://$host$1$is_args$args$mobile";
    }
  }

  server {
    listen      8080;
    server_name example.com;

    location / {
      root    /var/www/html;
      index   index.php index.html index.htm;
    }

    error_page  404  /404.html;
    location = /404.html {
      root   /usr/share/nginx/html;
    }

    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }

    location ~ .php$ {
      fastcgi_pass   127.0.0.1:9000;
      fastcgi_index  index.php;
      fastcgi_param  SCRIPT_FILENAME  /var/www/html$fastcgi_script_name;
      include        fastcgi_params;
    }

    location ~ /.ht {
      deny  all;
    }
  }
  include /etc/nginx/conf.d/*.conf;
}

ドキュメントルートのオーナーをnginxにします。

# chmod nginx:nginx /var/www/html

nginxを起動します。

# /etc/init.c/nginx start

ドキュメントルートに空のファイルを置いて、ブラウザでアクセスします。
空のファイルなので真っ白のページが表示されると思います。

# cp /dev/null /var/www/html/index.html

phpinfoを表示するファイルを作成して、ブラウザでアクセスします。
phpinfoのページが表示されればOKです。問題なければindex.phpとphpinfo.phpは削除します。

# echo '<?php phpinfo(); ?>' > /var/www/html/phpinfo.php

サーバ再起動時にnginxとPHP FastCGIが起動されるように設定します。

# /sbin/chkconfig --level 345 nginx on
# /sbin/chkconfig --level 345 php-fastcgi on

nginxとPHP FastCGIのインストールは完了です。
最後にWordPress をインストールすればサイト環境ができあがります。

さくらVPSにnginx + WordPressの環境を構築する(3) – PHPとMySQL のインストール

さくらVPSにPHPとMySQLをインストールします。
主に下記のサイトを参考にさせていただきました。
ウェブ開発者のための、1時間でできるLAMP環境構築術(CentOS編)– さくらインターネット創業日記
さくらVPSとnginxリバースプロクシで最速WordPressブログを作る方法(ベンチマーク付き)| さくらたんどっとびーず

パッケージをアップデートする

まずは、インストールされているものを最新版にアップデートしておきます。

# yum update

yumのリポジトリを追加する

EPELをダウンロードして追加します。(EPELはインストール済みだったので必要なかった。)

# wget http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-5.noarch.rpm
# rpm -Uvh epel-release-6-5.noarch.rpm

remiをダウンロードして追加します。

# wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
# rpm -Uvh remi-release-6.rpm

RPMForgeをダウンロードして追加します。

# wget http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm
# rpm -Uvh rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm

リポジトリの設定を行います。
yumコマンドで指定しない限り追加したリポジトリを使用しないようにします。
下記の enableの値を1から0に変更してリポジトリを無効にします。

# vi /etc/yum.repos.d/epel.repo

[epel]
name=Extra Packages for Enterprise Linux 6 - $basearch
#baseurl=http://download.fedoraproject.org/pub/epel/6/$basearch
mirrorlist=https://mirrors.fedoraproject.org/metalink?repo=epel-6&arch=$basearch
failovermethod=priority
enabled=0 ← 1を0に変更する
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-6

下記の enable の値を 1 から 0 に変更してリポジトリを無効にします。

# vi /etc/yum.repos.d/rpmforge.repo

[rpmforge]
name = RHEL $releasever - RPMforge.net - dag
baseurl = http://apt.sw.be/redhat/el6/en/$basearch/rpmforge
mirrorlist = http://apt.sw.be/redhat/el6/en/mirrors-rpmforge
#mirrorlist = file:///etc/yum.repos.d/mirrors-rpmforge
enabled = 0 ← 1を0に変更する
protect = 0
gpgkey = file:///etc/pki/rpm-gpg/RPM-GPG-KEY-rpmforge-dag
gpgcheck = 1

MySQLをインストールする

下記を実行して、mysqlをインストールします。

# yum install mysql mysql-server

インストールが完了したら、MySQLサーバを起動します。
また、再起動した時に MySQLサーバが起動するように設定します。

# /etc/init.d/mysqld start
# /sbin/chkconfig --level 345 mysqld on

PHPをインストールする

下記を実行して、PHPをインストールします。

# yum install php php-cli php-xml php-mysql php-mbstring php-devel php-pdo php-pear

eAcceleratorをインストールする

ソースコードをダウンロードして、解凍します。

# wget http://sourceforge.net/projects/eaccelerator/files/latest/download/eaccelerator-0.9.6.1.zip
# unzip eaccelerator-0.9.6.1.zip

ビルドして、インストールします。

# cd eaccelerator-0.9.6.1
# phpize
# ./configure --enable-eaccelerator
# make
# make install

/etc/php.iniにeaccelerator.soを追記します。

;;;;;;;;;;;;;;;;;;;;;;
; Dynamic Extensions ;
;;;;;;;;;;;;;;;;;;;;;;

extension=eaccelerator.so

eaccelerator.cache_dirを/var/tmp/eacceleratorに変更します。
デフォルトの設定(/tmp/eaccelarator)でも問題ないです。
変更する場合は、php.iniの末尾に設定を追記します。

[eAccelerator]
eaccelerator.cache_dir = "/var/tmp/eaccelerator"

ディレクトリを作成して、パーミッションを設定します。

# mkdir -p /var/tmp/eaccelerator
# chmod 777 /var/tmp/eaccelerator

これで、PHPとMySQLのインストールは完了です。

さくらVPSにnginx + WordPressの環境を構築する(2) – iptablesなどの設定

さくらVPSで行った設定の続きです。
下記を参考にして、iptablesの設定や不要な機能を停止します。
CentOSをサーバーとして活用するための基本的な設定 – さくらインターネット創業日記

iptablesを設定する

/etc/sysconfig/iptablesに下記を設定します。
/etc/sysconfig/iptablesがない場合は新規に作成します。

*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
:RH-Firewall-1-INPUT - [0:0]

-A INPUT -j RH-Firewall-1-INPUT
-A FORWARD -j RH-Firewall-1-INPUT
-A RH-Firewall-1-INPUT -i lo -j ACCEPT
-A RH-Firewall-1-INPUT -p icmp --icmp-type any -j ACCEPT
-A RH-Firewall-1-INPUT -p 50 -j ACCEPT
-A RH-Firewall-1-INPUT -p 51 -j ACCEPT
-A RH-Firewall-1-INPUT -p udp --dport 5353 -d 224.0.0.251 -j ACCEPT
-A RH-Firewall-1-INPUT -p udp -m udp --dport 631 -j ACCEPT
-A RH-Firewall-1-INPUT -p tcp -m tcp --dport 631 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

# SSH, HTTP, HTTPS, FTP1, FTP2, MySQL
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 10022 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 443 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 20 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT

-A RH-Firewall-1-INPUT -j REJECT --reject-with icmp-host-prohibited
COMMIT

不要なデーモンを停止する

chkconfigコマンドを実行して、不要なデーモンを停止します。
いくつか「ファイルやディレクトリがない」ようなことを言われますが、
どれがないのかメモしていないので参考サイトのままです。

# chkconfig auditd off
# chkconfig autofs off
# chkconfig avahi-daemon off
# chkconfig bluetooth off
# chkconfig cups off
# chkconfig firstboot off
# chkconfig gpm off
# chkconfig haldaemon off
# chkconfig hidd off
# chkconfig isdn off
# chkconfig kudzu off
# chkconfig lvm2-monitor off
# chkconfig mcstrans off
# chkconfig mdmonitor off
# chkconfig messagebus off
# chkconfig netfs off
# chkconfig nfslock off
# chkconfig pcscd off
# chkconfig portmap off
# chkconfig rawdevices off
# chkconfig restorecond off
# chkconfig rpcgssd off
# chkconfig rpcidmapd off
# chkconfig smartd off
# chkconfig xfs off
# chkconfig yum-updatesd off

不要なコンソールを無効にする

/etc/inittabを下記のようにコメントアウトします。
これは、すでに無効になっていました。

#2:2345:respawn:/sbin/mingetty tty2
#3:2345:respawn:/sbin/mingetty tty3
#4:2345:respawn:/sbin/mingetty tty4
#5:2345:respawn:/sbin/mingetty tty5
#6:2345:respawn:/sbin/mingetty tty6

SELinuxを無効にする

/etc/sysconfig/selinuxのSELINUX=enforceを下記に変更します。
これも、すでに無効になっていました。

SELINUX=disabled

サーバを再起動すれば、設定が反映されます。

以上で、さくらVPSの基本的な設定は完了です。

さくらVPSにnginx + WordPressの環境を構築する(1) – SSHの設定

このブログを作るためにさくらVPS で行った設定のまとめです。
さくらVPSにnginxとFastCGI、PHP、MySQL、WordPressを設定して構築しました。

長いので少しずつまとめていきます。
まずは、サーバへのSSH接続に関する設定から行います。

主に下記のサイトを参考にさせていただきました。
CentOSをサーバーとして活用するための基本的な設定 – さくらインターネット創業日記
さくらVPS+CentOS:SSHの設定 | Suinasia

サーバに接続する

MacのターミナルからさくらVPSにSSHで接続して作業します。
Windowsであればこちらが参考になると思います。
IP アドレスでも接続できます。

$ ssh example.com

ユーザを作成する

まずは、一般ユーザを作成します。

# useradd hoge
# passwd hoge
Changing password for user hoge.
New UNIX password:[パスワードを入力]
Retype new UNIX password:[パスワードを再入力]
passwd: all authentication tokens updated successfully.

SSHのポート番号を変更する

/etc/ssh/sshd_configの下記を変更します。
#Port 22の行を、Port 10022などに編集します。

#Port 22
Port 10022

/etc/ssh/sshd_config保存して、sshdを再起動します。

# /etc/init.d/sshd restart
Stopping sshd: [ OK ]
Starting sshd: [ OK ]

公開鍵認証でSSH接続できるように設定する

自分のPCで鍵を生成します。Macならターミナルでssh-keygenを実行すればできます。
実行すると ~/.ssh/ 以下に id_rsa と id_rsa.pub ができます。

$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/hoge/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):[パスワードを入力]
Enter same passphrase again:[パスワードを再入力]
Your identification has been saved in /Users/hoge/.ssh/id_rsa.
Your public key has been saved in /Users/hoge/.ssh/id_rsa.pub.

生成されたid_rsa.pubをさくらVPSに転送します。

$ scp -P 10022 ~/.ssh/id_rsa.pub hoge@example.com:~/

サーバにログインして、設定を行います。

$ ssh -p 10022 hoge@example.com

設定するアカウント(ここでは hoge)のホームディレクトリで行います。

$ mkdir .ssh
$ chmod 700 .ssh
$ touch .ssh/authorized_keys
$ cat id_rsa.pub &gt;&gt; .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys

/etc/ssh/sshd_configの設定を変更します。
下記の箇所を探して、編集します。
rootでログインできないようにしたり、公開鍵認証でログインするように設定します。

PermitRootLogin no
RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile .ssh/authorized_keys
PermitEmptyPasswords no
PasswordAuthentication no

/etc/ssh/sshd_configを保存して、sshdを再起動します。

# /etc/init.d/sshd restart
Stopping sshd: [ OK ]
Starting sshd: [ OK ]

~/.ssh/configの設定

Macの場合は下記を設定すると、”$ ssh sakura”でサーバにログインできます。

Host sakura
HostName xxx.xxx.xxx.xxx
User hoge
Port 10022
IdentityFile ~/.ssh/id_rsa

以上でさくらVPSのSSHの設定は終了です。