我正在开发我的第一个NextJS应用程序。当我运行“ npm run dev”或“ npm run start”时,它将我的应用程序部署到
http://host:port/
当我导航到页面时,URL变为
http://host:port/page1
我需要有自己的特定网址,例如
http://host:port/my-test-application/path-for-my-app/ http://host:port/my-test-application/path-for-my-app/page1
此外,我的应用程序有很多元素可以链接到应用程序的其他区域,我需要这些元素还可以通过basePath转到URL,而不仅仅是根目录。
我还将把这个应用程序分配给具有不同basePath的其他服务器,因此不能在我的应用程序中对其进行硬编码。
我怎样才能做到这一点?
使用其他应用程序,例如react / vue / angular / native JS,我只需构建应用程序并将构建代码放在服务器上的“ my-test- application / path-for-my-app”文件夹中。
我在NextJS应用程序中尝试了此操作,但遇到一个错误,即找不到“ .next”文件夹。
我用谷歌搜索,可以找到一些使用“ assetPrefix”或“ Zones”的参考。但是我并不真正了解我该怎么做。
我如何将我的应用程序部署到特定的URL
解决方案1:重组“页面”-不允许我部署到具有不同basePath的其他服务器
我可以在“页面”目录中创建文件夹结构,并更改所有元素以使用此文件夹结构。
|- pages |- my-test-application |- path-for-my-app |- index.js |- page1.js <Link href="/my-test-application/path-for-my-app/page1" >
我不喜欢这种解决方案,因为basePath已硬编码到我的应用程序中,以适应部署设置。
如果我想将我的应用程序部署在具有不同basePath的2台服务器上(即下面),则必须具有2个版本的代码。
http://host:port/my-test-application_1/path-for-my-app/page1 http://host:port/my-test-application_2/diff-path-for-my-app/page1
已更新:我已在3月5日更新了此问题,以包括我需要s正常工作以及我不喜欢的一种解决方案。
我找到了使用NGINX反向代理具有基本路径的URL的解决方案。
依存关系
next.config.js
在应用程序的根目录中添加“ next.config.js”文件,以便您可以指定“ assetPrefix”和“ publicRuntimeConfig.basePath”
例
const isProd = process.env.NODE_ENV === 'production' // Enable importing of css stylesheets const withCSS = require("@zeit/next-css"); const withImages = require('next-images'); /* * Gets the BASE_PATH from the command used to start this app. * If BASE_PATH is specified but it does not start with a "/" * then add it. */ function getBasePath() { var basePath = '' if (isProd && process.env.BASE_PATH){ if (process.env.BASE_PATH.startsWith("/") ){ basePath = process.env.BASE_PATH; } else { basePath = "/" + process.env.BASE_PATH; } } console.log("getBasePath() : isProd = " + isProd); console.log("getBasePath() : basePath = " + basePath); return basePath } module.exports = withCSS(withImages({ assetPrefix: getBasePath() , publicRuntimeConfig: { basePath: getBasePath() , }, }));
静态影像
使用“ next-images”以导入图像并在src标签中引用导入的对象
更改对静态映像(在/ public文件夹中的静态映像)的任何引用以具有基本路径前缀。例如,我的“页脚”组件具有以下内容
import '../stylesheets/main.css'; import img1 from '../public/image_name1.png' import img2 from '../public/image_name2.png' export default class o extends React.Component { render(){ var prefix = publicRuntimeConfig.basePath return ( <div > <a className="icon" href="http://www.image_name.com" > <img src={img1} alt="image_name1"/> </a> <a className="icon" href="http://www.image_name2.com"> <img src={img1} alt="image_name2"/> </a> </div> ); } }
注意:我尝试使用publicRuntimeConfig.basePath作为src URL的前缀(如下所示),但这在我部署的环境中不起作用(请参阅下文)
import getConfig from 'next/config' const { publicRuntimeConfig } = getConfig() ... ... <a className="icon" href="http://www.image_name.com" > <img src={`${publicRuntimeConfig.basePath}/image_name1.png`} alt="image_name1"/> </a>
链接
更改您的链接以使用基本路径前缀,例如在我的“标题”组件中,我具有以下内容
import Link from 'next/link'; import '../stylesheets/main.css'; import getConfig from 'next/config' const { publicRuntimeConfig } = getConfig() const detailId1 = "banana" const Header = () => ( <div> <div> <Link href={`${publicRuntimeConfig.basePath || ''}/`}> <a className="linkStyle">Home</a> </Link> <Link href={`${publicRuntimeConfig.basePath || ''}/about`} > <a className="linkStyle">About</a> </Link> <Link href={`${publicRuntimeConfig.basePath || ''}/details/[id]`} as= {`${publicRuntimeConfig.basePath || ''}/details/${detailId1}`} > <a className="linkStyle">Details Var 1</a> </Link> </div> </div> ); export default Header;
注意:在博客 https://levelup.gitconnected.com/deploy-your-nextjs-application-on-a- different-base-path-ie-not- root-1c4d210cce8a中,该博客包含一个“ Link.tsx”会为您添加前缀,因此您只需使用该Link组件(从“ ./Link.tsx”导入Link;),而不是nextJS版本(从“ next / link”导入Link;)。但是,当我的链接URL中有变量时,“ Link.tsx”对我不起作用。
运行您的nextjs应用
当您在本地运行应用程序时,您不需要基本路径就可以运行
npm run dev
由于未指定BASE_PATH,因此应可从“ http:// localhost:3000 ” 访问您的应用程序,并且src值应为“ /image_name1.png”,将鼠标悬停在s上时,您将看到链接为“ http://本地主机:3000 / pagename “
如果要使用基本路径运行,请执行以下操作
export BASE_PATH=a/b npm run dev
注意:由于我的环境中的某些原因,如果我指定“ export BASE_PATH = / a / b”(/在路径的开头),则会在该路径的开头添加一个文件夹目录。 因此,我在没有开始/的情况下指定了它,并且next.config.js中的代码在需要时添加了开始/。
您已经设置了基本路径/assetPrefix/publicRuntimeConfig.basePath,因此无法通过“ http:// localhost:3000 ” 访问您的应用程序。现在您需要一个反向代理。
我发现最简单的设置是使用NGINX Docker映像。您需要使用包含重定向到NextJS应用程序的配置来运行NGINX。
创建一个文件夹,然后在该文件夹中添加一个“ default.conf”文件。确保在启动nextjs应用程序时,放置在“位置”中的路径是您为BASE_PATH指定的SAME路径。
server { listen 80; server_name localhost; location /a/b/ { proxy_pass http://myhost:3000/; } }
重要笔记:
location ~ /a/b/(.*)$ { set $upstream http://myhost:3000/$1; proxy_pass $upstream; }
在该目录的命令提示符下,运行NGINX docker映像,告诉它使用您的配置文件。
docker run --name mynginx1 -v C:/zNGINX/testnginx/conf:/etc/nginx/conf.d -p 80:80 -d nginx
转到以下URL
http://localhost:80/a/b/
NGINX会将URL重定向到“ http:// localhost:3000 ”。因此,现在应该可以从具有基本路径的URL访问您的应用程序。单击s应该可以工作,该链接应包含转到NGINX的基本路径,该路径将重定向回应用程序,剥离基本路径,并保留所有其他路径。
如果要将应用程序部署到服务器(如本地运行一样),则可以构建应用程序,然后将相关文件/文件夹复制到服务器计算机上。在构建和运行应用程序时,请确保已设置BASE_PATH
export BASE_PATH=a/b npm run build cp package*.json [server_location] cp next.config.js [server_location] cp ./next [server_location]
然后在该服务器上运行
npm install export BASE_PATH=a/b npm run start
注意:如果您在应用程序中引用了“公共”图像,请使用“下一个图像”并导入图像,而不要使用publicRuntimeConfig.basePath作为前缀。 当我做后者时,没有找到图像。有关示例,请参阅关于图像的部分。