Netlifyの初期セットアップとNuxt.jsのデプロイを行う
  • 2019.08.12に公開
  • 2020.09.04に更新
  • ブログ構築
  • 3. Nuxt.jsアプリを公開する
  • No.2 / 3
「ブログ構築」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「ブログ構築」の続編は、カテゴリー「 ブログ構築TS 」 で公開しています。

今回達成すること

NuxtプロジェクトをNetlifyにデプロイしていきます。

この記事を完走すると、インターネット上に"Hello Nuxt"を表示することができます。

Netlifyの料金は?

個人ブログを運用する程度だと基本的に無料で行えます。

詳細はこちらからご覧ください。

Netlifyの料金

NetlifyにBitbucketのリポジトリを追加する

まずはNetlifyにログインしましょう。

トップーページからNew Site from Gitのボタンをクリックします。

2019-08-11 15-50-38

Continuous DeploymentのメニューからBitbucketを選択してください。

今回デプロイするNuxtプロジェクトを選択しましょう。

2019-08-11 15-58-08

Netlifyアプリの初期設定を行う

次のページは以下のように設定していきます。

2019-08-11 16-10-06

Owner

チーム名を選択するところです。今回は特に変更しません。

Branch to deploy (画像の1番)

masterを選択します。

これはGitのマスターブランチをデプロイするという設定です。

Build command (画像の2番)

Nuxtのバージョンによってコマンドが変化します。

下記、3つのケースをまとめました。

1. Nuxt.js v2.14以上の場合

2020年9月4日追記

V2.14になってコマンドの仕様が大きく変わりました。(一瞬で非推奨になったよ...)

Nuxt v2.13では、静的ターゲット用に特別に設計されたnuxt exportnuxt serveを導入しました。

Nuxt v2.14 では、nuxt generatenuxt start がターゲットを検出して必要に応じてビルドするようになったため、これらは非推奨となりました。

引用 https://nuxtjs.org/blog/nuxt-static-improvements

target: "static"の場合

  • nuxt dev ... 開発サーバの起動。
  • nuxt generate = 必要に応じてビルドし、 dist/に静的にエクスポートします。
  • nuxt start ... 静的なホスティング(Netlify, Vercel, Surge など)のように dist/ディレクトリを提供し、デプロイ前のテストに最適です。

target: "server"の場合

  • nuxt dev ... 開発用サーバの起動。

  • nuxt build = 本番用のアプリケーションをビルドする。

  • nuxt start = 本番サーバを起動します 。

    (Heroku, Digital OceanなどのNode.jsホスティングに使用します)

2020年9月4日追記 終了

2. Nuxt.js v2.13の場合

2020年8月30日 追記

nuxt.config.jsのターゲットの値によってデプロイコマンドが変わります。

target: "static"の場合

target: "static"

Netlifyには、yarn build && yarn export と記入してください。

target: "server"の場合

target: "server"

package.jsongenerateスクリプトを追加します。

"scripts": {
    ...
    // 追加
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },

Netlifyには、yarn build && yarn generate と記入してください。

特に理由がない場合は、target: staticにしてください。

断然スピードが違います。

targetの違い、コマンドの意味については下の記事にまとめています。

【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点

2020年8月30日 追記 終了

3. Nuxt.js v2.12以下の場合

yarn build && yarn generateと記入してください。

これは公開するときに実行するコマンドを設定しています。

Nuxtプロジェクトのnuxt.config.jsで設定したbuildgenerateを実行します。

Publish directory (画像の3番)

distと記入します。

Nuxtはyarn generateコマンドを実行すると、Javascriptから生成した静的ファイルをdistディレクトリに吐き出します。

試しにターミナルで実行してみてください。distディレクトリが作成されます。

$ yarn generate

Deploy Site

Deploy Siteをクリックして設定を保存します。

保存したらプロジェクトのトップページに画面遷移し、デプロイが開始します。

Netlifyのデプロイ履歴の見方

Netlifyのメニュー、overview > Production deploysには過去のデプロイ履歴が表示されます。

オレンジの文字でBUILDING

デプロイ中ということを表しています。

まだ変更は反映されていません。

緑の文字でPUBLISHED

デプロイが無事完了するとこのマークになります。

現在公開中のバージョンに表示されます。

公開できたか確認する

デプロイが完了し緑の文字でPUBLISHEDと表示されたら、上に表示されるURLをクリックしてみましょう。

2019-08-11 16-22-01

Hello Nuxtが表示されていますね。

2019-08-11 16-27-14

これにてNetlifyのへのデプロイ作業は完了です。

終わりに

これであなただけのサイトがインターネット上に公開されました。

次回は、Netlifyで公開したこのサイトに、独自ドメインを設定していきます。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築の投稿
1
  • 更新情報
  • /
  • #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
2
  • 更新情報
  • /
  • #02
Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
1
  • 今回作るアプリケーション
  • /
  • #01
Nuxt.jsとContentfulで作るマイブログ
1
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #01
Nuxt.jsを動かす環境を構築する
2
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #02
Nuxt.jsのプロジェクトを作成する
3
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #03
Hello Nuxtを表示する
1
  • Nuxt.jsアプリを公開する
  • /
  • #01
Nuxt.jsをデプロイする前の事前準備を行う
2
  • Nuxt.jsアプリを公開する
  • /
  • #02
Netlifyの初期セットアップとNuxt.jsのデプロイを行う
3
  • Nuxt.jsアプリを公開する
  • /
  • #03
NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する
1
  • Contentfulのセットアップ
  • /
  • #01
【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう
2
  • Contentfulのセットアップ
  • /
  • #02
【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ
3
  • Contentfulのセットアップ
  • /
  • #03
Contentfulにブログ記事モデルを作成していこう
4
  • Contentfulのセットアップ
  • /
  • #04
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する
1
  • ブログ記事周りの構築
  • /
  • #01
Nuxt.jsにContentfulのブログ記事を表示する
2
  • ブログ記事周りの構築
  • /
  • #02
Contentfulから取得した下書き記事を開発環境に表示する
3
  • ブログ記事周りの構築
  • /
  • #03
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
4
  • ブログ記事周りの構築
  • /
  • #04
【Nuxt.js】middlewareを活用しブログ記事取得のパフォーマンスを改善する
1
  • カテゴリーページの構築
  • /
  • #01
【Contentful】カテゴリーモデルとブログ記事モデルの関連付け
2
  • カテゴリーページの構築
  • /
  • #02
【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する
3
  • カテゴリーページの構築
  • /
  • #03
【Nuxt.js × Contentful】カテゴリー記事一覧ページを作成する
1
  • タグ機能の構築
  • /
  • #01
Contentfulにタグモデルを作成し関連付けを行う
2
  • タグ機能の構築
  • /
  • #02
【Nuxt.js × Contentful】タグに関連付いたブログ記事を表示する
3
  • タグ機能の構築
  • /
  • #03
Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する
4
  • タグ機能の構築
  • /
  • #04
Vuetify2のdata-tableの使い方を学んで、タグ一覧ページをレイアウト
1
  • Nuxt.jsブログカスタマイズ
  • /
  • #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
2
  • Nuxt.jsブログカスタマイズ
  • /
  • #02
Contentfulの全文検索を使ったNuxt.jsブログ内検索の実装
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。