Github 真的是宝藏，最近在做一个 react + nextjs 的小网页，每次更新服务器两边来回切换操作实在影响做小玩具的欲望，随便 google 了一下，发现了竟然可以通过 GitHub action 实现自动化部署到自己的服务器，直接开始搜索教程研究一番，最后实现的效果———— Vscode coding 完毕，通过 git 插件 push 到 GitHub ，GitHub 自动触发 action ，在 GitHub 云端打包编译项目，然后上传至服务器，替换原本网页内容，然后重启 PM2 。整个更新过程我只需要在 coding 完毕后点一下 push ，网页便会在几分钟内更新部署好！

【准备工作】服务器软件版本

root@VM-0-4-ubuntu:~# node -v
v16.15.1
root@VM-0-4-ubuntu:~# pm2 -v
5.2.0

开发环境 nextjs

PS F:\网页（玩耍）\废物回收\gabage_recycle> next -v
Next.js v12.2.3

开始操作

本地创建一个文件夹用来存放 next 项目

进入文件夹下执行以下命令，创建一个 nextjs 官方的模板

npx create-next-app nextjs-name --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

修改 package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start -p 82"
  },
  "dependencies": {
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

因为我的项目是纯静态的所以添加了 export 命令在 package.json 文件里面，另外修改了start端口，因为服务器上已经在跑着其他项目，默认端口已经占用了，所以修改到了 82 端口，你可以修改到你自己空闲的端口，或者留空默认在 80 端口上跑。（值得一提的是需要提前在服务器防火墙放行你需要跑这个项目的端口）

本地跑一下创建的 nextjs 项目

在 package.json 同级目录下执行

npm run dev

在http://localhost:3000/看到 Welcome to Next.js! 即代表示例项目创建成功 ~

Vscode 打开并上传源码到 GitHub

将项目文件夹拖放在 vscode 图标上，这样它打开就是一个单独的工作区

接下来左边图标 源代码管理 > 发布到 Github > Publish to GitHub private repositiry (可以修改一下仓库名字，随便填，我这里发布到了私人仓库，你也可以选择发布到公开的仓库)

貌似最近新版本的 git 需要信任文件夹才能在源代码管理这里正常显示，不然一直卡在原来的没有初始化的界面，今天遇到了这个问题，查了查才知道是因为 git 现在需要配置信任目录。

git config --global --add safe.directory F:/next/nextjs-name

替换命令里面目录为你创建 nextjs 项目的目录，运行完重新打开 vscode 发布仓库即可。

打包手动部署在服务器

未完待续。

本文作者：自在废物

本文链接：https://rabithua.club/archives/727/

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。