パート3〜Heroku + WordPress + Netlify + Nuxtで無料ブログ環境構築してみた〜の巻

無料ブログの全体的なアーキテクチャは前回の記事にまとめてありますので見ていただければ幸いです！

まず開発をした記事がどのように見えるかをローカルでテストする際にこちらにハマりました。

Nuxt.jsの仕組みで動的にページファイルを生成することはできたのですが、その生成されたファイルにアクセスしようとすると「ファイルにアクセスできませんでした」と表示されてしまいます。

SSGモードでのビルドでnpm run generateというコマンドで静的・動的ファイルを生成するのですが、そのファイルの吐き出し先が/distとなっていて、パスがずれてしまうことが原因でした。

試行錯誤の結果http-serverというもモジュールを使う方法。

使い方は簡単でした。まず以下のコマンドでモジュールをインストールします。

> npm install -g http-server
        

その後、generateでファイルが吐き出される対象のディレクトリ(デフォルトがdist。設定で別のディレクトリに吐き出すことも可能。)に移動してサーバ起動コマンドを打ち込みます。

> cd 自身のNuxtアプリルートフォルダ/dist
> http-server
        

このコマンドを打って「Available on」と表示されていれば立ち上げ成功です。

”http://127.0.0.1:8080”とブラウザに打ち込めば、ルーティングがずれず正しく画面遷移ができるようになります！

これは自分のNuxtやJavascriptへの理解度の低さがいけなかったのですが、かなり悩みました。

pagesディレクトリ配下のvueファイルでは下記のように記載すればWP REST APIでデータの取得ができていました。

const posts = await $axios.get(`/wp/v2/posts?per_page=100`)
        

しかし、components配下のファイルでAPIの呼び出しをする必要があり同様の記載をしたら”RangeError: Maximum call stack size exceeded”と表示されてしまいました。

「ファ！？」と叫んでしまいました。だいぶ苦戦しましたが、こちらはAPIを呼び出す際にthisキーワードをつけてあげることでエラーが解消しました！

const posts = await this.$axios.get(`/wp/v2/posts?per_page=100`)
        

こちらもJavascriptへの理解が足りずエラーを何度か出してしまいました。

配列の結合ってpushかconcatメソッドしか思い浮かばない+それでなんとかなると思っていました。

しかし、やってみるとわかるんですが、これらだと思い通りにいかないんですよね。要素の追加みたいになってしまうんですよね。

配列A=[“1″,”2″,”3”]と配列B=[“4″,”5″,”6”]を”[“1″,”2″,”3″,”4″,”5″,”6”]”のようにしっかりと結合したいのであれば”Array.prototype.push.applyを使うんです！”

const C = Array.prototype.push.apply(A,B)
        

こうすることで配列を思い通り配列のまま結合することができました。ちなみにA.push(B)は”A=[“1″,”2″,”3”,[“4″,”5″,”6”]]”のようになってしまいます泣

これは未だに原因もわかっていない闇ですが、とりあえず回避策だけは見つけました。

npm run generateというコマンドで静的・動的ファイルを生成するのですが、こちらの処理の際にWordPressのAPI（以下WP REST API）を叩いて情報を取得します。

そこでビルドコンソールにHTTPステータス404のエラーが表示されてしまいました。

なぜかWordPressの管理者画面から設定>>パーマリンクと遷移し、その画面で「変更を保存」ボタンを押下するとWP REST APIが呼び出せるようになります。

これだけは謎なんですよね。

この後に色々調査してみたのですが、パーマリンク設定が”基本”となっていてもAPI呼び出しが失敗するみたいです。なのでそれ以外にしておく必要があるのだとか。

私の場合は基本以外にしているのに毎回WordPressを立ち上げたらこのプロセスを踏まないと記事が生成されないのですが。若干不便ですね。