vercel入門 - nuxt製のspaをgithubでコード管理 - 

# vercel

https://vercel.com/docs

> 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入門も前にしてみたので参考までにどうぞ。

https://qiita.com/sugo/items/2ee64887d682b0dae635

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

# vercel サインアップ

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

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

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

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

```shell
% 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
```

一応動作確認しておく

```shell
% cd app
% npm run dev
```

http://localhost:3000/

![スクリーンショット 2021-08-03 12.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/66e73ac3-9a4c-0c1c-e6eb-5ab51bfc37ea.png)

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

# vercel ダッシュボード

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

![スクリーンショット 2021-08-03 12.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/48ee73ca-830c-379d-5730-668a3e1c359c.png)

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

![スクリーンショット 2021-08-03 12.20.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/86fdfd54-13e0-9bdc-d196-23efabaf76f8.png)

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

`Install` をクリック

![スクリーンショット 2021-08-03 12.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/5bddee4e-0189-5770-3696-ed1c700ac15c.png)

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

![スクリーンショット 2021-08-03 12.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/e7317ec6-33cb-b7d5-b43b-dec4ff426dd7.png)

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

![スクリーンショット 2021-08-03 12.30.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/2e03b44f-7ee2-9415-934b-b60be573cec7.png)

> Create a Team

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

> Configure Project

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

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

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

![スクリーンショット 2021-08-03 16.24.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/93d4a87c-0849-1f03-982e-2c3f1f60f873.png)

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

![スクリーンショット 2021-08-03 16.10.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213486/5f9c5db0-43d8-f736-7aea-42432475b990.png)

# ちょっとつまづいたこと

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