More than 1 year has passed since last update.

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

Last updated at 2023-03-04Posted at 2023-02-19

最近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

とやって立ち上がるところまで確認。

Githubに登録

手順を追って、作成したNuxtアプリをGithubにあげてみましょう。
まずはGithub上にリポジトリを作成。

そしたら先程の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上にソースがすべてコミットされているのを確認。