mottox2 blog

netlify-cliを使ってCLIでデプロイを行う

devnetlify

thumbnail

Netlifyには優れたUIを持つWeb画面が用意されていますが、CLI(コマンドラインインターフェース)も用意されており、CLIのみでのデプロイも可能になっています。
通常の開発ではWeb UIで十分ですが、検証中などGitの操作なしでサイトに反映できるので便利です。

netlify-cli@2.6.3で確認した動作を前提に進めます。

インストール方法

npmがインストールされていることが前提で次のコメントを実行します。

bash
$ npm install -g netlify-cli

実行後、次のコマンドを実行してバージョン情報が出力されれば、インストール完了です。

bash
$ netlify -v
netlify-cli/2.6.3 darwin-x64 node-v10.13.0

使用方法

ログイン

まずはCLIとNetlifyのアカウント情報を紐付ける必要があるので次のコマンドを実行します。
実行するとブラウザで認証画面が表示されるので、「Authorize」をクリックします。この操作で、CLIによってNetlifyの情報を操作することが可能になります。

bash
$ netlify login

app.netlify.com_authorize_response_type=ticket&ticket=02549b5ea9fe0cb3f15cdc9eb20122ea.png (174.3 kB)

なお、ログアウトをするにはnetlify logoutを実行してください。

もっと理解する netlify-cliはOauth Applicationとして動作しています。そのTokenはユーザー情報とともに`~/.netlify/config.json`に保存されています。
このCLI実装は netlify/netlify-cli で公開されているので、NetlifyのようなプラットフォームのCLIを実装したいとなったときの実装の際、大いに参考になるでしょう。

プロジェクトとの紐付け(既存プロジェクト)

ログインとは別にプロジェクトと紐付ける操作も必要です。この操作はWeb UIとは別に紐付ける操作が必要なので注意してください。

紐付けはディレクトリ単位で行います。ディレクトリとNetlifyのsiteが対応するイメージです。
該当のディレクトリで次のコマンドを実行しましょう。

$ netlify link

netlify link will connect a site in app.netlify.com to this folder

? How do you want to link this folder to a site?
❯ Use current git remote url https://github.com/mottox2/website
  Site Name
  Site ID

コマンドを実行するとgit remote url、site name, site IDのどれで紐づけるかを選択します。
Site Nameは xxxxx.netlify.com 中のxxxxxxに当たる部分、Site IDは WebUIの「Settings > Site Details」に記載されているAPI IDに当たります。
すでにGitHubで連携しているようなサイトであればgit remote urlで連携すると良いでしょう。

紐づけた後は netlify status で紐づけ状況の確認や、netlify open:siteでサイトの確認、netlify deployでCLIからデプロイができるようになります。

もっと理解する netlify-cliの情報は`.netlify/state.json`に格納されます。個人的には共有しなくていい情報だと思っているので、globalでgitgnoreの対象に入れています。

プロジェクトの作成(新規プロジェクト)

まだNetlifyに登録していないサイトに関してはnetlify initで設定を行います。

netlify initを実行するとContinuous deploymentの設定を行います。
Site nameとAccountの設定を行いましょう。

なお、Web UIとは違いサイトを作っただけではデプロイは行われません。手動でnetlify deployを実行する必要があります。

CLIによるデプロイ

CLIでのデプロイはnetlify deployコマンドで行います。

気をつけないといけないポイントが2点あります。
1点目は、CLIでのデプロイではWeb UIやnetlify.tomlで設定しているビルドコマンドが適用されない点です。
ローカルマシンでビルドコマンドを実行して、公開ディレクトリにファイルが生成された状態で実行する必要があります。

2点目は、デフォルトのdeployではDraft URLが生成され、本番環境には直接反映されません。
次のログはnetlify deployのものですが、Live Draft URLが生成されていることがわかると思います。
Live Draft URLを確認し、問題なければnetlify deploy --prodを実行し本番環境に反映するのが基本的な利用フローになります。

$ netlify deploy
Please provide a deploy path relative to:
/Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
? deploy path /Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
Deploy path: /Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
Deploying to draft URL...
✔ Finished hashing 1 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Draft deploy is live!

Logs:           https://app.netlify.com/sites/distracted-stallman-ad88c0/deploys/5c49a1d50e310fd3e09e44d3
Live Draft URL: https://5c49a1d50e310fd3e09e44d3--distracted-stallman-ad88c0.netlify.com

If everything looks good on your draft URL, take it live with the --prod flag.
netlify deploy --prod
$ netlify deploy --prod
Please provide a deploy path relative to:
/Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
? deploy path /Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
Deploy path: /Users/yuki/.ghq/github.com/mottox2/netlify-cli-sample
Deploying to live site URL...
✔ Finished hashing 1 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/distracted-stallman-ad88c0/deploys/5c49a6170e310f113c9e44d2
Unique Deploy URL: https://5c49a6170e310f113c9e44d2--distracted-stallman-ad88c0.netlify.com
Live URL:          https://distracted-stallman-ad88c0.netlify.com

また、deployコマンドにはオプションが用意されており、--dir=dirで公開ディレクトリを変更したり、--functions=functionsでFunctionsのディレクトリを変更することが出来ます。
CLIでオプションを与えた場合、Web UIやnetlify.tomlでの設定よりも優先されることは念頭に置いておく必要があるでしょう。

もっと理解する netlify-cliでのデプロイは一瞬で終了しURLが表示されます。Web UIでのデプロイではデプロイする環境を立ち上げてビルドコマンドを実行するなどの操作が含まれるからです。 なので、Netlifyの環境より良い環境を用意できれば、デプロイ時間の短縮やキャッシュの利用も含んだデプロイが可能になります。

まとめ

様々なnetlify-cliの利用法を紹介しました。
Netlifyには優れたUIを持つWeb UIもありますが、CLIも地味に便利なのでぜひ使ってください。
僕はnetlify deployを覚えたおかげでForce Push(git push origin -f)の頻度が減って、誤操作の心配もなくなりました。

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.