category
软件工具
tags
NotionNext
type
Post
status
Published
slug
deploy-notion-next-on-vps
date
Nov 20, 2022
summary
在你的云服务器上手动部署NotionNext
icon
password

前言

NotionNext可以轻松地使用Vercel免费托管,不过免费的流量和函数执行次数有限,如果你的网站访问量非常大,可以尝试在自己的云服务器、vps上部署。
💡
可以选择裸机安装Nodejs环境启动项目,或者也可以用Docker容器化部署。
 

安装

💡
准备一台任意操作系统的VPS云服务器,不同系统的安装步骤大同小异,以下我用 linux-centos-7主机为例
 

1. 安装Git

💡
git是一个代码托管工具,你可以用它来下载github上的代码。
# 一个命令安装
yum install git -y
执行效果
[[email protected] ~]# yum install git -y
Loaded plugins: fastestmirror, langpacks
Loading mirror speeds from cached hostfile
 * base: mirror.lzu.edu.cn
 * extras: mirrors.ustc.edu.cn
 * updates: mirror.lzu.edu.cn
base                                                                                                                                                         | 3.6 kB  00:00:00
extras                                                                                                                                                       | 2.9 kB  00:00:00
updates                                                                                                                                                      | 2.9 kB  00:00:00
(1/2): extras/7/x86_64/primary_db                                                                                                                            | 249 kB  00:00:00
(2/2): updates/7/x86_64/primary_db                                                                                                                           |  18 MB  00:00:02
Resolving Dependencies
--> Running transaction check
---> Package git.x86_64 0:1.8.3.1-23.el7_8 will be installed
--> Processing Dependency: perl-Git = 1.8.3.1-23.el7_8 for package: git-1.8.3.1-23.el7_8.x86_64
--> Processing Dependency: perl(Term::ReadKey) for package: git-1.8.3.1-23.el7_8.x86_64
--> Processing Dependency: perl(Git) for package: git-1.8.3.1-23.el7_8.x86_64
--> Processing Dependency: perl(Error) for package: git-1.8.3.1-23.el7_8.x86_64
--> Running transaction check
---> Package perl-Error.noarch 1:0.17020-2.el7 will be installed
---> Package perl-Git.noarch 0:1.8.3.1-23.el7_8 will be installed
---> Package perl-TermReadKey.x86_64 0:2.30-20.el7 will be installed
--> Finished Dependency Resolution

Dependencies Resolved

====================================================================================================================================================================================
 Package                                         Arch                                  Version                                            Repository                           Size
====================================================================================================================================================================================
Installing:
 git                                             x86_64                                1.8.3.1-23.el7_8                                   base                                4.4 M
Installing for dependencies:
 perl-Error                                      noarch                                1:0.17020-2.el7                                    base                                 32 k
 perl-Git                                        noarch                                1.8.3.1-23.el7_8                                   base                                 56 k
 perl-TermReadKey                                x86_64                                2.30-20.el7                                        base                                 31 k

Transaction Summary
====================================================================================================================================================================================
Install  1 Package (+3 Dependent packages)

Total download size: 4.5 M
Installed size: 22 M
Downloading packages:
warning: /var/cache/yum/x86_64/7/base/packages/perl-Error-0.17020-2.el7.noarch.rpm: Header V3 RSA/SHA256 Signature, key ID f4a80eb5: NOKEY
Public key for perl-Error-0.17020-2.el7.noarch.rpm is not installed
(1/4): perl-Error-0.17020-2.el7.noarch.rpm                                                                                                                   |  32 kB  00:00:00
(2/4): perl-Git-1.8.3.1-23.el7_8.noarch.rpm                                                                                                                  |  56 kB  00:00:00
(3/4): perl-TermReadKey-2.30-20.el7.x86_64.rpm                                                                                                               |  31 kB  00:00:00
(4/4): git-1.8.3.1-23.el7_8.x86_64.rpm                                                                                                                       | 4.4 MB  00:00:01
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Total                                                                                                                                               3.9 MB/s | 4.5 MB  00:00:01
Retrieving key from file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
Importing GPG key 0xF4A80EB5:
 Userid     : "CentOS-7 Key (CentOS 7 Official Signing Key) <[email protected]>"
 Fingerprint: 6341 ab27 53d7 8a78 a7c2 7bb1 24c6 a8a7 f4a8 0eb5
 Package    : centos-release-7-9.2009.0.el7.centos.x86_64 (@anaconda)
 From       : /etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  Installing : 1:perl-Error-0.17020-2.el7.noarch                                                                                                                                1/4
  Installing : perl-TermReadKey-2.30-20.el7.x86_64                                                                                                                              2/4
  Installing : perl-Git-1.8.3.1-23.el7_8.noarch                                                                                                                                 3/4
  Installing : git-1.8.3.1-23.el7_8.x86_64                                                                                                                                      4/4
  Verifying  : git-1.8.3.1-23.el7_8.x86_64                                                                                                                                      1/4
  Verifying  : 1:perl-Error-0.17020-2.el7.noarch                                                                                                                                2/4
  Verifying  : perl-Git-1.8.3.1-23.el7_8.noarch                                                                                                                                 3/4
  Verifying  : perl-TermReadKey-2.30-20.el7.x86_64                                                                                                                              4/4

Installed:
  git.x86_64 0:1.8.3.1-23.el7_8

Dependency Installed:
  perl-Error.noarch 1:0.17020-2.el7                         perl-Git.noarch 0:1.8.3.1-23.el7_8                         perl-TermReadKey.x86_64 0:2.30-20.el7

Complete!

2.安装nodejs

💡
这里使用nvm进行安装,NVM(Node version manager)是nodejs的专用版本管理器,可以快速方便地安装并切换的nodejs的版本。
  • 借助git下载nvm
    • # 用git从github下载nvm源码。
      git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
      
      # 若无法访问上述github 可用以下国内gitee地址代替
      git clone https://gitee.com/koalakit/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
  • 使用nvm安装Nodejs
    • echo "source ~/.nvm/nvm.sh" >> ~/.bashrc
      
      source ~/.bashrc
      
      # 安装 nodejs
      nvm install v16.13.0
      
      # 安装 yarn 
      npm install -g yarn
      💡
      nvm list-remote 命令可查看所有可安装的nodejs版本 用 nvm ls可查看所有已安装到本地的nodejs 版本

3. 运行NotionNext

# 来到你的用户主目录
cd ~ 

# clone代码 
git clone https://github.com/tangly1024/NotionNext && cd NotionNext
编译启动项目 ,根据网络情况可能耗时几分钟。
# 1.使用yarn命令安装依赖
yarn 
# 2.打包编译
yarn build

# 3.将你的notion_page_id设为环境变量,例如:
NOAGE_ID=29d5ia78b858e4a3bbc13e51b5400fb82

# 4.启动服务
yarn start
执行效果记录
[[email protected] NotionNext]# yarn
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning react-notion-x > react-use > nano-css > [email protected]: Please use @jridgewell/sourcemap-codec instead
warning valine > leancloud-storage > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning valine > leancloud-storage > leancloud-realtime > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning valine > leancloud-storage > [email protected]: Please upgrade to v7.0.2+ of superagent.  We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing.  See the releases tab for more information at <https://github.com/visionmedia/superagent/releases>.
warning valine > leancloud-storage > superagent > [email protected]: Please upgrade to latest, [email protected] or [email protected]! Check these notes: https://bit.ly/2ZEqIau
warning valine > leancloud-storage > leancloud-realtime > @leancloud/platform-adapters-browser > @leancloud/adapters-superagent > [email protected]: Please upgrade to v7.0.2+ of superagent.  We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing.  See the releases tab for more information at <https://github.com/visionmedia/superagent/releases>.
warning valine > leancloud-storage > leancloud-realtime > @leancloud/platform-adapters-browser > @leancloud/adapters-superagent > superagent > [email protected]: Please upgrade to latest, [email protected] or [email protected]! Check these notes: https://bit.ly/2ZEqIau
warning @waline/client > vue > @vue/compiler-sfc > magic-string > [email protected]: Please use @jridgewell/sourcemap-codec instead
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
warning "react-facebook > [email protected]" has incorrect peer dependency "[email protected] || 16.x".
warning " > [email protected]" has incorrect peer dependency "[email protected]^0.14.0 || ^15.0.0-0 || ^16.0.0-0".
warning "react-notion-x > [email protected]" has incorrect peer dependency "[email protected]^15 || ^16".
warning "react-notion-x > [email protected]" has incorrect peer dependency "[email protected]^15 || ^16".
warning "react-notion-x > [email protected]" has unmet peer dependency "@babel/[email protected]>=7".
warning "react-notion-x > react-pdf > [email protected]" has unmet peer dependency "[email protected]^4.0.0 || ^5.0.0".
warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "[email protected]>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 214.69s.
[[email protected] NotionNext]# yarn build
yarn run v1.22.19
$ next build && next-sitemap --config next-sitemap.config.js
info  - Loaded env from /root/NotionNext/.env.local
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data .[请求API] from:page-paths id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:tag-static-path id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:tag-page-static-path id:02ab3b8678004aa69e9e415905ef32a5
info  - Collecting page data ..[请求API] from:category-paths id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:category-paths id:02ab3b8678004aa69e9e415905ef32a5
info  - Collecting page data ...[响应成功]: from:page-paths
[API耗时] 1754ms
info  - Collecting page data .[响应成功]: from:tag-static-path
[API耗时] 1736ms
[响应成功]: from:tag-page-static-path
[API耗时] 1714ms
info  - Collecting page data ..[响应成功]: from:category-paths
[API耗时] 1778ms
info  - Collecting page data ...[响应成功]: from:category-paths
[API耗时] 2140ms
info  - Collecting page data
[    ] info  - Generating static pages (0/23)[请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:404 id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:index id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:category-index-props id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:archive-index id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:tag-index-props id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5
[=== ] info  - Generating static pages (8/23)[响应成功]: from:tag-index-props
[API耗时] 1587ms
[请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5
[响应成功]: from:404
[API耗时] 1668ms
[请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5
[响应成功]: from:index
[API耗时] 1774ms
[响应成功]: from:search-props
[API耗时] 1819ms
[响应成功]: from:archive-index
[API耗时] 1788ms
[请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5
[响应成功]: from:search-props
[API耗时] 1737ms
[请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5
[请求API] from:category-props id:02ab3b8678004aa69e9e415905ef32a5
[ ===] info  - Generating static pages (14/23)[响应成功]: from:category-index-props
[API耗时] 1958ms
[请求API] from:category-props id:02ab3b8678004aa69e9e415905ef32a5
[   =] info  - Generating static pages (15/23)[响应成功]: from:search-props
[API耗时] 1720ms
[响应成功]: from:tag-props
[API耗时] 1687ms
[    ] info  - Generating static pages (17/23)[响应成功]: from:category-props
[API耗时] 1606ms
[响应成功]: from:tag-props
[API耗时] 1707ms
[响应成功]: from:tag-props
[API耗时] 1698ms
[响应成功]: from:tag-props
[API耗时] 1728ms
[响应成功]: from:category-props
[API耗时] 1730ms
info  - Generating static pages (23/23)
info  - Finalizing page optimization

Page                                                          Size     First Load JS
┌ ● / (ISR: 5 Seconds) (1930 ms)                              524 B           543 kB
├   /_app                                                     0 B             542 kB
├ ● /[...slug]                                                1.58 kB         544 kB
├ ○ /404 (1811 ms)                                            640 B           543 kB
├ ● /archive (ISR: 1 Seconds) (1806 ms)                       656 B           543 kB
├ ● /category (ISR: 1 Seconds) (2097 ms)                      667 B           543 kB
├ ● /category/[category] (ISR: 1 Seconds) (3373 ms)           707 B           543 kB
├   ├ /category/技术分享 (1748 ms)
├   └ /category/学习思考 (1619 ms)
├ ● /category/[category]/page/[page]                          716 B           543 kB
├ λ /feed                                                     249 B           542 kB
├ ● /page/[page]                                              652 B           543 kB
├ ● /search (ISR: 1 Seconds) (1944 ms)                        801 B           543 kB
├ ● /search/[keyword] (ISR: 1 Seconds) (1899 ms)              678 B           543 kB
├   └ /search/NotionNext BLOG (1759 ms)
├ ● /search/[keyword]/page/[page] (ISR: 1 Seconds) (1867 ms)  687 B           543 kB
├   └ /search/NotionNext BLOG/page/1 (1735 ms)
├ ● /tag (ISR: 1 Seconds) (1606 ms)                           651 B           543 kB
├ ● /tag/[tag] (ISR: 1 Seconds) (6924 ms)                     679 B           543 kB
├   ├ /tag/开发 (1743 ms)
├   ├ /tag/思考 (1730 ms)
├   ├ /tag/建站 (1715 ms)
├   └ /tag/文字 (1709 ms)
└ ● /tag/[tag]/page/[page]                                    687 B           543 kB
+ First Load JS shared by all                                 542 kB
  ├ chunks/framework-bb5c596eafb42b22.js                      42.1 kB
  ├ chunks/main-c9bcff17d385c69a.js                           28.7 kB
  ├ chunks/pages/_app-e8a826e85bd57a50.js                     469 kB
  ├ chunks/webpack-de079d6da0c84f1e.js                        2.32 kB
  └ css/02c66091ce82e882.css                                  31.3 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)(Static)  automatically rendered as static HTML (uses no initial props)(SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Loaded env from /root/NotionNext/.env.local
Done in 113.42s.
[[email protected] NotionNext]# yarn start
yarn run v1.22.19
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /root/NotionNext/.env.local
💡
项目将在 3000端口启动,访问你的服务器 http://ip:3000 即可打开网站。
💡
有时候3000端口可能无法访问,原因是服务器防火墙,以及云服务厂商的安全组限制。
用服务器ip加端口号访问效果
notion image

4.后台运行

直接使用 yarn start启动服务的话,一旦你关闭ssh终端或登出服务器,这个进程也会随之关闭。为了让你的网站始终在后台保持运行,可以用以下方式:
  1. ctrl+c 退出上面正运行的yarn进程
  1. 改用nohup运行
nohup yarn start >/dev/null 2>&1 &
💡
当然也可以用pm2的方式在后台运行
执行结果
[[email protected] ~]# nohup yarn start >/dev/null 2>&1 &
[1] 5240
# 会打印出后台 运行的进程号。
  • 如何关闭进程
    • ps -ef | grep yarn # 查找正在后台运行的yarn进程
      
      kill 4952 # 4952 是上一步找到的进程号,每次都是不同的随机数。详见下方执行效果展开
      执行效果
      [[email protected] ~] ps -ef | grep yarn
      root       4952      1  1 02:52 ?        00:00:00 node /root/.nvm/versions/node/v16.13.0/bin/yarn start
      root       5228   4987  0 02:52 pts/0    00:00:00 grep --color=auto yarn
      [[email protected] ~] kill 4952
      [1]+  Exit 1                  nohup yarn start > /dev/null 2>&1
      💡
      其中 4952 就是要删除的进程号
       

自定义修改

1.修改配置

  • 用环境变量修改
    • 💡
      用环境变量的好处是,不需要修改代码,不用重新打包编译。直接重启服务即可。
    • NOTION_PAGE_ID等诸多配置支持用环境变量配置。
      • # 1.设置环境变量
        NOTION_PAGE_ID=29d5ia78b858e4a3bbc13e51b5400fb82
        # 2.关闭旧进程
        # 命令参考上文
        # 3.后台运行
        nohup yarn start >/dev/null 2>&1 &
        💡
        删除环境变量可用以下命令: unset NOTION_PAGE_ID
    • 其他支持环境变量的配置可参考blog.config.js 文件

2.修改代码

  • 如果修改blog.config.js或其他代码文件,需要重新执行 yarn build 才可 生效,
  • 重新编译后需要先关闭旧进程,再用 yarn start 重启服务 。
 

Nginx反向代理

  • 为了隐藏你的3000端口号,用一个nginx就可以,如果你有宝塔面板之类的运维工具可以很方便地一键配置。
  • 小白安装nginx
    • # 添加nginx源
      sudo rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
      
      # 安装nginx
      sudo yum install nginx
      sudo systemctl enable nginx
      sudo systemctl start nginx
      安装成功访问服务器地址 效果:
      notion image
  • 反向代理配置参考
    • 修改相关配置文件 /etc/nginx/conf.d/default.conf
      # 用vi编辑器修改
      vi /etc/nginx/conf.d/default.conf
      
      # 在 `localtion /` 下增加一行
      proxy_pass  http://127.0.0.1:3000;
      
      # 刷新ng配置
      sudo systemctl reload nginx
      notion image
      notion image
      💡
      如果访问出错可能是SELinux设置不允许nginx的转发 ,执行 setsebool -P httpd_can_network_connect on 即可修复。

  • Utterance
  • Cusdis