さくらのレンタルサーバ+αで費用を節約しつつ軽めのサイトを作る

はじめまして、普段インターネット上ではおもに「Minecraft」の活動を中心におこなっているえちからと申します。クリエイティブ建築がメインなのですが、VPSを使ったサーバ運用も時々やっている人です。

また本業に関しても趣味が高じて、フリーランスでWordpressをベースにした「Web制作」「Webマーケティング」をおこなっています。

さて今回は[「さくらのゴールデンカレンダー2022」](https://gw-advent.9wick.com/calendars/2022/116)8日目への寄稿も兼ねて、自分のサイト用に構成しているさくら+αを使ったWebサーバについて設定方法と一緒に紹介していきます。


## 利用サービス
はじめに、今回の構成で利用するサービスを簡単に説明します。
### さくらのレンタルサーバ　スタンダードプラン
**月額524円（年間一括5,238円）**
Webサイトの置き場として使用。

いうまでもなく老舗。比較的費用を抑えつつ、そこそこのサーバスペックとコントロールパネルの利用しやすさが魅力だと思っています。あ、ドメイン費用は別にかかります。

ちなみに2022年2月からは料金そのままで容量アップ・転送量無制限化・高速化などをおこなったそうです。執筆日現在ではまだその恩恵を受けられていないため、早く移行ツールがリリースされないかなと待ちわびています。
### Cloudflare
**ドメイン費用+無料枠**
「＋α」の部分で、ドメインレジストラ・ネームサーバ・CDNなどとして利用。

いうまでもなく有名どころ。無料でも本格的なネームサーバ設定、CDN設定などができます。最近になってドメインの移管だけでなく、直接ドメインを取得することもできるようになりました（JPドメインは取得・移管とも非対応）。
## 構成のポイント
まずは、この構成の核となる部分のメリットを簡単に説明したいと思います。
### さくらの弱い部分（表示速度・ドメイン費用）をカバーする
さくらのレンタルサーバは容量・サーバを考えると、コスパ的に素晴らしいと思っています。しかしながらWordpressを運用する場合、少々スペック不足という声も。
かくいう自分も元々さくらのVPSから費用節約を兼ねて移行したのですが、KUSANAGI環境と比べてしまうとどうしても表示速度が気になる感じ。
この「表示速度」をCloudflareでカバーする構成にすることで、KUSANAGI環境と同じまでとは言いませんがそこそこの表示速度を確保することができています。（レンタルサーバにもKUSANAGI環境導入してくれないかな、という気持ちはありつつ）。

またさくらにはドメイン取得サービスもありますが、ちょっと高めなのがネック。そこで請求を一本化したいという想いをこらえつつ、「卸値+ICANN手数料」で取得・更新ができるCloudflareを使います。手間を惜しまないなら「ドメイン取得時」は割引の大きいレジストラを選んで、3か月ほど経ったらCloudflareに移管することで費用はさらに抑えられますね。
あ、あとCloudflareに移管すればDNSSECの設定ができるので、セキュリティ面でもおすすめします。

### SSLまわりで発生するエラーを回避
さくらとCloudflareは他サービスと比べると非常に相性がよいのですが、唯一相性が悪いといえるのがSSLまわりです。

さくらのレンタルサーバでは無料SSLとしてLet's Encryptが使用できますが、Cloudflareを通すと証明書更新に失敗することがちらほら。最悪の場合2か月ごとにDNSルーティングを通す設定を解除して、SSL証明書を再取得して、再度DNSルーティングを設定して、という手間が発生します。かといってhttps接続が標準となった現在、SSL設定をしないわけにもいきません。

ここで考えておきたいのが、さくら側のSSL証明書は何に使うのかという点。

CloudflareのDNSルーティングを通す場合、Webブラウザ側には別途発行される「Cloudflareのエッジ証明書」が表示されます。するとさくらに設定するSSL証明書は、「さくら側でhttpsへの転送を有効にするため」「さくらとCloudflare間の通信を暗号化するため」に使われるだけです。

つまり証明書の形さえ整っていれば、実際にSSL証明書として機能しなくても問題ないということになります。そこから思いつくのが自己署名証明書ですが･･････さくらでは証明書インストール時に検証をおこなっており、正規の認証局がないとエラーになります。

~~そこで、さくらの証明書検証が通るCloudflareのクライアント証明書（最長15年間有効）を使います。本来はオリジン証明書で運用するべきなのでしょうが、なぜかこちらは証明書エラーが発生するので･･････。~~
2023/04/20追記：証明書検証の挙動が逆になり、オリジン証明書しか通らなくなりました。本来はこちらの挙動が正しいので、それでよいかと思います。

なお、独自SSLに関してはその事業者で購入しない限りほとんど設定できないサービスも少なくないようです。それを考えると、じつはSSLまわりでも「さくらとCloudflareは相性がよい」といえるかもしれません。

## 実際に設定する流れ
では実際の設定方法について、簡単にご紹介。[過去に書いた備忘録](https://business.echikara.net/server-config/sakura-cloudflare-ssl-config/)よりはちょっと詳しめに。

設定はさくら/Cloudflare双方の設定画面を行き来するので、ウインドウは閉じないようにしてください。

### 【Cloudflare】ネームサーバの設定
まずはCloudflare（https://dash.cloudflare.com/login ）にログイン。ダッシュボードに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631660/62b95fb1-4f37-b666-6938-00d012e09f17.png)

新たにドメインを取得する場合は左側の「ドメインの購入」右側の▼を押し（①）、「ドメインの登録」（②）に進むとドメイン検索画面になります。
ここで希望ドメインを入力、Purchaseを押せば購入画面へ進むので、各種情報を入れPaypalもしくはクレジットカードで支払います（ドル建てでの支払い）。

すでに持っているドメインを設定する場合、Cloudflare以外で取得した場合は「サイトを追加」（緑色の丸）で自分のドメインを入力し、画面に従ってレジストラ側でCloudflareのDNSサーバをNSとして入力します。

なおメインのネームサーバは変えたくない場合、DNSレコードでNSが指定できるならサブドメインだけCloudflareにできるはずです。ただこの設定に対応しているネームサーバ、あまり多くない気がします･･････。

### 【さくら】サーバ情報のチェック
「さくらのレンタルサーバ」のコントロールパネル（ https://secure.sakura.ad.jp/rs/cp/ ）にログイン。会員メニュー→「契約中のサービス」でも飛べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631660/2e231626-7264-2e64-2e81-3fd86e4f9ee4.png)
左側のメニューから「サーバ情報」→サーバ情報を選択し、ホスト名・IPアドレス（IPv4・IPv6とも）をメモしておきます。

### 【Cloudflare】DNSの設定
Cloudflareのダッシュボードに戻り、「Webサイト」から設定するドメインを選択。その後DNSを選択したあと「レコードを追加」をクリックします。

その後、以下のレコードを設定します。（サブドメインを設定する場合は名前のところなど変更してください）
|タイプ|名前|設定値|
|:--:|:--:|:--|
|A|@|メモしたIPv4アドレス|
|AAAA|@|メモしたIPv6アドレス|
|CNAME|www|@|

プロキシステータス（DNSルーティング）は「オン」で問題ないです。またサブドメインを同一サーバ上に追加していく場合はCNAMEを使うと便利です。

メールを使う場合は、以下のレコードも設定します。
|タイプ|名前|設定値|
|:--:|:--:|:--|
|MX|@|メールサーバ：@<br>優先順位：10|
|SRV|@|サービス：_imap<br>プロトコル：TLS<br>優先順位：1<br>ウェイト：1<br>ポート：993<br>ターゲット：コンパネ右上のアドレス|
|SRV|@|サービス：_smtp<br>プロトコル：TLS<br>優先順位：1<br>ウェイト：1<br>ポート：587<br>ターゲット：コンパネ右上のアドレス|
|TXT|@|	"v=spf1 a:【ホスト名】 mx ~all"|

細かい部分はお好みで。SRVレコードは設定しておくと、メールソフトでサーバ情報を自動取得できる気がします。


### 【さくら】ドメイン設定とSSL設定の途中まで
さくらの「コントロールパネル」に戻り、「ドメイン/SSL」→「ドメイン/SSL」の画面へ。
「ドメイン新規追加」から一番下の「他社で取得したドメインを移管せずに使う」の「追加」をクリック。
「他社で取得した独自ドメインの追加」に入力（サブドメインはその下）して「追加」をクリック。
※ネームサーバを設定変更するよう指定されているが、無視してOK。

ドメインが追加されるので、右側の「SSL」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631660/7a8f4855-059b-fe78-ecf9-fcc957fa3055.png)
「登録設定を始めるSSL証明書の種類を選択」から「独自SSL」の利用するをクリック。

「秘密鍵の登録」→「秘密鍵の生成」で秘密鍵を作ります。バックアップで必要なら「秘密鍵ダウンロード」ボタンでダウンロードしておいてください。
「CSRの作成」から各種情報を入力（サーバ間のSSLで使われるだけなので、厳密に入力しなくても大丈夫）。コモンネームは「www」を付きを使う場合はそちらで。入力したら「作成」をクリック。

以下の場所の「内容を表示」をクリックして、出てきた画面のCSR欄を全部コピーする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631660/a1319782-8ac2-90f4-0f34-77e74372ebbb.png)

ここまで終わったらCloudflareへ再度移動します。

### 【Cloudflare】~~クライアント証明書の作成~~オリジン証明書の作成
Cloudflare左側の「SSL/TLS」右側の▼をクリックし「~~クライアント証明書~~オリジン証明書」を選択。
証明書一覧が表示されたら「証明書を作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631660/4a2edd96-2b11-9116-f97b-79cb644e6156.png)
※2023/04/20追記：スクリーンショットはクライアント証明書になっていますが、設定の流れは同じです。

「自分のプライベートキーとCSRを使用する」のラジオボタンを選択すると入力欄が表示されるので、コピーしておいた中身を貼り付けます。
「証明書の効力」はデフォルトで10年になっているので、15年（または任意の期間）に変更して「作成」をクリック。

証明書が発行されるので「キーフォーマット」はデフォルトのPEMで、証明書欄をクリック（内容がクリップボードへコピーされる）。
### 【さくら】証明書・中間証明書のインストール
さくらのコントロールパネルに戻り証明書から「証明書インストール」をクリック。コピーしている証明書を貼り付けて「インストール」。

これで証明書はインストールされたように見えますが、現状だと中間証明書がないためサイトを表示しようとするとエラーを吐きます。

Cloudflareの中間証明書は[ここ](https://developers.cloudflare.com/ssl/origin-configuration/origin-ca#h_30cc332c-8f6e-42d8-9c59-6c1f06650639)にあるので、「Cloudflare Origin RSA PEM」を探してダウンロードします。
ダウンロードしたらテキストエディタで開き、中身を全部コピーします。あとは証明書と同様に、中間証明書としてインストールしてください。

ここまでの各種設定で、SSL証明書が無事にインストールされた状態になっています。更新時には同様の手順で再設定できるはずですが、15年と長期の証明書なので確認はしていません。

### 【さくら】ドメインの設定調整
現状だとSSL証明書は有効になっているものの、https接続にはなっていません。

https接続を有効にするために（+いろんな設定）、ドメイン/SSLから設定するドメインの「設定」を開き、設定を調整します。

ドメイン利用設定：「マルチドメインとして利用する」を選択。「www.が付与されたサブドメインも利用する」のチェックは入れておくことを推奨（サブドメインでの設定時などは入れなくてもよい）。
- Web公開フォルダ：複数のサイトを運用する場合など、必要なら指定してください。
- IPv6アドレスの使用：「利用する」にチェック。
- SSLの利用：「SNI SSLを利用する」。
- HTTPS転送設定：「HTTPSに転送する」にチェック。
- www転送設定：好みに応じて「～に転送する」を選択。サブドメインで「www.example」のようなレコードを作っていない場合、必ず真ん中を選択するようにしてください。
- メールの利用範囲：利用する場合は「全ユーザ」を選択。
- SPFレコードの使用：メールを使う場合は「利用する」をチェック。ただしDNSレコードの設定なので、チェック入れてなくても大丈夫そう。

さくらでの設定は以上です。ただWordpressなどのCMSを使う際はアップロードサイズ上限に引っかかることが多いので、「スクリプト設定」のPHPiniファイル設定を以下のような感じに設定しておいた方がよいかなと思います。 

上限2GBに設定する場合の例
~~~PHP
post_max_size = 2000M
upload_max_filesize = 2000M
date.timezone = "Asia/Tokyo"
~~~


### 【Cloudflare】設定の調整
Cloudflareにて、「SSL/TLS」以下の各項目の設定を調整。（一度設定すれば再度の設定は不要）
- 「概要」のSSL/TLS 暗号化モード：「フル」に設定。 ~~残念ながら「フル（厳密）」はエラーを吐く。~~ オリジン証明書が通るので「厳密」でもいけるかも
- 「エッジ証明書」の常にHTTPSを使用：「オン」に設定。
- 「エッジ証明書」の日和見暗号化：「オン」に設定
- 「エッジ証明書」のTLS 1.3：「オン」に設定
- 「エッジ証明書」のHTTPSの自動リライト：「オン」に設定

これで一通り設定は完了です。

## 参照記事
さくらのレンタルサーバ｜スタンダードプランの機能
https://rs.sakura.ad.jp/standard.html
【さくらのレンタルサーバ】表示速度および処理能力が従来の最大5倍となる新サーバーを提供開始
https://www.sakura.ad.jp/information/announcements/2022/02/16/1968209031/
Cloudflare Registrar
https://www.cloudflare.com/ja-jp/products/registrar/
Cloudflare Free SSL/TLS
https://www.cloudflare.com/ja-jp/ssl/
自己署名証明書とは-IT用語辞典 e-Words
https://e-words.jp/w/%E8%87%AA%E5%B7%B1%E7%BD%B2%E5%90%8D%E8%A8%BC%E6%98%8E%E6%9B%B8.html
DNSの拡張仕様、SRVレコードとENUM（ITmedia）
https://atmarkit.itmedia.co.jp/ait/articles/0403/09/news076.html
さくらのレンタルサーバのPHPの環境を確認、整えてみよう
https://rs.sakura.ad.jp/column/rs/rs-php-ini/