如何將 Next.js APP 部署到 cPanel（指南）

已發表: 2023-07-17
目錄
  • 什麼是 Next.js
  • 什麼是 cPanel
  • 將 Next.js 應用程序部署到 cPanel
  • 將 NextJs 部署到 cPanel 的優點和缺點
  • 常見問題解答
  • 其他資源
  • 結論

學習以無縫且有效的方式在 cPanel 上部署 Next.js 應用程序。 我將逐步指導您完成此過程。

在深入研究之前，我們先來了解一下 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 虛擬主機。 將 ZIP 文件上傳並解壓到您域名的根文件夾中。

第 6 步：您的項目文件已準備就緒。 前往 cPanel 中的軟件部分。 單擊“設置 Node.js 應用程序”，然後單擊“+ 創建應用程序”按鈕。 設置 Node.js 應用程序，記住 Node.js 版本、生產應用程序模式、應用程序根目錄、URL 和啟動文件 (server.js)。

單擊“創建”完成。 一旦創建，請停止一段時間。 向下滾動到“檢測到的配置文件”部分。 運行 NPM Install 以獲取所有 Node.js 包。 最後，單擊啟動應用程序。

就這樣吧！ 在瀏覽器中打開您的域名。 您的 Next.js 應用程序現已上線。 部署成功，幹得好！

分享這種在 cPanel 上部署 Next.js 應用程序的方法是一種樂趣。 祝你好運，編碼愉快！

將 NextJs 部署到 cPanel 的優點和缺點

將 Next.js 應用程序部署到 cPanel 具有多種優勢。 以下是一些需要考慮的優點和缺點。

優點：

  1. 用戶友好：cPanel 提供易於使用的圖形界面，簡化了部署過程。
  2. 自動化：cPanel 包含許多自動化工具，可以處理創建數據庫、管理網站文件、設置電子郵件等任務。
  3. 多功能性：cPanel 支持廣泛的應用程序，包括 Node.js 應用程序，例如使用 Next.js 構建的應用程序。

缺點：

  1. 靈活性有限：雖然 cPanel 易於使用，但由於其簡化的界面，有時會限制靈活性和對服務器環境的控制。
  2. 潛在的兼容性問題：一些用戶報告在共享託管平台上部署 Next.js 應用程序時出現問題，例如在構建過程中遇到錯誤。

常見問題解答

在 cPanel 上託管 Next.js 網站有哪些優點和限制？

在 cPanel 上託管 Next.js 網站具有多種優勢，例如節省成本和保留 Next.js 功能。 但是，有一些限制需要注意。 例如，cPanel不支持Serverless功能和自動靜態優化。 在 cPanel 上託管的決定應基於個人偏好和業務需求。

在 cPanel 上部署 Next.js 應用程序時，.htaccess 文件配置有何作用？

.htaccess 文件配置是在 cPanel 上部署 Next.js 應用程序的關鍵部分。 該文件控制服務器在遇到某些條件時的行為。 示例中提供的具體配置有助於正確處理請求和重定向。

如果我在 cPanel 上部署 Next.js 應用程序時遇到崩潰或重定向問題，會發生什麼情況？

如果您在 cPanel 上部署 Next.js 應用程序時遇到崩潰或重定向問題，一種解決方案可能是在根文件夾中創建一個名為 app.js 的啟動文件。 在這種情況下，您需要將應用程序作為 Node.js 應用程序運行。

在 cPanel 上部署 Next.js 應用程序時如何禁用圖像優化？

在 cPanel 上部署 Next.js 應用程序時可以禁用圖像優化，但提供的信息中未包含確切的說明。 具體步驟請參考Next.js官方文檔或相關教程。

其他資源

最佳 Next.JS 託管提供商

最佳 Node.js 託管提供商

結論

雖然將 Next.js 應用程序部署到 cPanel 可能會遇到一些挑戰，但好處往往大於缺點。 cPanel 提供的簡單性和自動化使部署過程變得簡單且易於管理，即使對於剛接觸該過程的開發人員也是如此。 通過本指南，您現在應該能夠更好地將 Next.js 應用程序部署到 cPanel。