ConoHaVPSを使用してWebサイトを公開

皆さんこんにちは、いるかとくらげです.


今回は、このWebサイトをどのように公開したのかについてです.
kamalについてやNextjs＋MicroCMSで作ったブログをVercel以外でデプロイする方法について詳しく解説していきたいと思います.
まだあまり情報がないと思うので良ければ参考にしてみてください.
使用したサービスは以下のとおりです.

使用技術

• ・ConoHaVPS
• ・お名前ドットコム
• ・kamal2
• ・DockerHub

技術選定理由

VPSを選択した理由として、Vercelをなんとなく使いたくなかったという理由と、VPSを扱う経験をしておくことで将来役に立つことが多いと感じたため選択しました.VPSを選ぶ際には、比較的安価でよくおすすめされているという理由でConoHaVPSを使用しました.ドメインは、お名前ドットコムで購入しました.どちらもGMOグループのサービスですね.私は、さくらのVPSも契約していてコントロールパネルの使いやすさについてなども比較してみようと思います.という訳でよろしくお願いします.

VPSについて

VPSとは、仮想専用サーバー（Virtual Private Server）のことであり、実際の物理的なサーバーを仮想化してユーザーごとの環境を構築して各ユーザーが自由に環境を構築することができるというものです.
よくホームページやブログを公開する際に使用するレンタルサーバーとの違いとして、レンタルサーバーは一つのサーバーを複数人で共用して使うため他人の影響を受けやすいというデメリットがありますが費用が安いというメリットもあります.VPSのメリットとしては今回のようにNextjsのプロジェクトやRubyなど言語を問わずWebサービスを公開したり、Linuxの学習に使用する、もちろんブログを公開したりすることができます.今回は使用しませんでしたがnodejsサーバーを構築してNextjsのプロジェクトをデプロイすることもできます.デメリットとしてはLinuxの知識が必要であるという点がよく挙げられますが今回行うkamal2を使ったデプロイはLinuxの知識がほとんどなくてもデプロイできるためこの点はデメリットになりにくいと思います.ufwなどのファイヤーウォールの設定やユーザーの設定ができるに越したことはありませんが...

今回はConoHaVPSを使用しますがその他、おすすめのVPSをまとめてみました.よければ参考にしてくださいね.

• ・ConoHaVPS
• ・さくらのVPS
• ・KAGOYA CLOUD VPS

VPSの利点は比較的安価に使用することができ、自由度が高いことがよく挙げられます.デメリットは、サーバーについての知識が多少なりとも必要となってくる点です.ただのホームページなんかであればVPSよりレンタルサーバーを借りて公開するのが良いと思います.Nextjsを用いたサービスを公開するのに良く用いられるのはNextjs開発元のVercelです.特段の理由がなければVercelを使用するのが手っ取り早いと思います.商用利用しようと思うと無料では利用することができないため、有料のプランを「契約しなければなりません.月3000円程度かかった気がします.ブログを作られる方にとってはとても割高です.個人で使用する分にはVercelを基本的にはおすすめします.

今回は私がVPSについて興味がありサーバー構築に興味を持っていたのでVPSを使用します.お好みのサービスのVPSを使用していただければ大丈夫です.VPSの比較は他の方が多く行われているのでそちらを参考にしてみてください.
ではプロジェクトの作成過程から順に説明していきます.

1. Nextjsのプロジェクト作成

まずは、Nextjsのプロジェクトを作成しないことには始まりませんね.
作っていきましょう.
公式のリファレンス通りです.
node.jsがない場合はインストールしましょう.
公式リファレンス
日本語版リファレンス

$ npx create-next-app@latest

私は、このサイトを制作するにあたりNextjs15.1.0、TypeScript,PageRouterを用いて制作しました.今になってAppRouterで作成しておけばよかったなとも思うことはありますが.
どちらの方法で作成しても構いません.

2. 開発

プロジェクトを作成したら実際に開発していきましょう.
開発を行う際にgitによる管理を行ってください.kamalを使用するに際に必要となります.GitHubにアップロードする必要はありません.
のちのちDockerを使用するのですが開発する際には使用しなくても構いません.後でDocker化します.

3. VPSとドメインを契約

開発が完了したらあとは公開するだけですね.
今回のタイトル通りVPSを契約します.様々なVPSがありますが私はConoHaVPSを使用しました.お好みのものを契約してください.
VPS提供会社さんの手順通りに進めてください.

独自ドメインがほしい方はお名前.comやVPSとセットでも購入できますので取得してみてください.

4. プロジェクトをDocker化

NextjsのプロジェクトをDocker化します.
Docker fileを作成します.
公式のGitHubからDocker fileのプログラムをそのままコピーしてきます.

そしてnext.config.jsを編集します.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output:"standalone",
}

module.exports = nextConfig

outputをstandaloneにしてVercel以外でデプロイすることを示します.

次に動作確認をします.以下のコマンドを実行します.

$ docker build . -t project-name
$ docker run --rm -p 3000:3000 project-name

上記のコマンドを実行してhttp://localhost:3000で確認してみて動作していればDocker化完了です.

また、DockerHubを使うのでDockerHubのアカウント登録もしておきましょう.

5. ヘルスチェックを導入

kamalを使用するにあたりサーバが作業を正常に実行できるかどうかを確認する方法のことをヘルスチェックといいます.
app/up/route.jsに以下のプログラムを記述します.

export async function GET() {
    return new Response("Health check", {status: 200})
  }

私もなんですがPageRouterを使用しているとappディレクトリがないのでその場合はappディレクトリを作成してその下にupディレクトリを作り、route.jsを作成しましょう.TypeScriptfileでも構いません.

6. kamalの導入

さぁ、いよいよ本題のkamalの導入です.
まずは、kamalをインストールしましょう.公式ページから導入しましょう.Rubyの環境がある方は、gemでインストールすると良いでしょう.
Ruby環境がない人は以下のコマンドを実行してkamalの環境を整えてください.ターミナルを閉じるごとに以下のコマンドを実行をしなければならないのでgemでのインストールがおすすめです.

$ alias kamal='docker run -it --rm -v "${PWD}:/workdir" -v "/run/host-services/ssh-auth.sock:/run/host-services/ssh-auth.sock" -e SSH_AUTH_SOCK="/run/host-services/ssh-auth.sock" -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/basecamp/kamal:latest'

Rubyの環境構築方法は記事がたくさんありますのでそちらを御覧ください.ここでは説明しません.

以下のコマンドを実行することで設定ファイルが生成されます.

$ kamal init

.kamalフォルダとconfigフォルダが作成されてい各種ファイルが生成されています.
secretファイルはgitにコミットしては行けないのでgitignoreしておきましょう.

続いて、DockerHubでPersonal Access Tokenを取得します.
secretファイルに以下の記載をします.gitにコミットはしてはいけません.

KAMAL_REGISTRY_PASSWORD=DockerHubのPersonal Access Token

上記のように書き換えます.

ここからメインのconfig/deploy.ymlを編集します.

# Name of your application. Used to uniquely configure containers.
service: app-name(アプリの名前:任意)

# Name of the container image.
image: docker hubのアカウント名/イメージ名

# Deploy to these servers.
servers:
  web:
    - VPSのIPアドレス(IPv4)
  # job:
  #   hosts:
  #     - 192.168.0.1
  #   cmd: bin/jobs

# Enable SSL auto certification via Let's Encrypt (and allow for multiple apps on one server).
# Set ssl: false if using something like Cloudflare to terminate SSL (but keep host!).
proxy:
  ssl: true
  host: VPSのホスト名(取得したドメイン)
  app_port: 3000

# Credentials for your image host.
registry:
  # Specify the registry server, if you're not using Docker Hub
  # server: registry.digitalocean.com / ghcr.io / ...
  username: DockerHubのアカウント名

  # Always use an access token rather than real password (pulled from .kamal/secrets).
  password:
    - KAMAL_REGISTRY_PASSWORD

# Configure builder setup.
builder:
  arch: amd64
  context: .

# Use a different ssh user than root
#
 ssh:
   user: app

上記のプログラムのように設定していきます.DNS設定などは別途調べてください.
さくらのVPSを使っている方やrootユーザー以外でアクセスしたい方はsshのuserをユーザー名にしてください.私もそうしていますが.ポートも変更している方は記述することでsshの接続が可能になるかと思います.デフォルトはrootユーザーでsshは22番ポートになっています.セキュリティ上問題なので変更することをおすすめしますが今回は変更しないこととして説明します.root以外での接続は少し手間がかかります.詳しくは公式リファレンスを読んでください.(英語のみ)

7. kamal setup の実行

さぁ、あとは実行するだけですが実行する前にgit commitしましょう.
コマンドラインからkamal setupコマンドを実行します.これでデプロイができるはずです.
コマンドを実行するとsshで設定したユーザーのパスワードを聞かれるので入力してあとは放置で終わりです.SSLなど勝手にやってくれるのが非常に便利です.

2回目以降はkamal deployを実行して更新していくことができます.

まとめ

今回はkamal2を用いたVPSにNextjsプログラムをデプロイする方法について説明しました.
この方法は、比較的手軽にできると思います.よければ参考にしてみて、サービスを公開してみましょう.

ではまた...