今回達成すること
Netlify CLIのインストールと、Netlify上に本番環境用のサイトを作成します。
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分以上経過してもクレジットカードが登録されていないと、ビルドが停止しますか？
お客様のサイトに不必要なダウンタイムを発生させたくないので、限度時間に達してクレジットカードを追加していないからといって、ビルドを停止することはありません。ただし、未払い金が解消されるまで、お客様のアカウントは延滞となります。
Netlify CLIでビルド時間を0にできる
Netlify CLIの手動デプロイを使用すると、サイト構築タスクはローカルPC上で行われます。
この手法は、NetlifyをGitHubなどのリモートリポジトリと接続せずに、ローカルのファイルをNetlifyに直接アップロードする方法となります。
今回のNetlifyデプロイには、この手動デプロイを採用します。
Netlify CLIとは
Netlify CLIとは、Netlifyが用意しているコマンドラインインターフェース（CLI）です。
このCLIを使用すると、ターミナルから環境変数の設定やデプロイの実行など、コマンドを使って本番環境のアプリを操作することができます。
作業に入る前に
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 -gCIで実行するということは、重大な変更を含め、常に最新バージョンのCLIをインストールしていることを意味します。ローカルにインストールしてロックファイルを使用すると、再現性のあるビルドが保証されます。
プロジェクトディレクトリからインストールする
Netlify CLIをインストールします。
Nuxtプロジェクトのルートディレクトリから下記コマンドを実行してください。
% yarn add --dev netlify-cli
インストール成功を確認します。
% yarn list --pattern netlify-cli
└─ netlify-cli@8.6.0
netlifyコマンドを使用できるようにする
Nuxtプロジェクトから% netlifyコマンドを使用できるように、
package.json
{
"scripts": {
// 一番下に追加
"netlify": "netlify"
},
}
OK。これで準備は整いました。
Netlifyにログインする
最初にログインコマンドを実行し、Netlifyにログインを行なってください。
% yarn netlify login
ログインユーザーを確認する
現在のログインユーザーを確認するには、% netlify statusコマンドを実行します。
% yarn netlify status
──────────────────────┐
Current Netlify User │
──────────────────────┘
Name: andou
Email: ...
Teams: ...
その他コマンドは下記よりご確認ください。
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ページが表示されれば成功です。
作業終了のコミットです。
% git commit -am "Add netlify cli"
次回は?
Netlify上のサイトにNuxtプロジェクトをデプロイします。お楽しみに。