Nuxt.jsを使ってSSR、SSGの環境構築をしてみよう
最近良く「SPA」とか「SSR」とか「SSG」とかよく聞きますよね。
左から「シングルページアプリケーション」「サーバーサイドレンダリング」「スタティックサイトジェネレーター」です。
僕自身最近は「Netlify」で超簡単な小さいページをSSGでデプロイしたりしています。
サーバーの契約とかしなくても良いのでとても簡単です。
さて、今回はNuxt.jsを使ってアプリを作るために開発環境の構築をやっていきましょう。
インストール
では、まずはインストールから始めていきます。
とはいえ、公式のドキュメント見れば問題なくできると思うのでそっちが良いと思う人は以下のリンクからどうぞ。
それ以外の心優しい方、ありがとうございます。
それではインストールやっていきましょう。
前提条件の確認
まずはnode.jsのバージョンを確認しましょう。
公式サイトでは v10.13 以上を推奨しています。
エディタはお好きなものを使用してください。
create-nuxt-app
それではnuxt.jsをインストールしたい場所にターミナルで移動しましょう。
今回私は例として端末のルートディレクトリで実行してみます。
やり方はyarnになりますが、npmも読み替えてもらえればOKです。
// yarn
yarn create nuxt-app <project-name>
// npm
npx create-nuxt-app <project-name><project-name>には作成するアプリの名前を入れてください。
そうすると対話形式で色々と質問されます。
全部書くと大変なことになるので以下に質問内容を貼っておきます。
今回、僕はこんな感じの設定にしてみました。
最後まで回答できたらインストールが始まります。
インストールしている間少し休憩しましょう。
インストールが完了するとなにやら指示が表示されました。
🎉 Successfully created project sample-site
To get started:
cd sample-site
yarn dev
To build & start for production:
cd sample-site
yarn build
yarn start
✨ Done in 1461.49s.僕はこんな感じで表示されました。
ここまで来たらあとは指示に従うだけです。
// プロジェクトに移動して...
cd (project-root)
// ローカルサーバー起動
yarn dev
ローカルサーバーが起動すると以下にアクセスできるようになります。
表示されましたか？
表示されていたらガンガン開発を進めていきましょう！
表示されない場合、どこかで間違えています。
プロジェクトルートに移動していますか？
一個ずつ確認してみてください。
以上でNuxt.jsの環境構築は完了です。
お疲れさまでした。
それではよいNuxtライフを！