NuxtアプリをVercelに上げてSlackでバージョン管理

最近Nuxt.jsを勉強中ですが、どこか公開できる場所にお金のかからないところ無いかなーと探しております。
そんなときに、以前とある現場で使っていたVercelをふと思い出したので調べてみました。
VercelはNext.js作ったZEIT社が提供する、Webアプリケーションを本番環境にデプロイする、フロントエンド向けのプラットフォームの一つです。Next.jsの製作者たちによって開発されており、Next.jsとの親和性は非常に高いのですが、Nuxtでももちろん使えるので、Staging上げる前用の確認用に使ってみることにしました。

## Nuxt3アプリの作成
まずはここから。Nuxt2と3でやり方違うので注意。
```
$ npx nuxi init nuxt3-authapp
Need to install the following packages:
  nuxi
Ok to proceed? (y) y
Nuxi 3.2.3
✨ Nuxt project is created with v3 template. Next steps:
 › cd nuxt3-authapp
 › Install dependencies with npm install or yarn install or pnpm install
 › Start development server with npm run dev or yarn dev or pnpm run dev
$ cd nuxt3-authapp/
$ ls
README.md	nuxt.config.ts	public
app.vue		package.json	tsconfig.json
```
これで準備はOK。諸々インストールを行います。

```
$ npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

> postinstall
> nuxt prepare

Nuxi 3.2.3
✔ Types generated in .nuxt

added 690 packages, and audited 691 packages in 44s

95 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

大丈夫なら動作確認。

```
$ npm run dev

> dev
> nuxt dev


Nuxi 3.2.3
Nuxt 3.2.3 with Nitro 2.2.3

  > Local:    http://localhost:3000/
  > Network:  http://10.0.0.4:3000/

ℹ Vite client warmed up in 1803ms
✔ Nitro built in 605 ms
✔ Vite server hmr 14 files in 983.056ms
```
とやって立ち上がるところまで確認。
![Welcome-to-Nuxt-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/95a813f3-3a88-4386-7192-316354e2a0e0.png)

## Githubに登録
手順を追って、作成したNuxtアプリをGithubにあげてみましょう。
まずはGithub上にリポジトリを作成。
![Your-Repositories.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/2d77c7e6-147e-5793-fe25-8dba64c32d71.png)
![Create-a-New-Repository (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/445fcdc8-5449-09e5-2283-18cda13ca32f.png)

そしたら先程のNuxtアプリに戻って、Gitの初期化。
```
$ git init
Initialized empty Git repository in ***/nuxt3-authapp/.git/
```
念の為ステータスを確認。全くコミットされていないことを見ておく。
```
$ git status
On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	.gitignore
	.npmrc
	README.md
	app.vue
	nuxt.config.ts
	package-lock.json
	package.json
	public/
	tsconfig.json

nothing added to commit but untracked files present (use "git add" to track)
```
あとはお決まりの手順でコミットからのプッシュ。この際にリモート側のリポジトリも指定します。
```
$ git add .
$ git commit -m "first commit"
[main (root-commit) 3fa7ff5] first commit
 9 files changed, 15824 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 README.md
 create mode 100644 app.vue
 create mode 100644 nuxt.config.ts
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/favicon.ico
 create mode 100644 tsconfig.json
$ git branch -M main
$ git remote add origin git@github.com:****/nuxt3-authapp.git
$ git push -u origin main
Enumerating objects: 12, done.
Counting objects: 100% (12/12), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (12/12), 152.65 KiB | 976.00 KiB/s, done.
Total 12 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:hardreggaecafe/nuxt3-authapp.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.
```
Github上にソースがすべてコミットされているのを確認。
![hardreggaecafe-nuxt3-authapp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/89f0a478-52a6-b390-798a-3c5ee805e2df.png)


## Vercelの設定
こちらがTOP画面
https://vercel.com/

![スクリーンショット 2023-02-19 22.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/14222e4e-171f-0324-6ecc-e7feca8a4f7c.png)

Signupしようとするとこちらの画面になります。一旦Hobbyを選んでログインアカウント名を入力します。
![スクリーンショット 2023-02-19 22.26.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/1c376a72-d080-f438-12cd-5aff107b88a2.png)

そうすると普段使っているソース管理システムが出てくるので選んでください。自分の場合はGithubにしました。
![スクリーンショット 2023-02-19 22.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/73528c11-5330-3f75-ccee-a01904be2222.png)

あげようとしているアプリをRepositoryから選択します。基本的にはこれで終わりです。
![New-Project-–-Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/9f731ec5-10fb-a4f0-0707-9395b11e483f.png)

![New-Project-–-Vercel (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/7a77eb5a-fc93-28ca-be5a-c7245c56f4f3.png)

ちゃんとデプロイされればこちらのようにデプロイしたアプリのプレビューが表示されます。
![New-Project-–-Vercel (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/4bcdf951-3ae4-1fc4-e955-d4cb19e395e7.png)

## Slack Integration
Integrationのリンクをクリックして「Slack」を検索するとこの画面になります。
![Slack-–-Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/5da18e90-45ae-8c0d-e001-af6402823104.png)

Add Integrationボタンを押して出てくる画面から接続するSlackのアカウントを選択します。
![Slack-–-Vercel (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/f86b3f03-f986-1f1f-0940-b5658ee967cf.png)

![スクリーンショット-2023-02-19-17-26-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/85b85ae2-7222-1d60-1dad-c1ff3ef531c9.png)

設定画面を開くとSlackに投稿するチャネルと投稿内容について変更できます。
![Slack-Integration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/18edd0d8-3108-4a79-ff89-a02e41ebf2f6.png)

## いざNuxtアプリを変更して、GitにPush
![スクリーンショット 2023-02-19 19.52.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/8d7483e4-dae6-aa46-61aa-95c93a6ed018.png)

するとSlackの指定チャネルにデプロイが完了した旨が届きました。
![スクリーンショット-2023-02-19-19-50-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/886ed53c-d128-496a-dcd0-6856e63c9a7c.png)

以上です。お役に立てれば幸いです。