さようなら、ロリ●ップ 〜FirebaseにWordPressサイトを移行する〜

こんにちは！こんにちは！

野良エンジニアになって1年が経ち、現場先にも慣れてきたある日。
ロ●ポップから「サーバ代払ってね」メールが来ていました。

個人事業主でもHPつくったほうが良いよ、とネットに書いてあったので作りかけのやつを1年くらい活用せずに放置しててサーバ代のこともわすれてました。

で、1年で10000円以上もサーバ代に使っていた事に気づきました（プランによります）。

活用してないのに。
ロリポッ●は好きなんですが、やはり節約したい。お金を。

独自ドメインも●リポップと同じ会社が提供するムー●ードメイン使ってるんですが、こちらは残して、WordPressで作成しているサイトを無料のFirebaseに移行することにしました。Firebase流行ってるし。

GitHubページやらも考えましたが、なんかFirebaseいじりたかった。

同じように、それほど活用できていないHPやらサイトを移行したいって人には参考になるかもしれません。

(1)既存サーバからデータ抜く

抜くといっても、WPにログイン→プラグインインストール→データを落とすだけです。
下記の動画が参考になります。
https://www.youtube.com/watch?v=lbZeOhnUHww
わざわざ静的ファイルを吐く必要あるのかな？と思いつつしましたが、とりあえずやってみる。

(2)firebaseでアカウント作成

firebaseのアカウントつくります。
https://console.firebase.google.com/u/0/?hl=ja

gmailなどでGoogleアカウント作成している場合はすぐに済みます。
Gアカウントでログインして、プロジェクト作成するとこまでやります。のちのちプロジェクトのIDがデプロイ時に必要になります。

プロジェクト追加→プロジェクト名決めるだけで簡単。
IDとかはめもっておきます。

後々必要になるので、Node.jsもDLしときます。

(3)Firebaseのパッケージインストール

Firebase用のディレクトリ作って、下記の呪文を唱えます。

npm install -g firebase-tools

はまる

上記の呪文を唱えると、下記のエラーが出現。

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 

自分はMacBookでやったのですが、どうやら/usr/localの権限周りが原因のよう。なので、インストールするパスを変更しました。
Windowsの場合はどうなんだろう。。。

(3)firebaseにデプロイ

事前にデプロイ用のjsonファイルつくっておきます。

{
  "hosting": {
    "public": "ここにデプロイ対象ディレクトリ名"
  }
}

Firebaseにターミナルからログイン

$ firebase login

firebase用のディレクトリ上でfirebase init

$ firebase init

デプロイ用のディレクトリつくり、さきほどつくったjsonファイルにつくったディレクトリの名称を記述します。
WPファイルをデプロイ用のディレクトリに配置します。jsonはfirebase用のディレクトリに配置。
そしてデプロイコマンド。

$ firebase deploy --project ここにめもったfirebaseプロジェクトのID 

(4)確認

サイトが表示されているかどうか、firebaseのデフォルトドメインで確認。
https://shinsekai-d65a9.firebaseapp.com/

無事WPサイトが表示されました。

まとめ

あとはDNS設定変えるだけでいけるはず。。。
これで年間1万円くらいは浮く。サイトによりけりで、サーバ借りてるままのがほういい場合もあるかもしれません。
トラフィックまったくない放置気味サイトとかはfirebaseでいいのかな？

参考にさせていただいた記事・動画

https://qiita.com/kuronat/items/954d7348810ec14171af
https://www.youtube.com/watch?v=lbZeOhnUHww

追記

Firebase、静的ファイルしか動かせないみたかったので（無知）、サイトを更新するときはローカルで更新してデプロイする必要がありそうな。まあ、良いか。