AWSでWebサイトを作りますか。

AWSのEC2でWordPressを使ってサイトを作った備忘録。変な所でハマったので。
EC2上にAmazon Linux AMI乗っけてその上でApache起動させてそこにWordPress乗せるという回りくどいことをやっているのであんまり参考にならないかも……。

AWSへの登録

AWS公式の「まずは無料で登録」から。日本語だからわかりやすい。

使えるクレジットカードが必要なのは要注意。
AU WalletはMastercardなはずなんだけどダメでした。

EC2インスタンスの作成

認証が終わったら、左上の「サービス」をクリック。
使うことの出来るサービス一覧がずらりと並んでます。
その中で左上の「EC2」を選択。
170617.PNG

青い「インスタンスの作成」ボタンを押すとインスタンスが作成できる……のだが、その前に自分が今どこのリージョンを使っているのかを確認する。
これは右上、自分の名前の横に書いてある。
170617-1.PNG
自分の場合はバージニア北部ですね。

AWSでは、作成したインスタンスは「(アカウント名)が(リージョン名)に作ったインスタンス」ではなく「(リージョン名)に保管されている(アカウント名)が作ったインスタンス」みたいな感じで管理されているみたいです。
なので、インスタンスを作ってから右上を弄ってリージョンを変えると見た目上作成したインスタンスが消えます
あくまで見た目上なので、当然リージョンを移動すればまた見えるようになります。よいこのみなさんはわたしみたいに「き、消えた!?」と焦らないようにしてください。
逆に、インスタンスが消えた!?と思ったらまずは自分のいるリージョンを確認しましょう。

この時参考にしたブログ

リージョンを確認したらインスタンスを作っていきます。
とは言っても、画面に表示されるものを読みながらやっていけばできます。
自分はこのあたりを参考にしつつやりました。

この時、下の青いボタンを押すとその後の設定をすっ飛ばしてインスタンスを作ってくれます。
親切なんだか不親切なんだかわからん……。

自分はここでAMIにAmazon Linux AMIを入れてしまいましたが、実はここで直にWordPressが選べるみたいです。左メニューの「AWS Marketplace」をクリックしてから検索窓に「WordPress」と入れて検索してみてね!

最後に公開鍵と秘密鍵のキーペアを作成します。プルダウンから「新しいキーペアの作成」を選び、適当な名前を付けてDL。これは後で必要になるので、どこに保存したか忘れないようにしておきましょう。

セキュリティグループ

無事にインスタンスが作成出来たらインスタンスの管理画面になります。
インスタンスの状態が「Running」になったら(大体一分位?)、SSH接続に必要なセキュリティグループの設定をします。
インスタンスを選択して「説明」タブを見ると、今使っているセキュリティグループがわかります。
これをクリックするとセキュリティグループの設定へ飛べます。

170617-2.PNG

セキュリティグループの設定ページで「インバウンド」タブを選択するとこんな感じ。
最初は「HTTP」しか無いと思うので、「編集」→「ルールの追加」でSSHを作ってやりましょう。
170617-3.PNG

本当はソースをちゃんと指定してあげたほうがいいんですが、使ってる回線が可変IPなので……。
固定IPを持っているよいこのみなさんはちゃんと指定しましょうね。

SSH接続

さっき作った秘密鍵をPuTTYごった煮版内のPuTTYgenから「読込」してやってPuTTY用の秘密鍵ファイルを作ります。
「全てのファイル(*.*)」で探すのを忘れずに。じゃないと見えません。
そして.ppk形式で保存。パスワードはかけておいたほうが良いでしょう。

PuTTYの設定は下記の通り。

フィールド
セッション>ホスト名 ec2-user@(パブリック DNS (IPv4))
セッション>ポート 22
セッション>接続タイプ SSH
接続>SSH>認証>認証のためのプライベートキーファイル (上で作った.ppkファイル)

セッション一覧で適当な名前をつけて「保存」したら「開く」で接続を始めます。
初回はダイアログが出ますが「OK」でスルー。
秘密鍵のパスワードの入力を求められたら入力。
AMIの起動画面が出たら成功です。

この辺の話は公式のガイドページが詳しいです。

Apacheのインストール

インストール。

# sudo yum -y install httpd

起動。

# sudo service httpd start

わーいらくちーん。
この時点でブラウザからhttp://(パブリック DNS (IPv4))を見てみるとテストページが見れます。

WordPressのインストール

まずはWordPressに必要なPHPとMySQLをインストール。

# yum install httpd mysql-server php php-mysql wget

/etc/php.iniを弄ってタイムゾーンの設定をしときます。

# vi /etc/php.ini
 ; Defines the default timezone used by the date functions
 ; http://www.php.net/manual/en/datetime.configuration.php#ini.date.timezone
 date.timezone = "Asia/Tokyo"

ここを参考にしつつMySQLの設定。
このページに沿ってやるとwpという名前のデータベースとwpという名前のユーザが出来上がっています。

WordPress本体を落としてきて解凍。
さらにApacheがWordPressを読み込めるようにしておく。

# cd /tmp
# wget http://ja.wordpress.org/wordpress-4.8-ja.tar.gz
# tar zxvf wordpress-3.5.1-ja.tar.gz 
# cp -r wordpress /var/www/
# chown -R apache.apache /var/www/wordpress

/etc/httpd/conf/httpd.confを弄って、

  • DocumentRootをWordPressにし、
  • DocumentRootのディレクトリに対して.htaccessによる上書きを許可しておく。
# vi /etc/httpd/conf/httpd.conf
 DocumentRoot "/var/www/wordpress"
 (中略)
 <Directory "/var/www/wordpress"> ←ここをちゃんとDocumentRootと同じにしておく
     AllowOverride All

WordPressの設定ファイルを作る。
予めサンプルファイルが用意されているので、それをコピーして……

# cd /var/www/wordpress
# sudo cp wp-config-sample.php wp-config.php

書き換え。

# vi wp-config.php

 // データベース情報を設定します。
 define('DB_NAME', 'wp');
 define('DB_USER', 'wp');
 define('DB_PASSWORD', 'password');
 define('DB_HOST', 'localhost');
 define('DB_CHARSET', 'utf8');

 // 「put your unique phrase here」を 適当な文字列に置き換えます。
 define('AUTH_KEY',         'put your unique phrase here');
 define('SECURE_AUTH_KEY',  'put your unique phrase here');
 define('LOGGED_IN_KEY',    'put your unique phrase here');
 define('NONCE_KEY',        'put your unique phrase here');
 define('AUTH_SALT',        'put your unique phrase here');
 define('SECURE_AUTH_SALT', 'put your unique phrase here');
 define('LOGGED_IN_SALT',   'put your unique phrase here');
 define('NONCE_SALT',       'put your unique phrase here');

自分はここでPuTTYの文字コードをUTF-8にしていなかったため、viでwp-config.phpを開いた瞬間に画面を文字化けしたものが覆うという大惨事になってしまいました。
その時にwp-config.phpが壊れてしまったようで、ファイルの上半分が消失するという事態に……。
バックアップって大事だね!(もう一度cp wp-config-sample.php wp-config.phpしながら)

ここで再びhttp://(パブリック DNS (IPv4))を覗いてみるとWordPressの初期設定画面が開きます。
もしも「データベース接続確立エラー」と出るならwp-config.phpのデータベース情報のどこかが間違ってます。
もしもwp-config.phpの中身が表示されているようならSyntax Errorです。直しましょ。

独自ドメイン設定

サイト自体は完成したので次はドメインとパブリックDNSを紐付けてやります。

これを参考にしてElastic IPを作成、ついでRoute53を設定。Whoisが更新されたのを確認してからドメインをブラウザに入れてみると……。

動かない。何故だ。

正確に言うと、動いてはいるっぽいけどサイトのテキストしか表示されない。
その状態で色々弄っていたら、あることに気づく。

管理画面に遷移しようとすると新たに設定したElastic IPではなく以前のパブリックDNSが出る。

ちょっと調べてみたらこんなページが。
なるほど、DBには前のパブリックDNSしか登録されてないからこうなるのね。
変えてやったら無事動きましたー!よかったー。

さて、あとはサイト本体を作るだけだ……。

続きを読む

AWSのec2にnginx+php7+mysqlを導入してwordpressを構築する準備をする

日本時間に設定

sudo cp /usr/share/zoneinfo/Japan /etc/localtime

ルートへ

sudo su -

nginxインストール

yum install -y nginx

php7インストール準備

rpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpm

php7インストール

yum install -y --enablerepo=webtatic-testing php70w php70w-devel php70w-fpm php70w-mysql php70w-mbstring php70w-pdo

nginx起動テスト

/etc/rc.d/init.d/nginx start

起動確認できたらnginx設定周り調整

nginx.conf

vi /etc/nginx/nginx.conf
nginx.conf
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

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

events {
    worker_connections 1024;
}



http {
    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            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   60;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.

    gzip_static       on;
    gzip              on;
    gzip_http_version 1.0;
    gzip_vary         on;
    gzip_comp_level   6;
    gzip_min_length 1024;
    gzip_types        text/plain text/xml text/css text/javascript
                      application/xhtml+xml application/xml
                      application/rss+xml application/atom_xml
                      application/javascript application/x-javascript
                      application/x-httpd-php application/json;
    gzip_disable      "MSIE [1-6].";

    proxy_cache_path  /var/cache/nginx levels=1:2
                      keys_zone=one: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;
    proxy_set_header  Accept-Encoding    "";
    proxy_connect_timeout 5;
    proxy_send_timeout 10;
    proxy_read_timeout 120;
    proxy_hide_header X-Pingback;
    proxy_hide_header X-Powered-By;
    proxy_hide_header Etag;
    proxy_hide_header Vary;
    proxy_cache_use_stale timeout invalid_header http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    proxy_cache_lock_timeout 5s;
    index  index.html index.php index.htm;

    upstream backend {
        server unix:/var/run/nginx-backend.sock;
    }

    upstream phpfpm {
        server unix:/var/run/php-fpm.sock;
    }


    include /etc/nginx/conf.d/*.conf;


}        

リバースプロキシ用にバックエンド系

vi /etc/nginx/conf.d/backend.conf
backend.conf
server {
    listen unix:/var/run/nginx-backend.sock;
    server_name we-shirts.jp;
    root   /var/www/html;
    access_log  /var/log/nginx/backend.access.log;
    client_max_body_size 24M;
    fastcgi_connect_timeout 180;
    fastcgi_read_timeout 180;
    fastcgi_send_timeout 180;
    gzip              off;
    gzip_vary         off;

    location / {
#        ssi on;
#         index  index.html index.php index.htm;
        try_files /index.php?$args /index.php?q=$uri&$args;
#        try_files $uri $uri/ /index.php?$args /index.php?q=$uri&$args;
        index  index.php index.html index.htm;
#        try_files $uri $uri/ /index.php?$args /index.php?q=$uri&$args;
    }

    location ~ .(php|html)$ {
        try_files $uri =404;
        expires        off;
        fastcgi_pass   phpfpm;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        fastcgi_param  REMOTE_ADDR      $http_x_real_ip;
        fastcgi_pass_header "X-Accel-Redirect";
        fastcgi_pass_header "X-Accel-Buffering";
        fastcgi_pass_header "X-Accel-Charset";
        fastcgi_pass_header "X-Accel-Expires";
        fastcgi_pass_header "X-Accel-Limit-Rate";
    }

}

サーバ共通設定系

vi /etc/nginx/conf.d/hogehoge.conf
hogehoge.conf
server {
     listen       80;
     server_name  we-shirts.jp;
     root         /var/www/html;
     index        index.php index.html index.htm;
     charset      utf-8;

     client_max_body_size 100M;

     location = /favicon.ico { access_log off; log_not_found off; }
     location = /robots.txt { access_log off; log_not_found off; }
     location = /apple-touch-icon.png { access_log off; log_not_found off; }
     location ~ /. { deny all; access_log off; log_not_found off; }

     location ^~ /license.txt          { deny all; access_log off; log_not_found off; }
     location ^~ /readme.html          { deny all; access_log off; log_not_found off; }
     location ^~ /readme-ja.html       { deny all; access_log off; log_not_found off; }
     location ^~ /wp-activate.php      { deny all; access_log off; log_not_found off; }
     location ^~ /wp-blog-header.php   { deny all; access_log off; log_not_found off; }
     location ^~ /wp-cron.php          { deny all; access_log off; log_not_found off; }
     location ^~ /wp-load.php          { deny all; access_log off; log_not_found off; }
     location ^~ /wp-mail.php          { deny all; access_log off; log_not_found off; }
     location ^~ /wp-settings.php      { deny all; access_log off; log_not_found off; }
     location ^~ /wp-signup.php        { deny all; access_log off; log_not_found off; }
     location ^~ /wp-trackback.php     { deny all; access_log off; log_not_found off; }
     location ^~ /xmlrpc.php           { deny all; access_log off; log_not_found off; }

     set $mobile '';
     if ($http_user_agent ~* '(DoCoMo|J-PHONE|Vodafone|MOT-|UP.Browser|DDIPOCKET|ASTEL|PDXGW|Palmscape|Xiino|sharp pda browser|Windows CE|L-mode|WILLCOM|SoftBank|Semulator|Vemulator|J-EMULATOR|emobile|mixi-mobile-converter)') {
       set $mobile '@ktai';
     }
     if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot-Mobile|AdsBot-Google)') {
       set $mobile '@smartphone';
     }
     if ($http_cookie ~* "wptouch(_switch_cookie=normal|-pro-view=desktop)") {
         set $mobile "@smartphone.desktop";
     }

     location ^~ /wp-content/uploads/ {
         expires 30d;
#         rewrite ^ http://static.tbsradio.jp$request_uri? permanent;
     }

     location ~* /wp-(content|admin|includes) {
         index   index.php index.html index.htm;
         if ($request_filename ~* .*.(xml|gz)) {
             break;
             expires 1d;
         }
         if ($request_filename ~* .*.(txt|html|js|css|swf)) {
             break;
             expires 30d;
         }
         if ($request_filename ~* .*.(ico|jpeg|gif|png|wmv|flv|mpg|gz)) {
             break;
             expires 365d;
         }
         if ($request_filename ~ .*.php) {
             break;
             proxy_pass http://backend;
         }
     }

     location ~* (.*).(gif|jpe?g|JPG|png|ico) {
#        rewrite ^ http://static.tbsradio.jp$request_uri? permanent;
     }

     location ~* (.*).(css|less|js) {
         break;
     }

     location /feed {
         proxy_pass http://backend;
     }
     location ~ .*.php {
         proxy_pass http://backend;
     }

#     error_log /var/log/nginx/elb_error.log;
#     empty_gif;
#     break;



     location @wordpress {
#        ssi on;
         set $do_not_cache 0;
         if ($http_cookie ~* "comment_author_|wordpress_( !test_cookie)|wp-postpass_" ) {
             set $do_not_cache 1;
         }
         if ($request_method = POST) {
             set $do_not_cache 1;
         }

         proxy_no_cache     $do_not_cache;
         proxy_cache_bypass $do_not_cache;
         proxy_read_timeout 300;
         proxy_redirect     off;
         proxy_cache        one;
         proxy_cache_key    "$scheme://$host$request_uri$mobile";
         proxy_cache_valid  200 10m;
         proxy_cache_valid  404 1m;
#         proxy_set_header Try-Redirect-To-File $redirect_to;
         proxy_pass         http://backend;
     }

     location / {
         root /var/www/html;
         auth_basic “REstricted”;
         auth_basic_user_file /var/www/html/.htpasswd;

         try_files $uri @wordpress;
     }

     location ~ .xml {
         rewrite ^/sitemap.xml$ /index.php?sitemap=1 last;
         rewrite ^/sitemap_index.xml$ /index.php?sitemap=1 last;
         rewrite ^/([^/]+?)-sitemap([0-9]+)?.xml$ /index.php?sitemap=$1&sitemap_n=$2 last;
         try_files $uri @wordpress;
     }


     location /healthcheck.html {
         satisfy   any;
         allow     all;
     }

     #error_page 404 /404.html;
     #    location = /40x.html {
     #}

        # redirect server error pages to the static page /50x.html
        #
     #error_page 500 502 503 504 /50x.html;
     #    location = /50x.html {
     #}


     #location /s3/ {
     #     proxy_set_header Authorization "";
     #     proxy_pass https://s3-ap-northeast-1.amazonaws.com/hogehoge-static-data/s3/;
     #}

}

ドキュメントルートディレクトリ作成

mkdir /var/www/html/hogehoge
chown nginx:nginx /var/www/html/hogehoge

php-fpm系設定

vi /etc/php-fpm.d/www.conf
www.conf
user = nginx
group = nginx
listen = /var/run/php-fpm.sock;
listen.owner = nginx

listen.group = nginx

listen.mode = 0660

security.limit_extensions = .php .html

php-fpmとnginx起動

/etc/rc.d/init.d/php-fpm start
/etc/rc.d/init.d/php-fpm restart

php-fpm.sockのパーミッション調整

chmod 666 /var/run/php-fpm.sock

動作確認

cd /var/www/html/hogehoge/
vi test.php 
test.php
<?php phpinfo();?>

ブラウザでアクセス

http://xxxxxxxxxxxxxxxx.amazonaws.com/hogehoge/test.php

basic認証準備

yum install -y httpd-tools
cd /var/www/html
htpasswd -c .htpasswd loginid
password

hogehoge.confのlocation / に下記追加

hogehoge.conf
location / {
      auth_basic “REstricted”;
      auth_basic_user_file /var/www/html/.htpasswd;  
}

mysqlインストール

yum install -y mysql-server
chkconfig mysqld on
service mysqld start

続きを読む

いますぐ使う CloudFront

CloudFrontとは

台数不明で性能不明ですが、グローバルに配置された、キャッシュサーバー。

効果

CloudFrontをリバースプロキシキャッシュとして立ててみました。お問い合わせページなど動的ページを除いて、ほぼ全部のリクエストをCloudFrontが捌いてくれてます。

d0ff6181-11f1-d277-eee8-2d5999566133.jpg

※効果には個人差がございます

課金ポイント

  • 料金 – Amazon CloudFront | AWS

    • データ転送料金
    • キャッシュクリア料金
      • 1ファイル1回クリアが、月間1000回までは無料。以降は0.005 USD

        • リリースとかでこまめに大量のファイルをクリアすると、金かかる
        • キャッシュ有効期限は24時間。24時間ほっとけるならキャッシュクリア料金かからない

用語整理

  • ひとつのCloudFrontは「ディストリビューション」。

    • EC2やRDSが「インスタンス」と呼んだように。
  • キャッシュルールは「ビヘイビア」
  • キャッシュ元データを配信するサーバーを「オリジン」
    • ELB、EC2、S3、その他のサーバー
  • キャッシュクリアは「インバリデート」
    • 「無効化リクエスト」と書いてある文書もある

CloudFront の設置場所

CloudFront無しの構成

EC2のローカルディスクにすべてがあります。静的コンテンツ、動的ページ、すべてのアクセスを、EC2が捌く必要があります。ApacheとかNginxでキャッシュを効かせると、負荷は軽くなるかも。みたいな涙ぐましいノウハウがあったのです。

f65e1219-60fe-d83f-c483-73b133b04544.jpg

横に置く

昔のCloudFrontは、GETとHEADしか受け付けなかったため、JS/CSS/画像/添付ファイルなどを配信するS3を別立てにして、その手前にCloudFrontを置いていました。HTMLの実装では、cssとかjs、画像のタグに書くのリンクを xxxxxxxx.cloudfront.com にしておくことで、こうできます。図ではS3に置くことにしていますが、リリースでのCSSやJSの同期とか、何かと状況が複雑になりがちです。

40904824-cf46-b636-e04c-ee2462471b96.jpg

前に置く

CloudFrontの2013年10月のアップデート から、すべてのHTTPメソッドを受けてくれるため、ウェブアプリサーバーの手前に置くことができます。この場合は、静的コンテンツはCloudFrontのキャッシュでリクエストを捌き、動的ページはCloudFrontはスルーさせて、EC2で処理させます。

626b87d4-abd6-5ba8-6835-b3319f2722c0.jpg

今からやるなら「前に置く」構成

CloudFront無しの構成に導入するなら、断然「前に置く」構成です。

ウェブアプリのソース改修不要で、CloudFrontを適切に設定して配置するだけでOKなので、面倒がないです。

ただし、特定のページだけIP制限してたりすると、ApacheやNginxの設定を変更する必要があります。

とりあえずCloudFrontを立てる

必須項目だけ埋めて、あとで直せばOKです。

  • AWSコンソールにはいる
  • CloudFrontのページに行く
  • Create Distribution
    • Webを選ぶ(RTMPは動画配信とかに使う用)

      • Origin Settings

        • Origin Domain Name

          • ELBエンドポイントURL、BeanstalkエンドポイントURL、S3エンドポイントURL、EC2 DNS名など
          • IPアドレスでなければOK
      • Default Cache Behavior Settings
        • あとで変えるので放置
      • Distribution Settings
        • Alternate Domain Names(CNAMEs)

          • このディストリビューションに当てる予定のドメイン名。
          • 「前に置く」構成なら、これまでELBに当てていたドメイン名を指定。
          • 「横に置く」構成なら、空欄でOK
      • 他はあとで変えればOKなので放置
      • Create Distributionボタン押す
  • ディストリビューションは全世界に分散して立つのと、微妙にダサい仕様のため、しばらく時間がかかります

ビヘイビアの掟

  • ビヘイビアリストの上から順に評価されます。
  • Default (*)は、
    • 一番下から動かせません。
    • 削除できません。
    • どのビヘイビアにも当たらなかった場合のため存在します。
  • パスパターンにマッチしたら、そのビヘイビアだけに従って、キャッシュを見たり、オリジンにスルーしたりする
    • なので、ビヘイビアの上下の並び順は重要

ビヘイビアの設定方針

下記のどちらか。後からでも変更はできますが、どっちで行くかを考えるために、先に切り分けておくと良いです。

  • Default (*)を「キャッシュする」で書く。他のパスパターンは「キャッシュしない」で書く。
  • Default (*)を「キャッシュしない」で書く。他のパスパターンは「キャッシュする」で書く。

キャッシュしないページの設定

  • Path Pattern

    • 仮に http://hoge.example.com/contact/piyo.jpg みたいなとき

      • /contact/piyo.jpg
      • /contact/*.jpg
      • *.jpb
    • みたいに、そのキャッシュルールを適用するパスパターンを指定します。
  • Allowed HTTP Methods
    • 全部入りのを指定
  • Forward Headers
    • 「all」を指定
  • Object Caching
    • Customize
    • TTL(min, max, default)
      • ぜんぶゼロを指定
  • Forward Cookies
    • 「all」を指定
  • Query String Forwarding and Caching
    • 「forward all, cache based on all」を指定

キャッシュするページの設定

  • Path Pattern

    • 仮に http://hoge.example.com/contact/piyo.jpg みたいなとき

      • /contact/piyo.jpg
      • /contact/*.jpg
      • *.jpb
    • みたいに、そのキャッシュルールを適用するパスパターンを指定します。
  • Allowed HTTP Methods
    • GET,HEAD を指定
  • Forward Headers
    • 「Host」は必須。他にも必要なものがあれば追加。
  • Object Caching
    • Use Origin Cache Headers
    • Customizeにして、TTLを入れてもOK
  • Forward Cookies
  • Query String Forwarding and Caching
    • 「forward all, cache based on all」を指定

DNS設定

ビヘイビアふくめて、ディストリビューションの設定が完成したら、DNSの設定を書き換えます。

ディストリビューションには、「d1lxxxxxxxxx.cloudfront.net」のような、一意なドメイン名が発行されます。

Alternate Domain Names (CNAMEs)に入れたドメイン名のCNAMEとして、ディストリビューションのドメイン名を向けた、DNS CNAMEレコードを作成します。

動作確認

サイトにアクセスして、期待したとおりにビヘイビアが設定できているか、確認しましょう。

ChromeのデベロッパーツールのNetworkタブで、個々のファイルのレスポンスヘッダーに下記のようなのがあれば、CloudFrontを経由しています。

Via:1.1 41f313008af830d498dcb13814523bd7.cloudfront.net (CloudFront)
X-Amz-Cf-Id:xcP_6KiTFG_guNA9dRA-KOW6pg740-3mP1SvSrt2NqKGndWGPJKVuA==
X-Cache:Hit from cloudfront

X-Cacheに、キャッシュヒットしたかしてないかが記載されます。HitとMiss、ほかにもいくつかありますが、、、

  • X-Cache:Hit from cloudfront

    • CloudFrontにあるキャッシュが返っています
  • X-Cache:Miss from cloudfront
    • CloudFrontにキャッシュがなく、オリジンから返っています

HitとMissが想定と異なる場合は、ビヘイビアの調整が必要です。がんばりましょう。

その他、TIPS

制限、仕様

導入前に、CloudFrontというプロダクトの制限と仕様が、プロダクトの制限と仕様にマッチするのか、検討が必要です。

参考文書

続きを読む

AMIMOTO AMIを使ってAWSにWordPressをインストールする

2016年の春頃に書いてた下書きが出てきたのでとりあえず投稿する。

  • AMIMOTO HHVM AMIを選んでインスタンスを起動
  • 10分ぐらい待つ
  • Elastic IPを紐付ける
  • Elastic IPのアドレスにアクセス
  • インスタンスIDを入力してWordPressをインストール
  • Route 53から独自ドメインのAアドレスをElastic IPに設定 参考
  • SSHでインスタンスに接続$ ssh -i ec2.pem ec2-user@[Elastic IP]
  • $ sudo yum update
  • SFTPで接続してファイルを操作できるように$ curl -L https://raw.githubusercontent.com/amimoto-ami/run-httpd-as-ec2-user/master/run-httpd-as-ec2-user.sh | sudo bashを実行
  • TransmitでSFTPを設定。サーバ:Elastic IP、ユーザ名:ec2-user、パスワード:ec2.pem、リモートパス:/var/www/vhosts/[インスタンスID]/

SSLを設定

  • $ sudo openssl genrsa -des3 -out ./ssl.newpeace.vision.key 2048で鍵を生成
  • $ sudo openssl rsa -in /etc/nginx/ssl.newpeace.vision.key -out /etc/nginx/ssl.newpeace.vision.keyでパスフレーズを解除
  • $ sudo openssl req -new -key ./ssl.newpeace.vision.key -out ./ssl.newpeace.vision.csrで鍵を生成
  • 参考
  • ssl.globalsign.com.csrの内容を申請フォームに入力
  • SSL証明書を取得
  • SSL証明書をインストール
  • $ sudo vi /etc/nginx/ssl.newpeace.vision.crtで「証明書 SHA256」の内容をコピー
  • $ sudo vi /etc/nginx/dvcacert.cerで「中間CA証明書」の内容をコピー
  • $ sudo cat ssl.newpeace.vision.crt dvcacert.cer > ssl.newpeace.vision.pemで「証明書 SHA256」と「中間CA証明書」を結合(これできない。。)
  • $ sudo chmod -R 777 /etc/nginx/conf.d/でNGINXの設定ファイルに書き込み権限を付与
  • /etc/nginx/conf.d/ssl.default.confを作成して、
/etc/nginx/conf.d/ssl.default.conf
server {
    listen      443 default spdy ssl;
    server_name _;
    root        /var/www/vhosts/i-c3880266;
    index       index.html index.htm;
    charset     utf-8;

    ssl                       on;
    ssl_certificate           /etc/nginx/ssl.newpeace.vision.pem;
    ssl_certificate_key       /etc/nginx/ssl.newpeace.vision.key;
    ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers               HIGH:!aNULL:!MD5;

を書く。

default.confcharset utf-8;の下にreturn 301 https://$host$request_uri;を追記

続きを読む

Bitnamiのロゴが邪魔!

AWSの「WordPress powered by Bitnami(HVM) 」AMIにてEC2インスタンスを立ち上げWordPressページにアクセスすると、ページ右下に以下のようなリンクが表示される。それを削除する方法。

スクリーンショット 2017-05-06 15.07.35.png

手順

① ターミナルでEC2インスタンスにアクセス。

 ※接続するためのコマンドがわからない方
 1, EC2コンソールにログイン。
 2, 左サイドバーの Instances をクリック

スクリーンショット_2017-05-06_15_18_47.png

 3, 上部の Connect ボタンをクリック。すると、コマンドが表示されるため、その通りに実行。

スクリーンショット_2017-05-06_15_12_57.png

② EC2インスタンスに接続できたら、以下コマンド実行。Bitnamiのロゴを非表示にする。

terminal
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1

③ 次に、以下コマンド実行。Apacheを再起動する。

terminal
sudo /opt/bitnami/ctlscript.sh restart apache

④ 最後に、サイトにアクセスし非表示になっているか確認する。

実行後のターミナル

以下のようになっていれば大丈夫。

terminal
bitnami@ip-000-00-00-00:~$ sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
bitnami@ip-000-00-00-00:~$ sudo /opt/bitnami/ctlscript.sh restart apache
Unmonitored apache
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd stopped
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd started at port 80
Monitored apache
bitnami@ip-000-00-00-00:~$ 

以上
参考:http://kussuue.com/2016/06/wordpress_bitnami/

続きを読む