Netlifyには優れたUIを持つWeb画面が用意されていますが、CLI(コマンドラインインターフェース)も用意されており、CLIのみでのデプロイも可能になっています。
通常の開発ではWeb UIで十分ですが、検証中などGitの操作なしでサイトに反映できるので便利です。
netlify-cli@2.6.3で確認した動作を前提に進めます。
npmがインストールされていることが前提で次のコメントを実行します。
$ npm install -g netlify-cli
実行後、次のコマンドを実行してバージョン情報が出力されれば、インストール完了です。
$ netlify -v
netlify-cli/2.6.3 darwin-x64 node-v10.13.0
まずはCLIとNetlifyのアカウント情報を紐付ける必要があるので次のコマンドを実行します。
実行するとブラウザで認証画面が表示されるので、「Authorize」をクリックします。この操作で、CLIによってNetlifyの情報を操作することが可能になります。
$ netlify login
なお、ログアウトをするにはnetlify logout
を実行してください。
ログインとは別にプロジェクトと紐付ける操作も必要です。この操作は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に登録していないサイトに関してはnetlify init
で設定を行います。
netlify initを実行するとContinuous deployment
の設定を行います。
Site nameとAccountの設定を行いましょう。
なお、Web UIとは違いサイトを作っただけではデプロイは行われません。手動でnetlify deploy
を実行する必要があります。
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の利用法を紹介しました。
Netlifyには優れたUIを持つWeb UIもありますが、CLIも地味に便利なのでぜひ使ってください。
僕はnetlify deploy
を覚えたおかげでForce Push(git push origin -f
)の頻度が減って、誤操作の心配もなくなりました。
ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現
追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ
毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ