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

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

More than 1 year has passed since last update.

こんにちは!こんにちは!

野良エンジニアになって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、静的ファイルしか動かせないみたかったので(無知)、サイトを更新するときはローカルで更新してデプロイする必要がありそうな。まあ、良いか。

2emori
こんにちは!こんにちは!
https://twitter.com/tad2emori
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
ユーザーは見つかりませんでした