vercel

Vercel is an open serverless platform for static and hybrid applications built to integrate with your headless content, commerce, or database.
We provide a frictionless developer experience to take care of the hard things: deploy instantly, scale automatically, and serve personalized content around the globe.
We make it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default.

Vercelは、お客様のヘッドレスコンテンツ、コマース、データベースと統合するために構築されたスタティックおよびハイブリッドアプリケーションのためのオープンなサーバーレスプラットフォームです。
Vercelは、フリクションレス（摩擦のない）な開発環境を提供し、瞬時にデプロイし、自動的にスケールアップし、世界中でパーソナライズされたコンテンツを提供するという、難しい作業を行います。
フロントエンドチームは、パフォーマンスを重視した楽しいユーザーエクスペリエンスの開発、プレビュー、出荷を簡単に行うことができます。

です。

netlifyあたりと競合な感じで話されることが多いと思います。
古いけど、netlify入門も前にしてみたので参考までにどうぞ。

netlifyよりよさげだったので今回入門してみます。

vercel サインアップ

githubアカウントでサインアップした。

githubにnuxtのspaプロジェクトを準備

プライベートリポジトリ
開発は develop ブランチ
main ブランチへのマージ/プッシュ等でci/cdが走るようにする

spaプロジェクト + 他は適当に好み

% npx create-nuxt-app app

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in app
? Project name: app
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None

一応動作確認しておく

% cd app
% npm run dev

nuxtのspaプロジェクト自体は準備ok

vercel ダッシュボード

New Project からプロジェクト作成

先ほど作成したリポジトリをインポートする

別ウィンドウが出てきて、普通に指示に従う
今回は自分のアカウントから、先ほど先制したリポジトリのみを追加
面倒なら All repositories にしてどうぞ
（「どのアカウントのどのリポジトリを追加しますか？」なので、組織とかに所属してれば会社アカウントとかも選べる）

Install をクリック

vercelがリポジトリを読み取れるようになったので、ダッシュボードに出てくる
Import をクリック

そうするとプロジェクトの設定画面に移るので設定していく

Create a Team

テストなのでとりあえず Skip を選択

Configure Project

Nuxt.js が選べるので選ぶ
ROOT DIRECTORY を app にする
Build and Output Settings で BUILD COMMAND を npm run generate にする

ほかはデフォルトのまま、 Deploy をクリック

※ 事前にmainにソースをプッシュなりマージなりしておくこと

一応デプロイ後の該当プロジェクト
initしただけのサイトだけど、見れる状態になってる

ちょっとつまづいたこと

ROOT DIRECTORYの指定し忘れでこけた
mainブランチにソースをマージする前にデプロイをしてしまってこけた
BUILD COMMANDはデフォルトだと npm run build だけ叩くようで、spaの場合は npm run generate を叩くよう明示的に指定する必要があった