# 100x ビルダープレイブック: Kamal 2 とクラウド VM を使用したセルフホスティング Next.js

製品を数日で出荷します。サーバー恐怖症にさようなら!

日本語に機械翻訳されたコースです

screenshot

こんにちは!この本を読んでいただきありがとうございます。
2024年の後半で、世界中に多くの課題があることは明らかです:インフレは止まっていません。お金を借りるのが難しくなっています。テクノロジー企業は予算が厳しくなっています。

しかし、変わらないことがあります:人々は購入するものやサービスからより多くの価値を期待しています。
テクノロジーの労働者およびクリエイターとして、私たちはこれらの課題に適応し、より少ない労力でより多くを構築する必要があると信じています。
単に迅速に出荷するのではなく、成熟したテクノロジースタックを使用して本当に構築し、反復し、低コストでコンピューティングを行う必要があります。つまり、ベアメタルまたはクラウドVMです。

ソフトウェアアプリケーションの開発は、大規模言語モデルの成長により、以前ほど高価でも遅くもありません。
同時に、開発を促進するためにますます多くの新しいテクノロジースタックが作成されています。
しかし、私たちは「DevOpsは高価でリスクがある」、「サーバーレスであるべきだ」といった教育を受けてきました。
私はかつてそれを信じていました。Google App Engineから多くの異なるサーバーレススタックを試しましたが、私のビジネスに適したものは見つかりませんでした。近年、Vercelのような他の多くの選択肢があります。彼らの素晴らしい開発体験への努力には敬意を表しますが、私は依然としてサーバーレスが物事を構築する持続可能な方法ではないと信じています。

先月の初め、DHHは37signals/basecampでKamal 2をリリースしました。これは昨年リリースされたKamal(MSRK)に基づいています。これは、単一のLinuxマシン上で複数の異なるWebアプリケーションをデプロイできるという大きな新機能を持っています。これは実際にはKamal 1でも可能でしたが、多くのハックが必要でした。
一人または少人数のチームにとって、これは有用な変更です。なぜなら、初期段階のプロジェクトでさらに多くを節約できるからです。

同時に、GumroadのCEOであるSahil Lavingiaは、CursorとNext.jsを使用したライブコーディングのストリーミングをいくつか行い、実際の例を示しました。これは非常に生産的で、基本的なTypeScript(またはJavaScript)、CSS、少しのコマンドラインの知識があれば可能です。

現在、小規模チームの成長プロジェクトにとって、迅速に提供できる完璧なスタックの1つは、Kamal 2を使用してDockerで提供されるNext.jsです。
始める前に、自己紹介をしたいと思います。私は1990年代に生まれ、1999年に父が修士号を申請し始めたときに、早くからコーディングとインターネットを使用し始めました。その時、私たちは家にコンピュータを持っていませんでした。父と私はインターネットカフェに行って情報を得ていました。
学校を卒業した後、私はMicrosoftに行き、Outlook iOS、Android、Mac、Web、OneDrive/Sharepoint Webなど、いくつかの異なるプロジェクトに取り組みました。私は多くの百万行のコードプロジェクトを見てきました(明らかにOutlookとOneDriveの両方です)。そして、面白いことに、クライアントコードのすべてのソースマップはphotos.onedrive.comで見つけることができます。これらのプロジェクトは会社にとってキャッシュカウです。しかし、私はそれらがソフトウェア開発の正しい道にあるとは思いません。要するに、実行が遅すぎて、少なくとも今日の時点ではテクノロジーが成功に貢献しているのを見ることができません。これらのプロジェクトは良いコードと比較的現代的なデザインを持っています。しかし、私はそれが間違っていると感じています。特にAIの進化に伴って。だから、私はMicrosoftを辞めて自分のビジネスを始めました。

このチュートリアル(またはコミュニティ)は、99%の他のものよりも実用的な実世界のテクノロジースタックの考えや共有の最初の部分です。これは、物事を迅速に出荷することを目指すだけでなく、低コスト(消費時間とランタイムクラウド費用の両方の観点から)を目指しています。なぜなら、ジェフ・ベゾスが言ったように、「あなたのマージンは私の機会」です。もしあなたの競合他社がVercelやAzure/AWSにいるなら、このスタック(Next.js + Kamal 2)を使用することで、はるかに多くの機会が得られます。私は、私たちのIPOの前でも機能することができると確信しています : )
この初期部分を読んでいただきありがとうございます。楽しんでいただけることを願っています。

さて、テクノロジーに焦点を当てましょう。

技術要件

この本は主に技術的な内容です。以下は要件です:

  • ハードウェア:Ruby、Docker、Node.jsを実行できるコンピュータ。通常、Windows/Mac/Linuxはすべてこれに適しています。
  • 知識:
    • Rubyの最小限または無知識
    • Node.js(Next.jsで製品をビルドするために必要)
    • Next.jsまたはExpress.jsのような他のNode.jsフレームワーク
    • 基本的なLinux/Docker

ローカルマシンにDocker(またはDocker Desktop)がインストールされていることを確認してください。そうでない場合は、リモートのLinuxマシン上のリモートDocker環境を「ビルダー」として使用することも許可されます(この概念についてはKamal 2の部分で説明します)。

この本があなたに適していないかもしれないと思った場合でも心配しないでください。この本の30%を超えない限り、購入から7日以内に返金をリクエストできます。
この本を引き続き利用可能にしたいが、何か提案や困難がある場合は、このページの下にコメントしてください。私たちが助けます。

クイックスタート:15分以内に生産環境での最小限のNext.js

私たちは、プロダクションに到達する前にあなたを長時間待たせたくありません。最初のプロジェクトとして、最小限のNext.jsプロジェクトを開始し、すぐにプロダクションにデプロイしましょう。多くの本では、最後のセクションがプロダクションへのデプロイに関するものです。その方法では迅速に出荷できません。
私は、開発の最適なペースは、コードが完成し、回帰の可能性が低いことを確認した後に即座にプロダクションに出荷することだと信じています。
すべての開発環境が整っていて、クラウドサーバー(DigitalOcean、OVH、Hetznerなどの仮想マシンのようなもの)があると仮定すると、私たちは100%15分以内にデプロイできます。2回目には、5分で動作させることができるかもしれません。一度慣れれば、製品を構築するモメンタムを失うことはありません!

では、まずデプロイしましょう!

Next.jsプロジェクトの開始

次のコマンドを使用してNext.jsプロジェクトを開始できます:npx create-next-app@latest next-kamal-playbook-minimal-demo
このプロセスに不慣れな場合は、Next.jsの公式ドキュメントを読むことができます。https://nextjs.org/docs/getting-started/installation

出力は次のようになります。

➜  next-playground npx create-next-app@latest next-kamal-playbook-minimal-demo
次のパッケージをインストールする必要があります:
[email protected]
続行してもよろしいですか? (y) y

✔ TypeScriptを使用しますか? … いいえ / はい
✔ ESLintを使用しますか? … いいえ / はい
✔ Tailwind CSSを使用しますか? … いいえ / はい
✔ `src/`ディレクトリを使用しますか? … いいえ / はい
✔ App Routerを使用しますか? (推奨) … いいえ / はい
✔ デフォルトのインポートエイリアス(@/*)をカスタマイズしますか? … いいえ / はい
✔ 設定したいインポートエイリアスは何ですか? … @/*

デフォルトのインポートエイリアスをカスタマイズするかどうかを選択できます。現在の状態ではあまり重要ではなく、後でいつでも変更できます。

次のステップは、最小限のデモが実行されていることを確認することです。next-kamal-playbook-minimal-demoディレクトリに移動できます(Linux/Mac/Windowsでは、ターミナルでcd next-kamal-playbook-minimal-demoを実行できます)、次にnpm run devを実行します。
http://localhost:3000を開くと、Next.jsの初期画面が表示されます。つまり、このプロジェクトは実行中です。
この部分ではNext.jsのコードを変更したくありません。代わりに、このプロジェクトのルートにDockerfileを追加します。VSCode/CursorまたはVimを使用して、次の内容のファイルを追加できます。