Vercelで自サイトをリニューアルしたときの備忘録。今後、随時加筆していきます。
開発環境
どこからでもアクセスできる開発専用の環境を作りたかったので、Google Compute Engine(GCE)の無料枠でインスタンスを立てることにしました。
GCEは、以前までWordPress用に使っていましたが、アーカイブ化に伴い別サーバに引っ越して、ちょうどリソースが余ってたので良かったです。
GCE
無料枠に収まるようにリソースを選択します(リージョン:us-west1、マシン:e2-micro、ストレージ:30GB)。OSは使い慣れたUbuntu 24.04 LTSを選択。
インスタンス作成後、詳細画面でGoogleアカウントとは異なるユーザ名で作成したSSH認証鍵を追加します。これで、このあとのTailscaleでの接続が楽になります。
Tailscale
セキュリティを考慮して、開発環境への接続はTailscaleに限定します。以下の記事を参考に、Google Cloudの管理画面でTailscale用の設定を追加します。
おそらく記事中の「Step 2: Allow UDP port 41641」までやれば問題ないずです(たぶん)。
GCEの管理画面からサーバにSSH接続して、Tailscaleをインストールします。Tailscaleアカウントでログインし、tailscaled
を起動します。このとき、TailscaleのSSH接続を許可するため、ssh
オプションを付けます。
$ sudo tailscale up -ssh
これで、Tailscaleインストール済の別端末から接続できるはずです。最も簡単な方法は、コマンドプロンプトからssh [サーバのユーザ名]@[Tailscaleのホスト名]
でログインできます。
このとき、先ほど追加したSSH認証鍵のユーザを使って接続すると、sudoコマンドがパスワードレスで実行できて便利です。
VSCode
VSCodeにもTailscaleプラグインをインストールします。これで、エディタからTailscale経由でサーバに接続し、直接ファイルを開いて編集できます。
Next.js
VercelにはNext.jsをデプロイします。ただ、Next.jsは開発経験も知識もゼロなので、Vercelで公開されているテンプレートを最大限活用します。
今回は、PortfolioカテゴリからNextfolioというとてもクールなテンプレートを選択しました。
なお、事前にVercelのアカウントを作成してGitHubと連携しておくと、上記リンクから「Deploy」を選択するだけで、自動でVercelのプロジェクト作成とGitHubのリポジトリ作成を行ってくれます(なんて便利なんだ…)。
Vercelのチームは、非営利の個人使用のみであれば、「Hobby」を選択すると無料で使えます。ただ、私は新規ユーザだったので、最初は「Pro Trial(10日間のお試し)」か「Pro」しか選べず、「Hobbyを選べないってことは無料で使えないのか?」と震えましたが、「Pro Trial」を選択して10日後に自動で「Hobby」に切り替わってました(安心しました)。
Nextfolio
GitHub連携によって、GitHubのリポジトリを自動作成後、開発環境でローカルリポジトリを作成(クローン)します。
$ cd ~ $ git clone https://github.com/litoma/Nextfolio.git $ cd Nextfolio
Node.js
続いてnode.jsをインストールします。このあたりから生成AIの力を借りながら進めます。
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt update sudo apt install -y nodejs
pnpm
Nextfolioはpnpmを使うようなのでインストールします。依存関係にあるパッケージのインストールもあわせて行います。
$ npm install -g pnpm $ pnpm install
ところでpnpmって何でしょう。生成AIに聞いてみます。
pnpm (performant npm) は、JavaScriptのパッケージマネージャーです。npm (Node Package Manager) と同じように、Node.jsプロジェクトで必要なパッケージをインストールしたり、管理したりするツールですが、npmよりも高速で、ディスク容量を節約できる点が大きな特徴です。
とりあえず、npmのライバルということがわかりました。
Nextfolio
Nextfolioのテンプレートをカスタマイズします。各種SNSへのリンク含め、トップページの情報は以下のファイルを編集すればOKです。
app/page.tsx app/lib/config.ts
私の場合、生成AIに聞きながらblogページもカスタマイズし、はてなブログの記事一覧を表示するようにしました。コードを以下に貼っておきます。
GitHub
カスタマイズが完了したらローカルリポジトリにコミットし、GitHubにプッシュします。
git add . git commit -m "Customize Nextfolio" git push origin main
事前にgitの認証やAPIキーの発行は済ませておきます(手順は生成AIに聞けば教えてくれます)。また、以下のコマンドを実行し、認証情報をローカルに保存することで、初回以降は入力不要となります。
git config --global credential.helper store
Vercel
GitHubにプッシュされると、Vercelがその更新を検知して自動でデプロイを開始します(なんて便利なんだ…)。
Nextfolioの場合、だいたい1~2分でデプロイが完了します。また、デプロイでエラーとなった場合はVercel上でも表示されるほか、登録したメール宛にも通知してくれます(本当に便利すぎる…)。
さらに、Hobbyプランでも独自ドメインを設定できます。私の場合、DNSにCloudflareを使っていますが、Vercelの管理画面上の操作だけで、DNSのレコード追加まで行ってくれました。