Wordpressを通してFastlyを使ってみる

https://wp.infra-workshop.tech/?tribe_events=wordpress%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6fastly%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3
https://wp.infra-workshop.tech/?tribe_events=wordpress%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6fastly%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

アジェンダ

自己紹介
そもそもCDNとは？
Fatlyの特徴
ハンズオンの内容説明
ハンズオン

自己紹介

名前
- Morix(@morix1500)
職歴
- 2010年～2016年 Webアプリエンジニア
- 2016年～2018年3月インフラエンジニア
- 2018年4月～　フルスタックエンジニア
ブログやってます
- こちら

そもそもCDNとは？

Content Deivery Networkの略。
文字通り、コンテンツを配信するためのネットワーク。

引用: https://zenlogic.jp/option/cdn/

CDNを導入するメリット

コンテンツ配信のレイテンシを小さくできる
アクセス負荷を軽減できる

CDNについての書籍

アカマイ　知られざるインターネットの巨人

主なCDNプロバイダー

アカマイ
CloudFront
Cloudflare
Fastly

国内のCDNシェアについて

引用: 国内CDNシェア(2017年10月)

国外のCDNシェアについて

引用: Web Technologies of the Year 2017

CDNの効果について

CDN(CloudFront)を使って、あるサイトを高速化させました。

よければ見てみてください！
https://qiita.com/Morix1500/items/0eac072a027d478a6b83

Fasltyの特徴

Fastly社が提供しているCDNサービス。
以下のような特徴がある。

高速配信
インスタントパージ
リアルタイムログデータの取得

高速配信

世界中に設置されたPOP（配信拠点サーバー）にコンテンツをキャッシュし、
ユーザにより近いPOPから配信するため、高速な配信が可能。

引用: https://www.fastly.com/network-map

インスタントパージ

約150msでキャッシュをパージすることができる。
これにより、動的なページのキャッシュを容易にでき、アクセス負荷を軽減できる。

リアルタイムログデータの取得

アクセスログをリアルタイムに取得できる。

Fastlyの事例

海外

The New York Times
Pinterest
Github
Airbnb
dev.to

国内

Cookpad
メルカリ
日本経済新聞社

ハンズオンの内容説明

実際にFastlyを使ってみてどういうサービスなのか理解する。

準備するもの

ロリポップマネージドサービスのアカウント
- 今ならロリポップマネージドサービスでWordPressを無料で作れる
Fastlyアカウント
- 配信50GBまで無料！
HttpRequestいじるやつ
- RequestHeaderをいじりたので以下拡張機能をインストールしておく
- https://chrome.google.com/webstore/detail/header-editor/pkokmcnklmgbepioackopoknkdlhefjl?hl=ja

ハンズオンの大まかな流れ

WordPressサイトを作る
Fastlyの設定を行う
WordPressにFastlyのプラグインをインストールする
動作確認する

内容は以下のものをハンズオン形式で行う。
https://qiita.com/Morix1500/items/36e263acbf58702775db

ハンズオン

まずはサイトのドメインを決めよう

◯◯.global.ssl.fastly.net
※〇〇は適当に

WordPressサイトを作成する

ロリポップマネージドサービスのアカウントを作ってると思うのでログイン
https://mc.lolipop.jp

1.「プロジェクト作成に進む」をクリック
2. WordPressを選択
3. 「カスタムドメイン」に上記で決めたドメインを指定
4. WordPressのユーザを適当に作る
5. 「作成する」をクリック
6. 詳細画面にいくと「カスタムドメイン」のところにIPアドレスがあるのでメモっとく

現在の設定でWordPressサイトを見てもスタイル崩れてるけど無視

Fastlyの設定をする

https://www.fastly.com/

■最初の設定
Domain: ◯◯.global.ssl.fastly.net
Address: さっき作ったIPアドレス
Enable TLS?: Yes
Certificate hostname: ロリポの「プロジェクトURL」にかかれているドメインを指定

次に表示する画面で、「Enable Gzip」をクリック
Continueをクリック
Expolerをクリック

WordPressサイトの動作確認

この時点で最初に決めたドメインをブラウザでアクセスすると
WordPressサイトが正常に表示される。

WordPressの管理画面に入りログインする。
https://◯◯.global.ssl.fastly.net/wp-login.php
※WordPress管理画面にログインする際は別ブラウザでログインすることをおすすめします
理由は、ログイン状態だとキャッシュされないようになってしまうため
今回の動作確認ができない。

「投稿」にある記事を適当に編集
Fastlyでキャッシュが有効になっていることを確認する。

キャッシュを削除する場合は、Fastlyのコンソール画面で
「Purge」=>「Purge URL」でパージできる。

Fastlyプラグインを導入する

WordPress管理画面の「プラグイン」をクリック
「新規作成」をクリック
検索窓で「Fastly」を検索
Fastly　を今すぐインストール
「有効化」クリック
WordPress管理画面にFastlyという設定画面が増えるのでそこにいく

APIトークンとサービスIDが必要らしいというのがわかる。
Fastlyのコンソールで取得できる。

APIトークンの取得方法

Create Token
Password: Fastlyのログインパスワード
Name: アクセストークンの名前
Apply to: 今回作成したサービスのみ選択する
Set a scope: Global API accsess

アクセストークンをもらえるのでコピーしとく
サービスIDは今回作成したサービスのダッシュボードに載ってる

取得したら、WordPressのFastlyの設定画面の
APIトークンとサービスIDを入力するところに入力し、保存。
TEST CONNECTIONで「Connection Successful on service ～」と表示されたらOK。

ここまで出来たら、一度Fastlyのキャッシュをすべてパージする。

Fastlyの動作確認

Http Requestする際のHeaderをいじる。
Chromeの拡張機能で以下のヘッダーを追加

名前	値
Fastly-Debug	1

これでページを再読み込みをし、Response Headerを見てみる。

Fastlyの詳細設定

以下のことをやる

特定のパスをキャッシュ無効化
特定のパスをIP制限する

特定のパスをキャッシュ無効化

Fastlyコンソールの右のほうにある「CONFIGRATION」の「Clone Active」をクリック
これでFastlyの設定を編集できるようになる。

「Setting」-> 「Cache settings」
「Attach a condition」をクリック

条件の設定

Name: isAdmin
Apply if:

req.url ~ "^/wp-admin" || req.url ~ "^/wp-login"

キャッシュ無効設定

Name: admin
TTL: 0
Action: Pass

CREATEをクリック

特定のパスをIP制限する

カスタムVCLという機能を利用する。
これはVarnishの設定ファイルをアップロードすることができる機能。
サポートに連絡しないとこの機能は使えない。

以下のファイルをアップロードする。

acl myhome {
   "localhost";
   "自宅のIPアドレス"/32;
}

sub vcl_recv {
#FASTLY recv
  if ((req.url ~ "^/wp-admin" || req.url ~ "^/wp-login") && client.ip !~ myhome) {
    error 403 "Forbidden";
  }

  if (req.request != "HEAD" && req.request != "GET" && req.request != "FASTLYPURGE") {
    return(pass);
  }

  return(lookup);
}

sub vcl_fetch {
#FASTLY fetch

  if ((beresp.status == 500 || beresp.status == 503) && req.restarts < 1 && (req.request == "GET" || req.request == "HEAD")) {
    restart;
  }

  if (req.restarts > 0) {
    set beresp.http.Fastly-Restarts = req.restarts;
  }

  if (beresp.http.Set-Cookie) {
    set req.http.Fastly-Cachetype = "SETCOOKIE";
    return(pass);
  }

  if (beresp.http.Cache-Control ~ "private") {
    set req.http.Fastly-Cachetype = "PRIVATE";
    return(pass);
  }

  if (beresp.status == 500 || beresp.status == 503) {
    set req.http.Fastly-Cachetype = "ERROR";
    set beresp.ttl = 1s;
    set beresp.grace = 5s;
    return(deliver);
  }

  if (beresp.http.Expires || beresp.http.Surrogate-Control ~ "max-age" || beresp.http.Cache-Control ~ "(s-maxage|max-age)") {
    # keep the ttl here
  } else {
    # apply the default ttl
    set beresp.ttl = 3600s;
  }

  return(deliver);
}

sub vcl_hit {
#FASTLY hit

  if (!obj.cacheable) {
    return(pass);
  }
  return(deliver);
}

sub vcl_miss {
#FASTLY miss
  return(fetch);
}

sub vcl_deliver {
#FASTLY deliver
  return(deliver);
}

sub vcl_error {
#FASTLY error
}

sub vcl_pass {
#FASTLY pass
}

sub vcl_log {
#FASTLY log
}

ハンズオンを通して確認したこと

Fastlyの有効化の方法
キャッシュの仕組み
インスタントパージの動作
Fastlyの設定方法

20180318_wordpressを通してfastlyを使ってみる