netlify-cli

GitのWebHookを使ってCI/CDパイプラインでデプロイする、netlify-cliでデプロイした方が速い。NetlifyのWeb管理画面上ではWebHookならGitHubのCommitメッセージが表示されているが、 netlify-cliでデプロイする場合は--messageオプションで指定したメッセージを表示する。

netlify-cliのインストール

以下はWindowsでのインストールの場合。事前にNodeとnpmのインストールが必要。npm install netlify-cli -gでインストールする。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
PS> npm --version
6.12.1

PS> npm install netlify-cli -g

Success! Netlify CLI has been installed!

Your device is now configured to use Netlify CLI to deploy and manage your Netlify sites.

Next steps:

  netlify init     Connect or create a Netlify site from current directory
  netlify deploy   Deploy the latest changes to your Netlify site

For more information on the CLI run netlify help
Or visit the docs at https://cli.netlify.com

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\netlify-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ netlify-cli@2.24.0
added 965 packages from 472 contributors in 45.944s

環境変数

NetlifyのWeb管理画面からNETLIFY_AUTH_TOKENを取得し、環境変数として設定。

netlifyコマンドによる管理

コマンドの概要

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$netlify --help
Netlify command line tool

VERSION
  netlify-cli/2.37.0 linux-x64 node-v12.16.1

USAGE
  $ netlify [COMMAND]

COMMANDS
  addons     (Beta) Manage Netlify Add-ons
  api        Run any Netlify API method
  deploy     Create a new deploy from the contents of a folder
  dev        Local dev server
  functions  Manage netlify functions
  help       display help for netlify
  init       Configure continuous deployment for a new or existing site
  link       Link a local repo or project folder to an existing site on Netlify
  login      Login to your Netlify account
  open       Open settings for the site linked to the current folder
  plugins    list installed plugins
  sites      Handle various site operations
  status     Print status information
  switch     Switch your active Netlify account
  unlink     Unlink a local folder from a Netlify site
  watch      Watch for site deploy to finish

アカウントの設定

環境変数を設定していない場合は netlify link でアカウントをリンクする。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$netlify link

netlify link will connect this folder to a site on Netlify

? How do you want to link this folder to a site? Search by full or partial site name
? Enter the site name (or just part of it): <NETLIFY_USERNAME>
Looking for sites with names containing '<NETLIFY_USERNAME>'...


Directory Linked

Admin url: https://app.netlify.com/sites/<NETLIFY_USERNAME>
Site url:  https://<NETLIFY_USERNAME>.netlify.com

Site id saved to /netlify-work/public/.netlify/state.json

You can now run other `netlify` cli commands in this directory

対話式で入力しないために、.netlify/state.jsonを作成する。

1
2
3
{
  "siteId": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}

サイト一覧の表示

現在リンク中のアカウントのサイト一覧は netlify sites:list で取得する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$netlify sites:list
Loading your sites... done

────────────────────────────┐
   Current Netlify Sites                                │
────────────────────────────┘

Count: 1

sitename-xxxxxxx - xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxxx
  url:  https://www.example.com
  repo: https://github.com/xxxxxx/reporepo
  account:<NETLIFY_USERNAME>
─────────────────────────────

プレビュー環境へのデプロイ

プレビュー環境へのデプロイは netlify deploy で行う。
Live Draft URL で出力されたURLにアクセスしてプレビュー。

1
2
3
4
5
6
7
8
9
10
11
12
13
$netlify deploy --message "deploy message"
Deploy path: /netlify-work/public
Deploying to draft URL...
✔ Finished hashing 126 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Draft deploy is live!

Logs:           https://app.netlify.com/sites/<NETLIFY_USERNAME>/deploys/XXXXXXXXXXXXXXXXXXXXXXX
Live Draft URL: https://XXXXXXXXXXXXXXXXXXXXXXX--<NETLIFY_USERNAME>.netlify.com

If everything looks good on your draft URL, take it live with the --prod flag.
netlify deploy --prod

本番環境へのデプロイ

本番環境へのデプロイは netlify deploy --prod で行う。
本番環境は Live URL 。

1
2
3
4
5
6
7
8
9
10
11
$netlify deploy --prod --message "deploy message"
Deploy path: /netlify-work/public
Deploying to live site URL...
✔ Finished hashing 126 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/<NETLIFY_USERNAME>/deploys/XXXXXXXXXXXXXXXXXXXXXXX
Unique Deploy URL: https://XXXXXXXXXXXXXXXXXXXXXXX--<NETLIFY_USERNAME>.netlify.com
Live URL:          https://<URL>

publish directoryの指定が求められる場合

Netlifyのサイト上でpublishフォルダーを指定していない場合、netlify deployで以下のプロンプトが表示され、入力を促される。

1
Please provide a publish directory (e.g. "public" or "dist" or "."):

その場合は、netlify deploy --dir=<DIR>のように指定が可能。