LeapcellでNext.jsアプリをデプロイする
もし以下の解決策で問題が解決しない場合は、Leapcell Discordコミュニティに参加して、さらにサポートを受けてください。
いくつかのステップで、Next.jsアプリをLeapcellに素早くデプロイできます。Leapcellのサンプルアプリでも、ご自身のアプリでも利用できます。
続行するにはGitHubアカウントが必要です。お持ちでない場合は、GitHubのウェブサイトで作成できます。
1. GitHubでNext.js boilerplateをフォークします。
リポジトリ: Next.js boilerplate
これはNext.jsのチュートリアルに基づいた簡略化されたNext.jsプログラムです。
Next.jsを初めて使用する場合は、最初にNext.jsのチュートリアルに従うことをお勧めし ます。
2. Leapcellダッシュボードでサービスを作成し、新しいリポジトリを接続します。
Leapcellダッシュボードにアクセスし、**New Service**ボタンをクリックします。
「New Service」ページで、先ほどフォークしたリポジトリを選択します。
リポジトリにアクセスするには、LeapcellをGitHubアカウントに接続する必要があります。
接続されると、リポジトリがリストに表示されます。
3. 作成時に以下の値を入力します。
Next.jsではビルドステップが必要なため、ビルドコマンドはnpm install && npm run buildにする必要があります。
| Field | Value |
|---|---|
| Runtime | Node.js (Any version) |
| Build Command | npm install && npm run build |
| Start Command | npm start |
| Port | 3000 |
これらの値を対応するフィールドに入力します。
Leapcellのデフォルトポートは8080ですが、Next.jsフレームワークはデフォルトポートとして3000を使用します。これを正しく設定してください。
4. アプリにアクセスする:
デプロイされると、デプロイメントページにfoo-bar.leapcell.devのようなURLが表示されます。サービスページに表示されているドメインにアクセスします。
継続的デプロイメント
リンクされたブランチへのすべてのプッシュは、自動的にビルドとデプロイをトリガ ーします。失敗したビルドは安全にキャンセルされ、次の正常なデプロイまで現在のバージョンが実行されたままになります。
継続的デプロイメントの詳細をご覧ください。