この記事をおすすめしたい人
- Node.jsも知らんのにNuxt.jsを始めようとしてる人
- NASや外部サーバに開発環境を構築したせいで「localhost」にアクセスできない人
- つまりオレ
何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。
前回までのお話でここ↓までの状態が達成できました。
- 開発環境にNode.jsをインストール
- 希望のフォルダにNuxt.jsをセットアップ
- あとは「npx run dev」で開発スタート
今回で開発環境構築編は終了予定です。
最後に初期設定で用意されたデモ画面を確認して、気持ちよく終了をお伝えできればと思います。
WordPressの上でな！
※ このブログはWordPress製です
インストール後は何をすればいいのか
Nuxt.jsのインストールが終わるとこの↓ような画面が出てきます。
(「nuxt-test」はプロジェクト名なので環境によって変わります)
Successfully created project nuxt-test
To get started:
cd nuxt-test
npm run dev
To build & start for production:
cd nuxt-test
npm run build
npm run start
各コマンドを簡単に説明すると、
cd nuxt-test
Nuxt.jsをインストールしたフォルダにカレントディレクトリを移動させます。
npm run dev
と入力すると、開発モードがスタート。
npm run build
npm run start
だと、最終出力モードとしてスタート？
まだ何も作ってない状態なので、開発モードにして、デモ画面を見てみたいと思います。
とりあえず「npm run dev」してみた
お……おおぅ……
エラーが出ませんでした。
ここまでワンアクション毎に理解不能なエラーが出て、多大なる時間を浪費してきていたので、たったこれだけで嬉しかったです。 泣きそう…。
「http://localhost:3000/」にアクセスすればデモが表示できるようなので、さっそくブラウザで開いてみます。
やっぱそんなうまくはいかないですよね…。
泣きそう！
ですが実はこれは原因に見当がついていました。
「localhost」ってのは今触ってるパソコンのことです。 これはマイクラで学びました。
僕の開発環境はNASにあるので「localhost」なわけないんです。
「localhost」以外から参照できるようにする
原因に見当がついていたので、解決方法もすぐに分かりました。
嘘です。アニキに聞きました。
インストールフォルダに生成されている「nuxt.config.js」。 これの中に「server」という項目を追加してどうやってブラウザからアクセスするかを指定してやります。
生成されたnuxt.config.jsにはserverの項目がないので、Nuxt公式のマニュアルに習って追加します。
export default {
(略)
server: {
port: 8000, // デフォルト: 3000
host: '0.0.0.0' // デフォルト: localhost,
},
(略)
}
「host」の「0.0.0.0」の部分はいかにもIPアドレスを入れそうな感じですが、「0.0.0.0」と入れればそのサーバのIPアドレスを自動で参照しますよって合図みたいです。 NASのIPを入れてもちゃんと動作してました。
無事にデモ画面が表示されました
どやぁ。
いやいや、これは全然ドヤれる内容ではなくて、普通なら数時間くらいで到達する場面でしょう。
ですがもう完全無知とも呼べる状態からのスタートで、NASやらなんやら無駄にハードルを上げてスタートしてしまったので、ここまでが本当に大変でした…。
次回から！
ちゃんとNuxt.jsでコード書いていく部分に触れていきますよ！
今度こそ脱WordPressの第一歩をお届けします！
以上、WordPressからお届けしました！
Nuxt.js 開発環境構築編の目次