PHP
HTML
WordPress
GoogleCloudPlatform

1時間で出来る!最強のWordPress環境構築(永久無料)

WordPressを簡単に、てっとり早くベストプラクティスな環境を作りたい!

そんな方に、私が日頃行っていて、最強だと思っている方法をご紹介します。
今回は初心者の方向けに、ターミナルや特別なツールは一切使いません。

  • [1/5]クラウドサーバーにWordPressを構築 (1クリックでコンテナをデプロイ)
  • [2/5]CDN連携 & DNS設定 (永久https化/速度対策)
  • [3/5]クラウドストレージとWordPressの自動連携 (容量対策)
  • [4/5]簡易セキュリティ対策 (ハッキング対策)
  • [5/5]必須プラグインのインストール (SEO対策)

ここまでを1時間で完全無料で用意する方法をご紹介します。
(ターミナルを用いた、発展的な内容については、需要がありましたら別記事を作成します。)

※今回の記事に関してDNS設定の為にドメインが必要となります。まだドメインをお持ちで無い方は、こちらの記事をご参考に無料ドメインを取得してください。
( @mattn 様ご指摘 6/5追記)

[1/5] クラウドサーバーはGoogle Cloud Platformを選択する

この項目では土台となるクラウドサーバーのアカウント作成から、必要となる設定を全てご紹介します。

まず、WordPressに最も適しているサーバーはGoogle Cloud Platform一択です。
何故ならば、WordPressを構築する強力なプラグインとの連携や、デプロイするコンテナがGoogle Cloud Platformでは一手間で作成できるからです。

また、永年無料でサイトを公開できるのもありがたいです。
スクリーンショット 2019-06-02 20.43.40.png
今回ご紹介する方法では、この永年無料で運営できるプランの設定を前提にすすめていきます。

もし現在、AWSやConohaを利用されていて移行したいという方は、簡単に一クリックで移行できる「All-in-One WP Migration」を利用してみてください。

まずはGoogle Cloud Platformにアカウントを作成する

アカウント作成は5分程度で完了できます
こちらのリンクから公式サイトに飛び、下記画像の赤丸のボタンを押してください。

スクリーンショット 2019-06-02 19.05.09.png

お支払い情報はGoogleアカウントに登録されているクレジットカードの情報が反映されます。
まだ登録していない方は、新しくクレジットカードかバーチャルカード(未成年でも可能 LinePayなど)を登録してください。

Google Cloud Platformのダッシュボードを開く

登録が完了したら、先程の画面に「コンソール」ボタンが追加されますのでクリックしてください。
もしくは、こちらのリンクから直接コンソールを開いて下さい。

スクリーンショット 2019-06-02 19.23.45.png

コンソール画面から、左上の「≡」メニューをクリックして、「Marketplace」を選択しましょう。

スクリーンショット 2019-06-02 19.43.37_censored.jpg

WordPressのコンテナを選択して、1クリックでデプロイする

「Marketplace」を開くと、下記のように大きな画面が開きます。
この画面からは、Djangoなどの主要なWebアプリケーションのコンテナが搭載されたサーバーを1クリックでデプロイしてくれます。

スクリーンショット 2019-06-02 19.50.54.png

ここでは、「wordpress with nginx and ssl certified by bitnami」と検索してください。
このコンテナは純粋なWordPressよりも大幅に安価/高速で、かつ今流行のletsencryptが最初から搭載されています。(ちなみに他に有名なコンテナであるKUSANAGIはセキュリティが強すぎて、プラグインと大量に衝突するため絶対に非推奨です。)
スクリーンショット 2019-06-02 20.16.42.png

こちらから「COMPUTE ENGINE上で起動」をクリックしてください。
下記の通りに設定画面を編集して、「デプロイ」ボタンを押して下さい。
(us-east4は除く。 @negiboudu 様6/4によるご指摘。)

スクリーンショット 2019-06-02 20.55.34.png

WordPress構成完了

以上の工程で、WordPressのサイトがクラウドサーバー上に構築され、全世界に公開されました!
早速、下記画像の赤枠内をクリックして、構築したばかりのWordPressサイトを確認してみましょう。

スクリーンショット 2019-06-02 21.21.33.png
スクリーンショット 2019-06-02 21.24.26.png

ここまでで、WordPressの本体を公開状態にする事はできました。
ここからあと2つ、Google Cloud Console上で操作をしましょう。

動的IPを静的にする

こちらのURLをクリックすると、外部IPアドレスというページに飛びます。
こちらに先程作成したプロジェクトのIPアドレスが「エフェメラル」というタイプを、「静的」に変更してください。

スクリーンショット 2019-06-02 21.33.29.png

この時、一番左に表示されているIPアドレスをコピーしておきましょう!

Cloud Storageの設定にて、バケットの権限を付与する

こちらのURLから、サイト用のCloud Storageを作成しておきます。
左上の「バケットを作成」を押して、設定画面に入ってください。

名前だけ適当に入力しましょう。(本来はサイトドメイン名が好ましいのですが、Google Search Consoleの設定が必要なため、中級者向き。今回は一旦無視。)そして、「デフォルトのストレージクラス」をRegional、「場所」をus-east4以外のus-***を選択してください。
スクリーンショット 2019-06-13 20.36.32.png
(@Chikana 様情報 6/13追記)

スクリーンショット 2019-06-02 23.04.45_censored.jpg

バケットが作成されたら、画像の右に赤枠で囲ってある部分を押して、「パケットの権限を編集」を押しましょう。
下記のような画面が開きますので、「ストレージオブジェクト閲覧者」のメンバーに「allUsers」を追加してください。
スクリーンショット 2019-06-02 23.17.18.png

以上でGoogle Cloud Platform上の設定は完了です!
ここまで、「アカウント作成」⇛「コンテナをデプロイ」⇛「動的IPを静的にする」⇛「DNS設定をしてドメインを有効化する」⇛「Cloud Storageを有効化する」方法をご紹介して参りました。

[2/5]CDN連携 & DNS設定

この項目では、常時https化とサイトスピード向上化を実現するCDN連携と、そのCDNが提供しているDNS設定の方法をご紹介します。
本来https化するためには、自分で証明書を作ったり手動で更新したりしないといけないのですが、この方法なら永久自動https化されます。

まずはこちらのCloudflareというサイトに登録しましょう。
2017-03-29-12.46.02.jpg

会員登録が済んだら、ダッシュボードに飛びます。
「Add a Website」という欄に、自分のサイトのURLを入力しましょう!

2017-03-29-12.51.29-1490759585305.png

プランは必ず「Free」を選んで下さい。
有料プランの方は大規模会員サイトなどで必要となりますが、100万PVに満たないほどの中規模サイトであれば不要です。

次にDNSレコードに関する設定画面(下記画像)が出てきます。
こちらでは、登録したいIPアドレスとドメインを紐付けるDNS設定を行う事が可能です。こちらで先程Google Cloud Platformで作成したIPアドレスをコピーペーストしましょう!
スクリーンショット 2019-06-05 7.37.37_censored.jpg

最後に新しいネームサーバーの登録が求められます。このネームサーバーを、ドメインを買ったサイト(お名前ドットコムなど)に登録してください。
2017-03-29-13.16.25-1490761046545.png

これで登録は完了です。反映に30分ほどかかりますが、干渉する事はありませんので、そのまま待つか次の作業を始めるなどしましょう。反映が完了すると、ダッシュボードに行く事ができるようになります。

次に、Cloudflareの設定画面から「Always Use HTTPS」を選択しましょう!
これを選択しておくと、反映に30分くらいかかりますが、自動でHTTPS化されます。
スクリーンショット 2019-06-03 12.43.50.png
また、「Automatic HTTPS Rewrites」もONにしましょう。
例えばCSSをhttpで指定しているファイルが合った場合、この機能を使う事でリファレンスが壊れないようにしてくれます。
( @negiboudu 様ご指摘。6/6追記。 )
スクリーンショット 2019-06-06 14.00.32.png
最後にCryptメニューから「SSL」項目を確認して、Fullに設定してください。
D9FnIwLVAAAspqU.jpeg

[3/5]クラウドストレージとの自動連携

次に先程Google Cloud Platformで作成したストレージに、WordPressから投稿した画像が自動保存⇛URLも自動でストレージのURLに書き換えられる方法をご紹介します。
今回紹介するプラグインを使う事で、一手間でクラウドストレージと連携する事が可能です。
(注意: 相当大きな容量ではありますが、月5GBの容量までが無料枠です。仮にこの枠を超える場合で、かつ無料の枠内でサイトを構築したい場合は、この項目は無視してください。)

まずWordPressの設定画面から、「WP-Stateless – Google Cloud Storage」というプラグインをインストールしてください。
スクリーンショット 2019-06-03 13.14.04.png

インストールが完了すると、下記のような設定画面になります。ここからBegin Setup Assistantを選択して進んで下さい。
スクリーンショット 2019-06-03 13.31.21.png

まずはじめに、Google Loginを押してGoogleアカウントの認証を得ましょう。
スクリーンショット 2019-06-03 13.32.49.png

次に、先程作成したクラウドストレージのバケットをこちらから選択してください。
上の赤枠には自分が作成したプロジェクト名を、下の赤枠にはバケット名を選択してください(クリックすると自動で候補が出てきます。)
スクリーンショット 2019-06-03 13.43.36_censored.jpg

これで設定は完了です!
普通にクラウドストレージとの連携を行おうとするとかなり手間なはずなのですが、このプラグインを使うとこんな一瞬で終ってしまいます。

実際になにか画像をアップロードしてみましょう!
スクリーンショット 2019-06-03 14.04.32.png
スクリーンショット 2019-06-03 14.06.07_censored.jpg
この通り、メディアから画像をアップしただけでクラウドストレージに保存され、URLもクラウドストレージに当たっている事がわかりますでしょうか?

画像や動画などはこうしてクラウドストレージに保管する事で、サイトのスピードを向上させたりサーバーの容量圧迫から守りましょう!

(※実際に設定画面に入った時に混乱するかもしれませんが、この画面では3番目のCDNを選択しましょう。)
スクリーンショット 2019-06-08 8.04.48.png

[4/5]簡易セキュリティ対策

今回は、プラグイン一つで十分なセキュリティ対策をご紹介します。
本来であればポート変更したり、Firewall Black ListのIPをブロックしたり、色々と操作は必要です。
ですが!今回は初心者の方でも簡単に設定できるよう、理論上ほとんどの攻撃をブロックできるプラグインをご紹介します。

そのプラグインとは、「SiteGuard WP Plugin」です。こちらをまずは追加してください。
スクリーンショット 2019-06-03 15.00.33.png

このプラグインは、WordPressで最も人気のセキュリティソフトです。
インストールするだけで、ログイン時のReCapcha設定が有効になり、不正ログインブロックが有効になったりと、インストールするだけで必要十分なセキュリティ機能がつきますが、1点だけやらなければいけない事があります。

WordPressは管理画面のURLが一意に「/wp-admin/」となっている為攻撃者にとってターゲットにされやすく、SiteGuardはそれを防ぐためにURLを変えてくれるのですが、この機能は今回使用しているnginxというサーバー環境には対応しておらず、ログインがそもそもできない不具合が発生してしまいます。

ですので、下記の画面からログインページのURL変更機能をオフにしましょう。
900ff8f88ff64887bc8527c76e0d07e2.png
スクリーンショット 2019-06-13 8.51.31.png

(@muuuuuuura さん
@kunikazutayama さん
@KyotaSato1 さん
@negiboudu さん
@falloul75 さん
情報 6/13追記)

[5/5]必須プラグインのインストール

次に、WordPress運用にあたって必ず入れていなければならないといっても過言ではないプラグインを紹介します。
これらはSEOのために必要だったり、バックアップの為に必要だったり、SendGridを入れる為に必要だったり、とにかく絶対に入れて頂きたいものです!

Updraft Plus

これは、究極全てのWordPressユーザーが入れなければいけないものです。
バックアッププラグインはBackWPupなど他にも山程ありますが、Updraftが最も最強のプラグインです。

というのも、

  • クラウドストレージと連携できる
  • バックアップの細かい回数やファイルの指定ができる
  • 極めつけに、1クリックで簡単に復元できる(他のプラグインは、手動でDB復元とか面倒な作業が必要)

という理由があるからです。
絶対に入れましょう!

WP Mail SMTP ( @shimo_513 様ご質問 6/5追記 )

サーバーにWordPressをインストールしただけでは、メールサーバーが立ち上がっておらずメールが送れないようになっています。本来であればGSuiteなど連携しなければいけなくとても面倒なのですが、今からご紹介するSendGridという外部ツールを用いると、1度コピーペーストするだけでメールが送れるようになります!

まずはSendGridに登録して、無料でAPIを取得しましょう。(日本語のサイトに行くと、変な審査などで1週間待たされたりするので必ずこのリンクの海外のSendGridサイトから作成しましょう。)
会員登録が済んだら、https://app.sendgrid.com/guide/integrate/langs/smtpに遷移して、こちらでAPIを作成してください。
スクリーンショット 2019-06-05 7.16.44_censored.jpg

次にWordPressのプラグイン追加画面から、「WP Mail SMTP」のプラグインを追加してください
スクリーンショット 2019-06-05 7.21.33.png
プラグインを有効化したら、設定画面の最初にて下記のように先程作成したAPI Keyを貼り付けてください。
スクリーンショット 2019-06-05 7.23.08.png

設定はこれだけで完了です!試しに設定画面の「Email Test」からメールを送信してみてください。実際に成功できているのが確認できたでしょうか?
スクリーンショット 2019-06-05 7.24.55.png

IP Geo Block

(@eruside 様情報 6/13追記)
IP Geo Blockは、特定の国やIPアドレスからのアクセスを遮断してくれます。
これが何故必要かというと、Google Cloud Platformでは中国とオーストラリアからのアクセスに特別料金を設けているからです。またハッキングのリスクを防ぐためにも、必ず入れておきましょう。

インストールが完了したら設定画面を開き、
①ブラックリストを選択
②「国コードのブラックリスト」に「AU,CN」を入力してください。
スクリーンショット 2019-06-13 8.23.27.png

次に下にスクロールして、「バックエンドの設定」では全てのチェックボックスにチェックを入れてください。
スクリーンショット 2019-06-13 8.25.52.png

最後に下にスクロールして、「フロントエンドの設定」では「国コードで遮断」だけチェックを入れてください。
スクリーンショット 2019-06-13 8.26.00.png
これで設定は完了です。

WP Optimize

Wp optimizeは、WordPressの内部データベースを最適化するプラグインです。
インストールするだけで自動更新がかかるので、必ず入れておきましょう。

WebSub/PubSubHubbub & Google XML Sitemaps

サイトマップの更新/送信を自動化する上、Googleに更新をすぐインデックスされるようになります。
これを使うことで、自分が一番最初に記事を公開した事の証明となり、サイトコンテンツのコピー防止になります。

【推奨レベル】Broken Link Checker

サイト内のリンクが切れていないかを全てチェックしてくれるプラグインです。
記事を読んでいる方が不便な思いをしないように、こちらも必ず入れておきたいのですが、このプラグインは非常に重いので、頻繁に駆動させないようにしましょう。ですので、「【推奨レベル】」と仮書きさせて頂きました。

必要最低限なプラグインは以上になります。
なお、キャッシュ系プラグインは、事故が多発するので絶対にやめておきましょう・・・
Cloudflareで十分です。

まとめ

いかがでしたでしょうか?
今回は、完全無料で1時間で簡単にWordPressを構築する方法をご紹介しました。
私はこういった簡単なセットアップまでを、クライアント様との初回面談で実際に構築しながら、お客様に見てもらっています。

外枠くらいは、「すぐに」「簡単に」「ベストプラクティスで」完成させたいものです。
今回の方法を行えば、慣れれば20分くらいで簡単にできてしまうので、ぜひ興味のある方は試してみて下さい。

おまけ FTP設定やポート変更などの発展編について

今回は初心者の方に向けた記事でしたので、ターミナルを用いた設定方法などは完全に省略しました。
本来であればFTP設定とか、ポート変更とか、Stack Driverの設定などを他にも色々と必要だったりします。

また、開発環境についてもDockerを用いたより高度かつモダンな方法があります。
もし需要があれば、コメントを頂ければ別記事でまたご紹介したいと思います。

さらなるおまけ コマンド集

今回、初心者の方に向けてターミナルを使う操作は一切入れないでいたのですが、それでは少々使い続けていくには足りない操作がありましたので追記致します。
まずはGoogle Cloud Platformの下の画面から、以下のリンクから「VMインスタンス」という画面を開いてください。
スクリーンショット 2019-06-08 8.19.49_censored.jpg
画面を開きましたら、自分がデプロイしたサイトのリストの、「接続」⇛「SSH」ボタンを押してください!
スクリーンショット 2019-06-08 8.20.12_censored.jpg
ボタンを押したら、以下のような画面がポップアップしたら準備完了です!

スクリーンショット 2019-06-08 8.27.55_censored.jpg

①右下のロゴを外す

以下のコマンドをコピペして、Enterを押してください

sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1 && sudo
 /opt/bitnami/ctlscript.sh restart nginx

②Cloudflareを用いずに永久自動https化する

!!! YOURMAILの部分は、ご自身のメールアドレスに
!!! YOURDOMAINの部分は、ご自身のドメインに変更してください。

sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m YOURMAIL -d YOURDOMAIN

( @hiropy0123 様ご指摘 6/8追記 )

③アップロードサイズの上限を増やす

sudo sed -ie '$ a client_max_body_size 40m;' /opt/bitnami/apps/wordpress/conf/nginx-app.conf && sudo /opt/bitnami/ctlscript.sh restart nginx && sudo /opt/bitnami/ctlscript.sh restart php-fpm

(@tomoka1211 さん
@muuuuuuura さん
情報 6/13追記)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away