はじめに
公式から以下のポストや記事公開が行われた、「Vercel Drop」を軽く試してみた話です。Vercel Drop は、ファイルのドラッグ＆ドロップで簡単にデプロイが行える仕組みのようです。
●Introducing Vercel Drop - Vercel
https://vercel.com/changelog/vercel-drop
類似のサービス
かなり前からある類似のものだと、Netlify の Drop が同じようなサービスになるかと思います。
（自分が使い始めたのは、たしか 2018年くらいだったと思います）
機能面について、ざっくり見た感じでは少し違いはありそうでした（例えば Vercel Drop は、フレームワークを使ったビルドを伴うものに対応しているようです）。Vercel Drop について、この後に公式情報のリンクを掲載しつつ、さらにその後に、実際に試した手順などを書いていこうと思います。
Vercel Drop の公式情報
上記の公式ブログに、Vercel Drop のページや公式ドキュメントへのリンクが掲載されているので、まずは以下に掲載します。
●Drop to Deploy
https://vercel.com/drop
●Deploying with Vercel Drop
https://vercel.com/docs/drop
公式の説明に関する補足
Vercel Dropは、ファイルをブラウザにドラッグ＆ドロップするだけでデプロイできる機能です。Git、Vercel CLI、ローカルでのセットアップは不要で、お手軽にデプロイが行えます。
対象に関して、HTML ＋ CSS ＋ JavaScript のセットといったような静的サイトだけでなく、フレームワークを使ったプロジェクトにも対応しているようです。それを Vercel Drop が自動で検知して、適切にビルドしてくれるようです。
そのため、プロトタイプに向いているようです。公式の情報では、以下のような情報もありました。
| 方法 | Git の必要性 | CLI の必要性 | 向いている用途 |
|---|---|---|---|
| Vercel Drop | 不要 | 不要 | プロトタイプ |
| Git | 必要 | 不要 | プッシュするたびに自動デプロイする運用など |
| Vercel CLI | 不要 | 必要 | ローカルや CI からのデプロイ、スクリプト化 |
| REST API | 不要 | 不要 | プログラムからのデプロイ、マルチテナント環境 |
実際に試してみる
ここで、Vercel Drop を実際に試してみます。
お試しは「シンプルな HTMLファイルのアップロード」と、「フレームワークを使ったビルドを伴うもの」を試してみます。
HTMLファイルで試してみる
以下のページにアクセスして、HTMLファイルをドラッグ＆ドロップしてみます。HTMLファイルは、過去にとあるテスト用に作成した、適当な仕様のものをアップロードしました（1ファイルで、HTML ＋ CSS ＋ JavaScript になっているファイルです）。
そうすると、以下のような画面がになりました。
その後、上記の Deployボタンを押すと、以下のように Deployments の一覧に先ほどのページをデプロイしたものが追加されていました。
上記の中央（少し左寄り）にデプロイしたページのプレビューが出ていますが、このページ右側あたりに「Domains」という項目で記載された URL にアクセスすると、デプロイされた Webサイトを表示できることも確認できました。
フレームワークを使ったページのデプロイを試す
次にフレームワークを使ったページのデプロイを試してみます。
ここでは、Next.js を使います。
●CLI: create-next-app | Next.js
https://nextjs.org/docs/app/api-reference/cli/create-next-app
Next.js を使った確認（下準備）
Next.js でやってみます。適当なフォルダで、以下のコマンドを実行します。
「 --skip-install 」をつけたコマンドで、node_modules が追加されない形のインストールです。
npx create-next-app@latest my-app --skip-install
（ コマンド実行後に聞かれる内容を Yes で答えるようにするなら、 --yes をつけた npx create-next-app@latest my-app --skip-install --yes ）
この時にインストールされたファイル一式は以下のとおりです。後で Vercel Drop にアップロードするファイル一式になります。
ローカル環境での動作確認
ローカル環境での動作確認を行います。そのために、以下のコマンドでパッケージを追加して、アプリを起動します。
cd my-app
npm i && npm run dev
ブラウザで http://localhost:3000 にアクセスすると、以下のページが表示されました。
Vercel Drop での動作確認
Vercel Drop での動作確認をやってみます。
先ほど、パッケージを追加する前のファイル一式があります。これを、フォルダごと Vercel Drop にドラッグ＆ドロップします。
上記の「Deploy」ボタンを押して、少し待ちます。以下のような表示が出て、ビルドなどが進められます。
ビルドが終わると、以下の画面が出ました。
そして、以下のようにローカルで確認したページと同じものが表示されることや、Vercel のダッシュボードにデプロイした内容が追加されていることが確認できました。
おわりに
今回、「Vercel Drop」を軽く試してみました。ハッカソンや、開発時のちょっとしたテストなどにすごく便利そうです！
【追記】 Cloudflare Drop
Cloudflare Drop というのもあるようなので、試してみたいところです。
●Cloudflare Drop
https://www.cloudflare.com/drop/
