ページの読み込みに通常より時間がかかりやすくなっています

【WordPress・簡単格安】Google Cloud Platform を使って無料でブログを作る!

GCP

Google Cloud Storage と連携

現在の状態では、VMのなかのストレージに写真など等のメディアをアップロードするため、容量不足になる可能性があります。それを防ぐためにGoogle Cloud Storage内にアップロードするようにしていきます。
それでは、設定をしていきましょう。

ドメインの所有権を証明する

まずは、ドメインの所有権をGoogleに証明する必要があります。最も簡単な方法は、GCPで登録されているアカウントでGoogle Search Consoleを用いて確認を行います。
ここからGoogle Search Consoleにアクセスします。下記のようにドメインの証明画面になります。
URLプレフィックスではなくドメインの方にドメインを入力します。

続行すると下記のような画面になります。DNSで設定します。(この、TXTレコードを写真でぼかしを入れようか迷ったのですが、DNSの検索サービスとかを利用すると簡単にわかるのでぼかしとか入れてません)

TXTレコードを設定していきます。まずは、Cloudflareにログインします。ログインしたら、先ほど同様にDNS設定画面に行き、Add recordを選択します。

先ほどとは、ここから少し違います。先ほどは、Aレコードを設定したのですが、ここではTXTレコードを設定します。
Type:TXT
Name:@
Content:先ほど表示されたgoogle-site-verification=~~~~をコピーして貼り付ける。
完了したらSaveを選択。

Google Search Consoleの画面に戻って、確認を選択します。下記のような画面になっていれば完了です!

所有権の証明が完了したらGoogle Cloud Platformに戻ります。

Google Cloud Storageにストレージを作成

ストレージを作成していきます。横にある選択バーからストレージ→Stoeageを選択します。

パケットを作成を選択します。

パケットに名前をつけます。今回は、storage.ドメインという形にしたいのでここにstorage.ドメインという形を追加します。

次にデータの保存場所を選択します。ロケーションタイプは、Regionにします。そして、ロケーションは、us-east1にします。(ALWAYS FREEの対象にするため)

この設定をしたらそのほかの設定は、そのままにして作成してください。
作成が完了すると下記のような画面になります。

上記の画面から、権限を選択します。
今の状態では、アップロードされた画像などをサイトにアクセスしたユーザーたちが閲覧することができないので、ここで閲覧設定をおこなって、一般ユーザーでも閲覧できるようにします。
追加を選択します。追加を選択すると、下記のような画像が出てきます。

新しいメンバーのところに”allUsers”と入力します。ロールに”Storageオブジェクト閲覧者”を選択します。この際に、間違えて編集者などを設定しないようにしましょう。メディアを一般ユーザーが編集できてしまいます。笑
設定を行ったのちに保存を選択すると”このリソースを一般公開してもよろしいですか?”と出てきますので”一般アクセスを許可”を選択します。

サイト設定を行う

ここまで、設定を行ったらサイトの方の設定を行います。(Wordpressの言語がここでは日本語になっていますが、Settingより言語設定(Site Languages)を変更することが可能です。変更した方が良いかと思います。)
横にある一覧から[プラグイン]→[新規追加]を設定します。WP-Statelessと入力して検索をして、下記の画像のものをインストールします。

インストールしたのちに”有効化”を選択します。有効化を選択すると下記の画像の画面に自動的にリダイレクトされます。

上記の画面にて”Automated Setup”を選択します。
選択するとGoogleアカウントにログインするように求められます。先ほどのCloud Storageを作成したアカウントでログインしてください。

ログインするとプロジェクト選択画面になります。初期の状態では、先ほど作成したプロジェクト・Cloud Storage内容と違ったものを選択しているので、先ほど作成したものを選択します。
Google Cloud Projectは、Cloud Storageを作成したプロジェクトを選択します。Cloud Backetでは、先ほど作成したstorage.で始まるバケットを追加します。追加すると自動的にロケーション設定や課金設定が入力されます。全てを正常に入力できていることを確認できたらContinueを選択します。

この画面になれば設定完了です。では、ファイルをアップロードした際に自動的にstorage.にアップロードするように設定を行いましょう。横のバーの一覧から[メディア]→[Stateless Settings]を選択します。下記の画像のように設定を行ってください。(説明は、はしょらせていただきます。Google検索にて”wordpress stateless”と検索を行うといろいろ出てきます。)

storage.以降のドメイン設定に関しては、独自のドメインに合わせて設定を行ってください。上記の2枚目の写真においてJSONファイルのところに自動生成されるという文章を記入してあります。原因は、よくわからないのですが生成されないことがあります。生成されない場合は、このサイト(WP-Stateless公式サイト)を参考にして作成するようにお願いします。Step4移行を参考にしてください。
上記の設定を全て完了するとMediaをアップロードするたびに自動的にstorage.で始まるドメインにアクセスすることができます。また、当サイトでもこの機能を利用しております。今回の場合、ここからアクセスすると今回のサイトのアイキャッチ画像を見ることができます。この際のドメインを確認するとstorage.assistant-app.comで始まるドメインにアクセスできていることがわかります。

当サイトについて

ここからは、当サイト(Assistant App blog)の利用しているテーマについて少し記入させていただきます。
利用しているテーマは、Cocoonを利用しております。Cocooは、とても使いやすく満足しています。また、当サイトのトップの部分に関しては、ぽんひろさんの【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!などいろいろなカスタマイズを参考にさせていただきました。

まとめ

このサイトを作成するのにかかったのは、大体1週間程度です。頑張ればすぐ作成することもできます。是非当サイトを参考にしてブログを作成してみてはいかがでしょうか。

また、気になること・どうやって設定しているの?など気になることがありましたら、コメント欄やお問い合わせよりご質問ください!


この記事に関してご質問・訂正がある場合には、コメント欄にてお知らせください。
その他のことに関しましては、こちらから行ってください。


この記事を書いた人

このサイトの管理者。現在、学生。
NiziU大好き。RIO推し!
プログラミングは、趣味程度に。相模原市 新型コロナウイルス感染症対策サイトを作成・運用中(下記のホームアイコンより閲覧できます)

yuuuuu_mmmmuをフォローする
GCP
Assistant App blog
タイトルとURLをコピーしました