NextUI.jpg

WX20240919-182339@2x.pngWX20240919-190558@2x.jpg

第一步:下载代码并上传至1panel

可以从本地压缩上传,也可以从GitHub上拉取代码 https://github.com/nextui-org/nextui

下图以本地上传为例

2024-09-17-20.46.40.jpg

2024-09-17 20.49.27.png

上传完成后,对文件进行解压

WX20240919-182755@2x.png

第二步:修改 pnpm 版本号

(由于1panel限制,不能在没有成功启动的容器升级版本,所以只能降低版本后在进行升级。)

进入代码文件,代码根目录下找到package.json文件,

打开文件,找到最后一行有个“packageManager”:"pnpm@9.6.0"

改成“packageManager”:"pnpm@9.1.3"

WX20240919-182909@2x.png

第三步:放行3000端口

找到1panel防火墙,创建放行3000端口。

6006端口是父的,没什么用就不用开了。

WX20240919-183117@2x.png

第四步:创建Node.js环境

找到网站运行环境,选择node.js,创建运行环境

环境配置如下图

WX20240917-205335@2x.pngWX20240917-210511@2x.png

点击确认后,然后看见有个日志,如果看到下面这个信息证明父的已经启动成功了。

WX20240917-210622@2x.pngWX20240917-211028@2x.png

第五步:升级pnpm,启动子项目

1.升级pnpm

进入容器里面启动子的项目

找到项目,点击终端按钮

WX20240917-211140@2x.png

连接终端

WX20240917-211224@2x.png

然后按照下面的命令执行

进入apps/docs 文件夹

cd apps/docs

升级

npm install -g pnpm@9.6.0

出现下面这个证明升级版本成功

WX20240917-211312@2x.png

2.启动子项目

输入启动命令

pnpm dev

WX20240917-211352@2x.png

出现下图就证明子项目启动成功然后就可以访问了。

访问地址为:http://localhost:3000/

WX20240917-211812@2x.png

提示:该命令是一次性运行,关闭这个终端就会结束进程,访问不了网站

解决方法如下,安装启动进程守护

第六步:安装启动进程守护

1.安装进程守护

关闭上一步终端窗口后,在重新打开容器终端,输入命令进行安装

npm install pm2 -g

WX20240917-212731@2x.png

2.启动进程守护

启动进程守护需要在apps/docs目录下进行

cd apps/docs

然后启动

pm2 delete app-name

WX20240917-212834@2x.png

pm2 start pnpm --name "app-name" -- dev

WX20240917-212901@2x.png

这样网站就能一直访问了。

访问地址为:http://localhost:3000/

提示:重启次容器会丢失配置,如果重启了,那就重新启动进程守护就可以了,重复第六步的2.启动进程守护就可以。

第七步:更新Docs内容

你在服务器里或者本地写完mdx文档以后,把更新的内容覆盖掉就可以。

文件路径/apps/docs/content/docs/

WX20240919-190014@2x.png

WX20240919-190455@2x.pngWX20240919-190558@2x.png