Nuxt.js (Vue.js) + Github + Netlifyを使ったWeb開発環境構築手順を紹介します。
入門編の記事になりますので、Web開発をこれから勉強しようと思っている方にご活用いただければと思います。
この記事で触れること
- Web開発の用語集
- Web開発環境の構築
- Github＋Netliftyを使ったWebサイト公開（無料）
Web開発の用語集
Git
- プログラムファイルを管理するための管理システムです。
- 最近では必須といっても良いくらいとても便利なので、時間のある時に記事を読んだり使ったりして理解しておきましょう。
- 参考：Gitの基本 Gitを使ったバージョン管理
Github
- GitのプログラムソースをWeb上で公開できるサービスです。有料オプションもありますが、基本は無料で使えます。
- 世界中のエンジニアがプログラムソースを公開して、日々交流しています。
- Web上にソースをコミットしておけば、万が一のバックアップにもなります。
- 参考：【5分でわかる】GitHubとは？概要やメリットを簡単解説！
SourceTree
- Gitはターミナル（Windowsならコマンドプロンプトと呼びます）のコマンド（命令）で操作ができますが、SourceTreeを使うと、画面操作でGitの管理ができるようになります。
- 参考：Gitなんて怖くない！超初心者向け、SourceTreeの使い方はじめの一歩！
Netlify
- Webサイトを超高速で提供できるWebサービスです。
- 先日210万ドルの出資を受け話題になりました。
- Githubと簡単に連携させることができます。
- 連携させることで、自身のPCからGithubにプログラムソースをアップロード（pushする）すると、NetlifyがGithubと連携して自動的にWebサイトの公開手順を開始し、全世界にあるCDNサーバーを通じて高速のWebサービスを提供してくれます。
- このような素晴らしいサービスが、基本的に無料で利用できます。良い時代になりました。
- 参考：高機能ホスティングサービスNetlifyについて調べて使ってみた
Vue.js
- JavaScript（Web開発でよく利用される言語）のフレームワークです。フレームワークとは開発をする時に必要な機能などをまとめて提供してくれるソフトウェアのことで、使用することで開発の効率を上げることができます。
- これからWeb開発を勉強したいという人にはおすすめの言語です。
- 【Vue.js入門】特徴や他のフレームワークとの比較などを紹介！
Nuxt.js
- Vue.js アプリケーションを構築するためのフレームワークです。サーバーサイドレンダリング(SSR)するアプリケーションの開発のために必要な設定があらかじめセットされているのが特徴です。SSRについては後述します。
- 中身はVue.jsなので基本的なコーディングの仕方は同じです。ですので、プログラム開発をするときに、Google検索などでコーディングの仕方を調べることもあると思いますが、Vue.jsとして記載されている記事も、Nuxt.jsの記載の仕方に合わせることで読み換えることができます。
- 参考：Nuxt.js使ってみた
Nuxt.jsとElectron (蛇足)
- Nuxt.jsはweb開発を前提として開発されたVue.jsをベースとしたフレームワークですが、クロスプラットフォーム言語であるElectronと組み合わせることによって、Nuxt.jsを使ってMac、Windows、Linuxで動くクロスプラットフォームの開発もできますので、覚えておいて損はない言語だと思います。
- Electronは今回の記事では触れませんが、PCアプリ開発に興味のある方は以下の記事をご参照ください。
Vuetify
- Vue.jsで使える、マテリアルデザイン(Googleが推奨するデザイン手法のガイドライン)のフレームワークです。 マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。
- レスポンシブデザイン（PC・スマホの画面サイズでも綺麗に表示する技術）に対応しています。
- Nuxt.jsでは、様々なUI（ユーザーインターフェースの略。ユーザーが見る画面レイアウトやデザインなどのこと）フレームワークを選択できますが、今回はVuetifyを採用しています。
- Vuetifyが提供しているUIは公式サイトで公開されています。
Atom
- プログラム開発は、メモ帳などのテキストエディタでもできますが、絶望的に効率が悪いです。
- Atomは、テキストエディタでありながら、Web開発者が作業を効率化するための様々な機能を網羅し、拡張機能も数多く公開されているアプリケーションになります。プラグインを入れることで自分好みに拡張できるのが特徴です。（基本無料）
- 開発を支援する統合開発環境は他にもありますので、別のアプリでもOKです。今回はAtomを使ってVue.jsの開発環境を構築します。
静的と動的
- 今回はNetlifyにStaticなページを生成するやり方（SSG）を説明しています。
- どれが良いという話ではなく、Webサイトの更新頻度やトラフィックによって使い分けるとGoodです。
- こちらの記事で分かりやすく説明いただいていますので興味のある方は参照ください。
Web開発環境の構築
前置きが長くなりましたが、実際の手順に入っていきます！
0. 事前準備
- 手順の実行に必要なソフトウェア等を自身のPCにインストールします。
- 既に終わっている人はスキップしてください。
- 終わっていない人は以下のキーワードでGoogle検索すると、様々な記事がでてきますので自分の環境にあった記事を見つけて進めてください。
- エラーが出たりうまくいかないこともあると思いますが、エラーの内容をGoogleで検索すれば大抵の場合は対策が載っていますので、根気強く進めましょう。
Google検索キーワード
[mac or windows]は利用している端末によって選択してください。
- node.js インストール [mac or windows]
- Git インストール [mac or windows]
- SourceTree インストール [mac or windows]
- Atom インストール [mac or windows]
1. Githubと開発環境を連携させる
githubでリポジトリを作成
※ここでは test_nuxt で作成しています。
ローカルでソース管理用の作業ディレクトリを作成
- 既に作業ディレクトリ（windowsでいうフォルダ）を作成済の人はスキップでOKです。
- ターミナル（Windowsならコマンドプロンプトと呼びます）を起動する
- プログラムソースを管理するディレクトリを作成する
# workspaceというディレクトリを作成
cd
mkdir workspace
githubのリポジトリとローカル環境を連携させる
以下のコマンドを実行すると、作業ディレクトリ（ここではworkspace）に移動して、githubのリポジトリをクローン（ローカルにコピー＆連携）できます。
cd workspace
git clone git@github.com:xxxxxx/xxxxx.git
（補足）上記のURLは、作成したリポジトリのトップ画面で赤枠のボタンをクリックするとコピーできます。
はじめてgithubと連携しようとすると、sshキーのエラーがでると思います。
それぞれの環境にあわせて設定してください。
google検索でのキーワードは github ssh [windows or mac] とかで出ると思います。
例えば、以下のような記事が参考になります。
2. Nuxt.jsをインストールする
### コマンドラインから次のコマンドで Vue.jsをインストールします。
### 既にインストール済みの人はスキップしてください。
npm install -g @vue/cli
### workspaceに移動して、nuxtのインストールコマンドを実行します。
### ここでは、test_nuxtのリポジトリ名を設定していますが、
### githubで別名のリポジトリ名を設定した場合は、test_nuxt の部分を置き換えてください。
npx create-nuxt-app test_nuxt
- 上記のコマンドを実行すると、nuxt.jsの環境構築オプションを質問されます。
- 今回は説明を省略しますが、それぞれの意味について気になる人は公式サイトなどで調べてみてください。
- 一応、あとからで変更も可能です。
| 質問 | コマンド |
|---|---|
| ? Project name (test_nuxt) | エンター（＝デフォルト） |
| ? Project description (My groovy Nuxt.js project) | エンター（＝デフォルト） |
| ? Use a custom server framework (Use arrow keys) | none |
| ? Choose features to install (Press to select, to toggle all, to invert selection) | Axios |
| ? Use a custom UI framework | vuetify |
| ? Use a custom test framework (Use arrow keys) | none |
| ? Choose rendering mode (Use arrow keys) | Universal |
| ? Author name (xxxxxx) | エンター（＝デフォルト） |
| ? Choose a package manager (Use arrow keys) | npm (yarnをインストールしている人はyarnでもOK) |
このような感じで入力していきます。
しばらく待つと、処理が完了して以下が表示されます。
赤枠のコマンドを実行すると、ローカル開発環境でNuxt.jsが起動します。
※test_nuxt はリポジトリ名ですので、別のリポジトリ名を設定した場合は、そのリポジトリ名が表示されているはずです。
cd test_nuxt
npm run dev
しばらく待つと、以下のような画面が表示されます。
見えづらいですが、上記の赤枠にURLが表示されています。
表示されたURLをGoogle Chromeなどのモダンブラウザで表示してみてください。
http://localhost:3000/
おめでとうございます！Nuxt.jsのローカル開発環境が構築できました！
3. Githubにソースをpushする
- ローカルにnuxt.jsの環境構築が終わりましたので、作成したプログラムソースをgithubに連携してみましょう。
- サーバー上のgitサービスにプログラムソースを送り出すことを
pushするといいます。
SourceTree を起動する
インストールした SourceTree を起動します。
※以下のアイコンはMac版で、Windows版はアイコンが違うようです。
- Mac版の場合、以下のような操作で、
既存のローカルリポジトリを追加できます。 - 今回作成したディレクトリを選択しましょう。
- windows版のキャプチャをとっていませんが、画面上部の
Addボタンをクリックして、今回作成したローカルのフォルダを選択するとかだったと思います。
sshキーの設定をする
ソースツリーを操作して、 全てのファイルを選択 > コミットを直ちにpushする > コミット 操作をすると、Githubにファイルがアップロードされるのですが、事前にssh接続の設定が必要になります。
手順を実行して、エラーになる人は、google検索で SourceTree github ｓｓｈ [windows or mac] などの検索キーワードでヒットする記事を参考に設定をしてみましょう。
例えば、windows環境なら以下のような記事が参考になります。
SourceTreeを使ってGitHubにSSH接続する (Windows)
慣れている人には簡単なのですが、使っているPCのOSやバージョンなど、環境に依存すので、おそらく今回の記事の中で一番詰まりやすいポイントだと思います。Google検索を活用して根気強く設定しましょう。
この設定が終われば、残りはもうすぐです！
3. Github＋Netliftyを使ったWebサイト公開（無料）
いよいよ、NetliftyとGithubを連携させて、サイトを公開していきましょう。
- Netliftyでアカウントを作成
- ログイン後、画面右上の
New site from Gitボタンをクリック -
Githubのボタンをクリック - リポジトリの一覧が表示されるので、先ほど push したリポジトリを選択
- 今回の記事では test_nuxt
- リポジトリへのpushが失敗していると、エラーが表示されます。手順を戻ってgithubにソースをpushしましょう。
- Basic build settingsを設定し、
Deploy siteのボタンをクリック
- Build command
nuxt generate - Publish directory
dist
しばらく待つと、デプロイ（webサイトの公開作業）が終わります。
おめでとうございます！Webサイトが世界中に公開されました！
2020年12月20日 追記 V2.14の仕様
V2.14になってコマンドの仕様が変わりました。
Build Commandはバージョンによって適宜設定ください
例）npm run build && npm run export
@twtwtw-gjさん、情報ありがとうございました🙏
Nuxt v2.13では、静的ターゲット用に特別に設計されたnuxt exportとnuxt serveを導入しました。
Nuxt v2.14 では、nuxt generate と nuxt start がターゲットを検出して必要に応じてビルドするようになったため、これらは非推奨となりました。
引用 https://nuxtjs.org/blog/nuxt-static-improvements
補足
- Netlifyの設定で、ドメイン（https://xxxxxxx.netlify.com のxxxxxxx設定） を、無料で好きなものに変更することができます。
- ドメインを買えば
netlify.comをはずすなど、後から独自ドメインの設定も可能です。 - Webサイトを公開しただけでは、そのURLを知っている人しかアクセスされません。Google Search Consoleなどを使うことで、Google検索やYahoo検索からアクセスが来るようになります。
最後に
次回からは、ローカル環境のプログラムソースを修正し、動作確認が終わったらgithubにpushすることで、Netlifyがpushを検知し、自動的にWebサイトを公開してくれます。
今回は時間の関係で省略しましたが、プログラムソースの修正は、atomなどの開発支援ツールを活用しましょう。
こちらも atom vue.js プラグイン などのキーワードでgoogle検索すると、様々な開発支援プラグインが紹介されていますので、ぜひ自分にあった開発環境を構築してみてください！