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

この記事は
[「GCP MarketPlaceからWordPress環境を5分で構築する」](https://qiita.com/tuchiro/items/5fe4e9d98b6b6be0ca10)の続きです。

# やりたいこと

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/6523a4e6-7bdf-ab8e-2f19-82ce05ea8175.png)


# WordPress環境の設定

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


構成情報のVMインスタンスの項目から ->リソースを管理　をクリックし、GCEのVM管理画面を開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/c517aa2e-dfa3-70ec-367a-687be0a5ca45.png)

リモートアクセス > SSH をクリックしLinuxのプロンプト画面を開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/0b3b31f4-874f-daba-3e6c-1936f7e80425.png)

```
> cd /var
> sudo mkdir -m 777 static_press
```

#### StaticPressの設定変更

StaticPress > StaticPress Options　から

- Site URLを"http://XX.XX.XX.XXX/static" -> "http://XX.XX.XX.XXX"へ変更する
- Save Dir　を先ほど作成したディレクトリ+/publicに変更する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/40a54916-4c8e-77b0-a425-2d8bd12ccd24.png)


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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/0bf9c16a-47b4-d30a-2d97-6a8a5b06bda6.png)


# Firebaseの設定

#### Firebase側の設定

プロジェクトを作成

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/209c9519-ec82-097d-9f7b-d1d7a552f849.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](https://qiita-image-store.s3.amazonaws.com/0/243163/1e45e920-ef7e-6b9a-7f59-978d29d56272.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/243163/9c71f4f5-a704-a5b2-4af7-c8534485b951.png)


# まとめ

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