Netlifyでローカルビルドをそのまま静的ホストする
Netlifyの手動デプロイを使うと、ブラウザまたはCLIからフォルダをアップロードして静的ホストすることができる。
ブラウザ（各種メニューの「手動デプロイ」、Netlify Drop）からデプロイすることもできるが、ここでは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参考リンク
変更履歴
2022-06-12
- Cloudflare Pagesでも「ダイレクトアップロード」ができるようになっていたので、できないとしていた記述を改訂。