Help us understand the problem. What is going on with this article?

WordPress+StaticPress環境で出力した静的コンテンツを5分でFireBaseにホスティングする

More than 1 year has passed since last update.

この記事は
「GCP MarketPlaceからWordPress環境を5分で構築する」の続きです。

やりたいこと

  • WordPressを作って静的コンテンツのサイトを作成したいが、
  • WordPressの自体を使った更新は頻度が少ない
  • サイト自体はアクセスが多いのでスケーラビリティや耐障害性を担保したい
  • 運用楽にしたい

GCE + FireBaseでどうだろうということでやってみました。

image.png

WordPress環境の設定

VMにStaticHTMLの出力ディレクトリを作成

構成情報のVMインスタンスの項目から ->リソースを管理 をクリックし、GCEのVM管理画面を開く
image.png

リモートアクセス > SSH をクリックしLinuxのプロンプト画面を開く
image.png

> cd /var
> sudo mkdir -m 777 static_press

StaticPressの設定変更

StaticPress > StaticPress Options から

image.png

WordPressの管理画面に戻り、StaticPress > Rebuild ボタンをクリックする

image.png

Firebaseの設定

Firebase側の設定

プロジェクトを作成

image.png

firebase-toolsのインストール

GCE(wordpress-VM)のコンソールに戻りnodeおよびfirebase-toolsをインストール

> curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
> sudo apt-get install -y nodejs
> sudo npm install -g firebase-tools

cliからFireBaseにログイン

> firebase login --no-localhost
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fa
uth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=630274769&
redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob

表示されたURLをコピーしてブラウザで開き、Google認証を行う

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/87b3b4c7-10ba-1fdf-2be2-44544f6c6976.png)

? Paste authorization code here: 4/uABuWLhpEPpPTPf-PUyByjJbRvSocMT-fOwGQpnwetAoRAf_KSxumyo
✔  Success! Logged in as tcr.yoshimura@karabiner.tech

FireBaseプロジェクトの初期化

> cd /var/static_press
> sudo chmod -777 public
> firebase init

下キーでHostingにカーソルを合わせスペースでチェックをつけてEnter

tcr_yoshimura@wordpress-1-vm:/var/www/html/static$ firebase init
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
  /var/www/html/static
Before we get started, keep in mind:
  * You are currently outside your home directory
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

作成したFirebaseプロジェクトを選択してEnter

=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.
? Select a default Firebase project for this directory: 
  [don't setup a default project]  
❯ wordpress-sample-d437f (wordpress-sample) 
  [create a new project]

publicディレクトリを使うか?  static
SPAとして設定するか?  N
static/404.htmlを上書きするか? N
static_index.htmlを上書きするか? N

=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? static
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File static/404.html already exists. Overwrite? No
i  Skipping write of static/404.html
? File static/index.html already exists. Overwrite? No
i  Skipping write of static/index.html
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...
✔  Firebase initialization complete!

firebaseにdeployする

tcr_yoshimura@wordpress-1-vm:/var/static_press$ firebase deploy
=== Deploying to 'wordpress-sample-d437f'...
i  deploying hosting
i  hosting[wordpress-sample-d437f]: beginning deploy...
i  hosting[wordpress-sample-d437f]: found 733 files in static
✔  hosting[wordpress-sample-d437f]: file upload complete
i  hosting[wordpress-sample-d437f]: finalizing version...
✔  hosting[wordpress-sample-d437f]: version finalized
i  hosting[wordpress-sample-d437f]: releasing new version...
✔  hosting[wordpress-sample-d437f]: release complete
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/wordpress-sample-d437f/overview
Hosting URL: https://wordpress-sample-d437f.firebaseapp.com

表示されました。

image.png

コンテンツのホスティングはFireBaseでやっているのでGCEのインスタンス(=WordPress)は落としてもコンテンツは参照できます。

image.png

まとめ

GCP + FireBase で(理論上は)合計10分で静的コンテンツサイトを公開できる!

Why not register and get more from Qiita?
  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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
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
ユーザーは見つかりませんでした