VercelでNext.jsアプリのデプロイを試してみた

Sep 19, 2021 09:35 · 1290 words · 3 minute read Vercel Next.js

気になっていたものの、なかなか手を付けずにいたVercelでのNext.jsアプリ公開を試してみました。

目次

環境

  • WSL2 Ubuntu 18.04

WSL2+nodebrew+Node.jsの環境構築

今回はWSL2にnodebrewを入れてNode.jsを動かします。
前回の反省を元に、全てWSLのファイルシステム上で作業します。

(続き)Windows+WSL2でReactの開発環境を作った · kapieciiのブログ

Node.jsが入っていない状態から始めます。

$ nodejs

Command 'nodejs' not found, but can be installed with:

sudo apt install nodejs

$ curl -L git.io/nodebrew | perl - setup
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
100 24696  100 24696    0     0  15197      0  0:00:01  0:00:01 --:--:-- 2679k
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

.bash_profileに「#export PATH=$HOME/.nodebrew/current/bin:$PATH」を追記し、sorceで読み込み。

$ cat ~/.bash_profile
source ~/.bashrc

# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bash_profile

nodebrewの動作確認。

$ nodebrew help
nodebrew 1.1.0

最新の安定版をインストールして有効化します。

$ nodebrew install-binary stable
$ nodebrew ls
v16.9.1
$ nodebrew use v16.9.1
$ node -v
v16.9.1

Next.jsアプリを作成

公式のGetting Startedの手順に従います。

Getting Started | Next.js (nextjs.org)

$ npx create-next-app
$ cd create-next-app
$ npm run dev

pages/index.jsを少しいじりました。

ソース一式をGithubにPush

Vercelアカウント作成

下記リンクからSign Upします。

Sign Up – Vercel

今回はGithubと連携して使うので、GitHubでSign Upしました。

Vercelにデプロイ

先程作ったRepositoryを選択してimport。

今回は検証目的なので、とりあえずTeam作成はスキップ。

環境変数やBuild Commandも空白のまま。
最後にDeployボタンをクリック。

1分かからずDeployが完了し、花吹雪で歓迎してもらえました。

VercelのDashboard

Dashboardをポチポチと確認してみます。
趣味用途ならAnalytics機能も無料で使えようです。

Vercel APIで使うProject IDの確認や独自ドメインの設定もDashboardから変更することができます。

更新テスト

ローカルのファイルを更新してGithubにpushすると、自動でデプロイが始まります。

最後に

VercelにNext.jsアプリの公開をしてみました。

Vercelでは、Custom Domainの設定も無料、環境変数ももちろん使えるし、Custom Domainを使っていたとしても標準でHTTPSが有効になっています。
最高ですね。

Custom Domains, Environment Variables, Automatic HTTPS, and more

外部のAPIと連携させることで、無料の範囲内でもかなり色々なことができそうです。
次は下記の記事を参考に、SpotifyのAPIと連携したWebアプリを作成してみようと思います。

tweet Share