Netlifyの手動デプロイを使うと、ブラウザまたはCLIからフォルダをアップロードして静的ホストすることができる。

• https://www.netlify.com

ブラウザ（各種メニューの「手動デプロイ」、Netlify Drop）からデプロイすることもできるが、ここではNetlify CLIを使う。

• https://github.com/netlify/cli/

インストール

今回はCI環境では使わないので、グローバルインストールする。

npm install netlify-cli -g

もしCI環境でもNetlify CLIを使うのであれば、開発依存パッケージとしてインストールする。（ビルドには別のCIサービスを使い、デプロイ先だけNetlifyにしたいような場合に便利。）

npm install --save-dev netlify-cli

コマンドが実行できるかを確認するには次を実行する。

netlify

ログイン

現在の環境でログインするには次を実行する。実行するとブラウザが開く。

netlify login

ログイン情報はユーザーディレクトリ以下の次の場所にあるconfig.jsonに保存される。

• macOS: Library/Preferences/netlify/config.json
• Linux: .config/netlify/config.json
• Windows: AppData\Roaming\netlify\Config\config.json

なおアカウントを切り替えるには次を実行する。

netlify switch

デプロイ

デプロイにはnetlify deployコマンドを使う。

netlify deploy

何もなしで実行するとカレントディレクトリの中身全てをそのままプレビュー環境にデプロイすることになる。ちなみに初回実行時はディレクトリとサイトが結び付けられていないので、コマンドライン上のプロンプトでサイトを作成または選択することになる。

多くの場合プロジェクトのルートディレクトリにカレントディレクトリがあり、その下にあるビルドディレクトリをアップロードすることになると思う。そのような場合、--dirオプションと使うとアップロードするディレクトリを指定できる。例えばビルドディレクトリがカレントディレクトリの./distにあるとすると次のようになる。

netlify deploy --dir=dist

上記を実行してもデプロイ先はプレビュー環境になる。本番環境にデプロイし公開したい場合は--prodオプションをつける。

netlify deploy --dir=dist --prod

もちろんカレントディレクトリの中身全てを公開したい場合は、--dirを省けばよい。

netlify deploy --prod

既存のサイトに対して手動デプロイを行う場合は、--siteオプションでサイト名またはサイトIDを指定してアップロードすることもできる。

netlify deploy --dir=dist --site=my-site --prod

既存のサイトの一覧は次のコマンドで確認できる。

netlify sites:list

既存サイトとのリンク

サイトの設定はディレクトリ内の.netlify/state.jsonに保持される。

サイトとディレクトリを結び付けるには次を実行する。

netlify link

上記のように何もオプションを指定しないと、プロンプトでサイトを選択することになる。

サイト名を使って結び付けたい場合は、次のように--nameオプションを使用する。

netlify link --name my-site

なお先述の通り、既存サイトの一覧は次のコマンドで確認できる。

netlify sites:list

逆にリンクを解除したい場合は、次を実行する。

netlify unlink

新規サイトの作成

新しくサイトを作成してディレクトリとリンクするには、次のコマンドを実行する。

netlify sites:create

サイト名を指定して作成するには、--nameオプションを使用する。

netlify sites:create --name my-site

参考リンク

• https://github.com/netlify/cli/
• https://docs.netlify.com/cli/get-started/
• https://cli.netlify.com

変更履歴

2022-06-12

• Cloudflare Pagesでも「ダイレクトアップロード」ができるようになっていたので、できないとしていた記述を改訂。