[英]How to deploy a nextjs application on cpanel?
I followed these steps to deploy my nextjs on cPanel.我按照这些步骤在 cPanel 上部署了我的 nextjs。
go to package.json and add this line: "homepage": "http://afsanefadaei.ir"
转到 package.json 并添加以下行:
"homepage": "http://afsanefadaei.ir"
run next build
to have .next
folder as my build folder运行
next build
以将.next
文件夹作为我的构建文件夹
go to cpanel >> file manager >> public_html
folder and upload the contetn of .next
folder to this directory转到
cpanel >> file manager >> public_html
文件夹并将.next
文件夹的内容上传到该目录
add or edit this file: .htaccess
to:添加或编辑此文件:
.htaccess
到:
but when I go to the website I face this:但是当我访问该网站时,我会遇到以下情况:
Do you know what is wrong with this?你知道这有什么问题吗?
I uploaded out
(which gets generated doing npm run build && npm run export
) folder to public_html
and created .htaccess
file like我上传
out
(通过npm run build && npm run export
)文件夹到public_html
并创建了.htaccess
文件,如
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-L
RewriteRule . /index.html [L]
</IfModule>
Problem: When I refresh the page on some different route let's say
/about
, it brings theindex.js
page contents but URL doesn't change to/
问题:当我在一些不同的路由上刷新页面时,比如
/about
,它带来了index.js
页面内容,但 URL 不会更改为/
.next
doesn't have index.html file..next
没有 index.html 文件。next export
instead of next build
if you tend to have frontend side only.next export
而不是next build
。 But the most important thing is number 1, make sure you have index.html
inside your .next
folder.但最重要的是数字 1,确保您的
.next
文件夹中有index.html
。
将其部署为 NodeJS 应用程序。
I could host the application with one of the above answers, but when I refresh the page the application will crash or go to initial route.我可以使用上述答案之一托管应用程序,但是当我刷新页面时,应用程序将崩溃或转到初始路由。
This is how I solved this problem (solution taken from next.js official site).这就是我解决这个问题的方法(解决方案取自 next.js 官方网站)。
npm run build
npm run build
生成 next.js 应用程序app.js
in the root folder and copy the following codeapp.js
,复制以下代码 const { createServer } = require("http"); const { parse } = require("url"); const next = require("next"); const port = process.env.PORT || 3000; // Create the Express-Next App const app = next({ dev:false }); const handle = app.getRequestHandler(); app .prepare() .then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true); const { pathname, query } = parsedUrl; handle(req, res, parsedUrl); console.log("pathname", pathname); }).listen(port, (err) => { if (err) throw err; console.log(`> Ready on http://localhost:${port}`); }); }) .catch((ex) => { console.error(ex.stack); process.exit(1); });
Create a Node.js Application on cPanel and add Application Startup File name在 cPanel 上创建一个 Node.js 应用程序并添加应用程序启动文件名
And start the application.并启动应用程序。 You are done !
你完成了!
For further information check out the official docs of Next.js Custom Server有关更多信息,请查看 Next.js自定义服务器的官方文档
使用此方法 ( https://nextjs.org/docs/advanced-features/custom-server ) 在 cpanel 中部署下一个 js 应用程序
Here is a complete .htaccess
for implementing a Node.js application with an Apache redirect.这是一个完整的
.htaccess
,用于使用 Apache 重定向实现 Node.js 应用程序。 This works very well on cPanel if you have your NextJS app deployed with the next start
server (listening on a specific port).如果您将 NextJS 应用程序与
next start
服务器一起部署(侦听特定端口),这在 cPanel 上非常有效。
RewriteEngine On
# Need to disable DirectoryIndex to avoid rewriting directory URL to index.html
DirectoryIndex disabled
# Redirect home page request to the NextJS server
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^(.*)$ http://127.0.0.1:4002/ [P,L]
# Redirect all other requests to the NextJS server with the URI appended
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:4002/$1 [P,L]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.