阿里云效静态部署 NotionNext 的完整指南

青萍叙事2025-05-21

📌 背景介绍

在信息碎片化的今天，Notion 逐渐成为许多人记录灵感、整理资料的重要工具。

而 NotionNext，作为一个开源项目，能够将 Notion 页面无缝转化为现代博客界面，适合用来构建个人博客、技术分享站点或产品文档站。

官方推荐的部署方式如 Vercel 虽然方便，但在国内访问速度及稳定性方面存在不足。

因此，本文将介绍如何 使用阿里云效（云效流水线 + 云效代码管理 + Docker）进行 NotionNext 的静态部署，提升国内访问性能与可控性。

🧩 使用场景

你正在使用 Notion 作为主要内容创作平台。
想搭建一个现代化的博客前端页面。
需要国内访问速度快、稳定性高的静态托管方案。
希望利用阿里云已有资源，降低成本并提升可控性。

🛠️ 前提准备

在开始前，请确保你拥有以下资源或权限：

阿里云账号，已开通云效。
一个有效的 Notion 页面（需要公开分享权限）。
ECS 服务器已安装好 Docker。

📦 部署步骤

第一步：导入 NotionNext 仓库到云效代码管理

由于 Github 访问很不稳定，因此需要将代码仓库导入到云效平台。

访问 NotionNext 的 GitHub 项目页面：

https://github.com/tangly1024/NotionNext
登录阿里云控制台，打开云效代码管理平台：

https://codeup.aliyun.com/
进入【代码管理】 > 选择或新建一个项目 > 点击【导入代码】。
选择 GitHub 来源并授权登录，搜索 NotionNext 仓库，点击【导入】。
导入完成后，你将拥有一个 Codeup 托管的私有仓库，可以进一步开发和部署。

PS：如果因网络问题无法导入，可通过git将代码下载到本地然后再上传到codeup。

第二步：配置 NotionNext 参数

在 Codeup 仓库根目录创建 .env.local 文件，配置以下内容：

1	NOTION_PAGE_ID=<你的notion页面ID>

PS：Notion 页面需设置为公开访问，才能被 NotionNext 获取内容。

第三步：准备静态 Dockerfile-static

NotionNext 默认已包含一个标准的 Dockerfile，用于构建 Next.js 服务。

但这个是用于动态的，会定时频繁从Notion拉取最新的更新，但也因此会比较影响性能，只适用于建站初期，需要频繁修改的站点的场景。

对于已经渡过初期稳定更新的情况下，还是建议使用静态部署。

创建静态 Dockerfile-static 文件：

FROM nginx:latest

# 删除默认的 nginx 欢迎页并设置时区
RUN rm -rf /usr/share/nginx/html/*  && \
    rm -rf /etc/nginx/conf.d/* && \
    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

# 将本地的静态文件复制到 nginx 的默认网页目录
COPY ./out/ /usr/share/nginx/html/

# 拷贝自定义 nginx 配置(可选)
# COPY ./nginx.conf /etc/nginx/nginx.conf

# 暴露 80 端口
EXPOSE 80

# 启动 nginx（用原始方式）
CMD ["nginx", "-g", "daemon off;"]

PS：这里我没有将构建也写入到 Dockerfile 中，因为感觉使用Docker编译比较慢，而是直接使用云效流水线的构建。

第四步：配置云效流水线自动构建并部署

登录阿里云控制台，打开云效流水线平台：

https://flow.aliyun.com/

在阿里云效中配置流水线步骤如下：

新建流水线，配置代码源-拉取 Codeup 仓库，选择你的分支。

默认是master，我这里自己单独建了个人分支。

添加 Node.js 构建任务，编译静态文件

注意：执行命令中添加以下构建命令：

1
2
3

yarn config set registry https://registry.npm.taobao.org
yarn install
yarn export

构建 Docker 镜像并推送至阿里云镜像服务（ACR）

在编译完成后，需要再添加一个任务步骤，选择构建-镜像构建并推送至ACR（个人版）,用于构建站点运行镜像，并上传至镜像仓库。

使用 Docker 部署

最后就到 Docker 部署阶段了，添加部署任务-Docker 部署。

部署脚本如下：

docker stop blog
docker rm blog

docker run -dp 3000:80 \
  --name blog \
  --restart unless-stopped \
  registry-vpc.cn-heyuan.aliyuncs.com/lusyoe/blog:${DATETIME}