Next.js APP を cPanel にデプロイする方法 (ガイド)

公開: 2023-07-17
目次
  • Next.jsとは
  • cPanelとは
  • Next.js アプリを cPanel にデプロイする
  • NextJs を cPanel にデプロイすることの長所と短所
  • よくある質問
  • その他のリソース
  • 結論

シームレスかつ効果的な方法で Next.js アプリケーションを cPanel にデプロイする方法を学習します。 このプロセスを段階的に説明します。

本題に入る前に、これらの用語を初めて使用する場合に備えて、Next.js と cPanel が何であるかを理解しましょう。

Next.jsとは

Next.js は、React.js をベースにした優れたフレームワークです。 これは、サーバーサイド レンダリング (SSR) アプリを構築するためのウィザードです。 React.js はデフォルトでシングルページ アプリケーション (SPA) の作成のみをサポートします。 しかし、Next.js は魅力的な SSR 機能で躍進します。 ほかに何か？ Next.js には、ファイルベースのルーティング システムなどの強力な機能が詰め込まれています。

cPanelとは

cPanelに移動します。 これはサーバー管理を簡素化するソフトウェアと考えてください。 それはあなたのテーブルに多くのツールをもたらします。 ファイル マネージャー、データベース マネージャー、ドメイン名マネージャーはほんの一例です。

Next.js と cPanel を使いこなしたので、次は cPanel に Next.js アプリをデプロイするという主なミッションに取り組んでみましょう。 Next.js アプリ、cPanel を備えた Web ホスト、およびリンクされたドメイン名を持っていると仮定して、先に進みましょう。

Next.js アプリを cPanel にデプロイする

ステップ 1 : カスタム Next.js サーバーをセットアップすることから始めます。 プロジェクトのルート ディレクトリに、必要なコードが含まれた server.js ファイルが必要です。 ヘルプが必要な場合は、公式 Next.js ガイドを参照してください。

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

ステップ 2 : package.json ファイルを微調整します。 この手順により、環境が「運用準備完了」となり、server.js ファイルがアクティブ化されます。

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

ステップ 3 : Next.js アプリケーションを構築します。 これは、ターミナルでnpm run buildまたはYarn run buildコマンドを使用して実行できます。

ステップ 4 : ビルド後、ファイル マネージャーで Next.js プロジェクト ファイルを見つけます。 隠しファイルが表示されない場合は、表示設定をオンにします。 node_modules と .git フォルダー、README.md、および .gitignore ファイルは避けてください。 他のすべてのファイルとフォルダーを選択し、ZIP ファイルを作成します。

ステップ 5 : 次に、cPanel Web ホスティングにログインします。 ZIP ファイルをドメイン名のルート フォルダーにアップロードして抽出します。

ステップ 6 : プロジェクト ファイルの準備ができました。 cPanel の [ソフトウェア] セクションに移動します。 [Node.js アプリのセットアップ] をクリックし、続いて [+ アプリケーションの作成] ボタンをクリックします。 Node.js バージョン、運用アプリケーション モード、アプリケーション ルート、URL、および起動ファイル (server.js) に留意して、Node.js アプリをセットアップします。

「作成」をクリックして終了します。 作成したら、しばらく停止します。 「検出された構成ファイル」セクションまで下にスクロールします。 NPM インストールを実行して、すべての Node.js パッケージを取得します。 最後に、「アプリを開始」をクリックします。

さあ！ ブラウザでドメイン名を開きます。 Next.js アプリが公開されました。 デプロイメント成功、素晴らしい仕事でした!

Next.js アプリを cPanel にデプロイするこの方法を共有するのはとても楽しかったです。 幸運を祈り、コーディングを楽しんでください。

NextJs を cPanel にデプロイすることの長所と短所

Next.js アプリケーションを cPanel にデプロイすると、さまざまな利点が得られます。 考慮すべき長所と短所をいくつか示します。

長所:

  1. ユーザーフレンドリー: cPanel は使いやすいグラフィカル インターフェイスを提供し、展開プロセスを簡素化します。
  2. 自動化: cPanel には、データベースの作成、Web サイト ファイルの管理、電子メールの設定などのタスクを処理できる自動化ツールが多数含まれています。
  3. 汎用性: cPanel は、Next.js で構築された Node.js アプリなど、幅広いアプリケーションをサポートしています。

短所:

  1. 柔軟性の制限: cPanel は使いやすいですが、インターフェイスが簡素化されているため、サーバー環境の柔軟性と制御が制限される場合があります。
  2. 潜在的な互換性の問題: 一部のユーザーは、共有ホスティング プラットフォームに Next.js アプリケーションをデプロイする際に、ビルド プロセス中にエラーが発生するなどの問題を報告しています。

よくある質問

cPanel で Next.js Web サイトをホストする利点と制限は何ですか?

cPanel で Next.js Web サイトをホストすると、コストの削減や Next.js の機能の維持など、いくつかの利点が得られます。 ただし、注意すべき制限がいくつかあります。 たとえば、cPanel はサーバーレス機能と自動静的最適化をサポートしていません。 cPanel でホストするかどうかは、個人の好みとビジネス ニーズに基づいて決定する必要があります。

Next.js アプリケーションを cPanel にデプロイする場合、.htaccess ファイル構成は何を行いますか?

.htaccess ファイル構成は、cPanel に Next.js アプリケーションをデプロイする際の重要な部分です。 このファイルは、サーバーが特定の条件に遭遇したときの動作を制御します。 この例で提供されている特定の構成は、リクエストとリダイレクトを適切に処理するのに役立ちます。

cPanel に Next.js アプリをデプロイするときにクラッシュやリダイレクトの問題が発生した場合はどうなりますか?

Next.js アプリを cPanel にデプロイするときにクラッシュやリダイレクトの問題が発生した場合、解決策の 1 つは、ルート フォルダーに app.js という名前の起動ファイルを作成することです。 このシナリオでは、アプリケーションを Node.js アプリケーションとして実行する必要があります。

cPanel に Next.js アプリをデプロイするときに画像の最適化を無効にするにはどうすればよいですか?

cPanel に Next.js アプリをデプロイするときに画像の最適化を無効にすることはできますが、提供された情報には正確な手順が含まれていませんでした。 具体的な手順については、Next.js の公式ドキュメントまたは関連チュートリアルを参照してください。

その他のリソース

ベスト Next.JS ホスティング プロバイダー

最高の Node.js ホスティング プロバイダー

結論

Next.js アプリケーションを cPanel にデプロイするにはいくつかの課題が伴う可能性がありますが、多くの場合、利点が欠点を上回ります。 cPanel が提供するシンプルさと自動化により、このプロセスに慣れていない開発者でも、展開プロセスが簡単かつ管理しやすくなります。 このガイドを参照すると、Next.js アプリケーションを cPanel にデプロイするための準備が整います。