
Webサイト制作のチュートリアル連載「Nuxt de Portfolio(全5回)」を始めます!
こんにちは、フロントエンドエンジニアのライダーです。
今回は「Nuxt de Portfolio」連載のチャプター4、最終回となります。
Webサイト制作のチュートリアル連載「Nuxt de Portfolio(全5回)」を始めます!
この記事では、ここまで作ってきたサイトをいよいよ Netlify というホスティングサービスにデプロイしていきたいと思います! さっそくいってみましょう!
Netlifyは、静的サイトのホスティングサービスです。Nuxtで制作したHTMLを世に公開するためにはWebサーバが必要になります。つまるところ、そのWebサーバを無料で提供してくれているサービスがNetlifyです。
Nuxt はSPAモード、ユニバーサルモード(SSR & 静的HTML出力)の二種類(三種類)がありますが、今回はユニバーサルモードのHTMLを静的出力する方式をとります。
nuxt generate
アプリケーションをビルドして、ルートごとに HTML ファイルを生成します(静的ファイルのホスティングに用います)
平たく言えば、ここまで作成したNuxtのサイトを単なるHTMLとそのアセットとしてビルド・出力するコマンドです。
このコマンドはデプロイ前に実行しその結果のみをサーバにあげるので、静的ホスティングサービスである Netlify を利用することができます。
npm run dev の開発用サーバを立ち上げたままの方は、このあたりで閉じておきましょう。ここからは実際に公開用のファイルを作成していきます。
チャプター2で npx create-nuxt-app my-portfolio
でプロジェクトを作成したみなさんは npm のコマンドが用意されているはずなので、
npm run generate
を実行してください。
するとビルドが始まり、こんな dist
ディレクトリが新しくつくられたと思います。
dist
├── 404.html
├── README.md
├── _nuxt
├── about
├── favicon.ico
└── index.html
これが公開用のディレクトリ(ファイル)です。
ブラウザは .vue ファイルを解釈することができないので、コンポーネントを組み合わせた「ページ」としてHTMLを生成しました。
アップロードとひとことに言ってもさまざまな方法がありますが、Netlify ではドラッグ&ドロップ でアップロードする機能が用意されていますので、今回はその機能を使っていきましょう。
まずは https://app.netlify.com/ にアクセスし、ログインしてください。すると下記のようなページが開くと思います。
あとは先ほど作成した dist
ディレクトリをそのままこの枠の中にドラッグ&ドロップして待つだけです。
デプロイが終わったら、生成されたURLをクリックしてみてください。例はこちらです↓
https://nuxt-de-portfolio.netlify.com/
ここまで続いてきた「Nuxt-de-Portfolio」の連載もこれで終了です。
どの章も深く入り込んではいませんが、一連の流れをさらうことができたかと思います。ここからはその場面ごとに、「困って調べる」の繰り返しになってくるでしょう。コンポーネントという概念に対しても、コツをつかめばそのラクさや便利さに気づくことができるはずです。
最後までやってくださった方も、そうでない方もありがとうございました。ここで Nuxt にさらに興味をお持ちになった方は、ぜひこのポートフォリオサイトに JavaScript を組み込むこと(たとえばモーダルウィンドウなど)に挑戦してみてください! ライダーでした。