Netlify CLIをインストールして本番環境のサイトを作成しよう
  • 2021.12.30に公開
  • ブログ構築TS
  • 3. NetlifyCLIを使ったNuxtデプロイ
  • No.1 / 2

今回達成すること

Netlify CLIのインストールと、Netlify上に本番環境用のサイトを作成します。

2021-12-30 16-09-58

Netlifyとは

Netlifyとは、Webサイトをインターネット上に公開するホスティングサービスです。

主に、コンテンツが変化しない静的なサイト(ブログやHP)を公開するのに特化しています。

対して、ユーザーログインによって表示名が変わるような動的なサイトには不向きです。

内容によってはFunctionsの機能を使用すれば可能ですが、そもそもNetlifyではサーバーやデータベースを操作できないためです。

参考: Can I run a web server, HTTP listener, and/or ... - Netlify Support

Netlifyの料金

Netlifyは、個人ブログや個人サイトであれば無料(月額)で使用することができます。

ただし、月額無料プランでもビルド時間が月300分を超えると$7の料金が課金されます。

料金の詳細: Netlify Pricing - Netlify

Netlify課金対象のビルド時間とは

ビルド時間とは、Netlifyがサイトを構築するのにかかる時間のことです。

サイトを構築するのにかかる時間には、

  • サイトジェネレーターの実行
  • JavaScriptのコンパイル
  • およびその他のタスクの実行

が含まれます。

開発中のサイトは月300分のビルド時間を有に超えるので、無料といっても注意が必要です。

さらに、Netlifyにクレジットカードを登録していない状態で月300分を超えた場合は、料金が支払われるまでサイトが停止するのでご留意ください。

スタータープランです。300分以上経過してもクレジットカードが登録されていないと、ビルドが停止しますか?
お客様のサイトに不必要なダウンタイムを発生させたくないので、限度時間に達してクレジットカードを追加していないからといって、ビルドを停止することはありません。ただし、未払い金が解消されるまで、お客様のアカウントは延滞となります。

引用: Build Minutes Pricing FAQ - Netlify

Netlify CLIでビルド時間を0にできる

Netlify CLIの手動デプロイを使用すると、サイト構築タスクはローカルPC上で行われます。

この手法は、NetlifyをGitHubなどのリモートリポジトリと接続せずに、ローカルのファイルをNetlifyに直接アップロードする方法となります。

今回のNetlifyデプロイには、この手動デプロイを採用します。

Netlify CLIとは

Netlify CLIとは、Netlifyが用意しているコマンドラインインターフェース(CLI)です。

このCLIを使用すると、ターミナルから環境変数の設定やデプロイの実行など、コマンドを使って本番環境のアプリを操作することができます。

Doc: Get started with Netlify CLI

作業に入る前に

Netlifyの会員登録を済ませておいてください。

Signup - Netlify

ブランチ切っとく

作業の前にブランチを切っておきます。(ブランチ名はご自由に。)

% git checkout -b 20211230_netlify_deploy

# 作成と移動を確認
% git branch
* 20211230_netlify_deploy
  master

Netlify CLIをインストールしよう

Netlify CLIには、Node.js バージョン12.20.0、14.14.0、16.0.0以降の環境が必要です。(執筆時点)

インストールの前にPCのNode.jsのバージョン確認、必要であればバージョンUPを行なってください。

% node -v
v16.9.1

Netlify CLIのインストール先

再現性のあるビルドが保証できることから、ローカル(プロジェクト単位)にインストールすることが推奨されてます。

重要: npm install netlify-cli -g CIで実行するということは、重大な変更を含め、常に最新バージョンのCLIをインストールしていることを意味します。ローカルにインストールしてロックファイルを使用すると、再現性のあるビルドが保証されます。

引用: Netlify CLI - GitHub

プロジェクトディレクトリからインストールする

Netlify CLIをインストールします。

Nuxtプロジェクトのルートディレクトリから下記コマンドを実行してください。

% yarn add --dev netlify-cli 

インストール成功を確認します。

% yarn list --pattern netlify-cli

└─ netlify-cli@8.6.0

netlifyコマンドを使用できるようにする

Nuxtプロジェクトから% netlifyコマンドを使用できるように、package.jsonにスクリプトを登録します。

package.json
{
  "scripts": {
    // 一番下に追加
    "netlify": "netlify"
  },
}

OK。これで準備は整いました。

Netlifyにログインする

最初にログインコマンドを実行し、Netlifyにログインを行なってください。

% yarn netlify login

ログインユーザーを確認する

現在のログインユーザーを確認するには、% netlify statusコマンドを実行します。

% yarn netlify status

──────────────────────┐
 Current Netlify User │
──────────────────────┘
Name:  andou
Email: ...
Teams: ...

その他コマンドは下記よりご確認ください。

Netlify CLI Command List

Netlfy CLIを使ってサイトを作成しよう

NuxtプロジェクトをホスティングするNetlify上のサイトを作成します。

% yarn netlify sites:create

# Netlify上のチームを矢印キーで選択 Enter
? Team: (Use arrow keys)
❯ ...'s team 

# サイト名を入力 Enter
# ここの名前がURLとなるので、Netlify上で一意の名前にしなければなりません。
? Site name (optional): demo-blog-v2

# サイト構築成功メッセージ
Site Created

Admin URL: https://app.netlify.com/sites/demo-blog-v2
URL:       https://demo-blog-v2.netlify.app
Site ID:   47...

Site IDをリンクする

表示されたSite IDはコピーしてください。

プロジェクトディレクトをNetlifyのサイトと紐付けるコマンドを実行します。

% yarn netlify link --id <ご自身のSite ID>

# 成功
Linked to demo-blog-v2 in /<ローカルパス>/demo_blog_v2/.netlify/state.json

これでopen:siteコマンドが使用できます。

Netlifyのサイトを確認する

作成したNetlifyのサイトを確認してみましょう。

% yarn netlify open:site

何もデプロイしていないので当然ですが、Netlifyの404ページが表示されれば成功です。

2021-12-30 16-09-58

作業終了のコミットです。

% git commit -am "Add netlify cli"

次回は?

Netlify上のサイトにNuxtプロジェクトをデプロイします。お楽しみに。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。