Github action helps you automate repetitive tasks.

Github is really a treasure trove. Recently, I was working on a small website using react + nextjs, and the back and forth switching between the server updates was affecting my desire to work on this little toy. I casually googled and found that I could actually automate the deployment to my own server using GitHub actions. I started searching for tutorials and finally achieved the following result: After coding in Vscode, I pushed it to GitHub using the git plugin, which automatically triggered the action on GitHub. The project was then compiled and packaged in the GitHub cloud and uploaded to the server, replacing the original web content, and then PM2 was restarted. The entire update process only requires me to push after coding, and the website will be updated and deployed within a few minutes! :@(proud)

[Preparation] Server Software Versions#

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

Development environment nextjs

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

Getting Started#

Create a folder locally to store the next project#

Go to the folder and execute the following command to create a template from the official nextjs repository.

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

Modify `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"
  }
}

Since my project is purely static, I added the export command in the package.json file. I also modified the start port because there are already other projects running on the server, and the default port is already occupied. So I changed it to port 82. You can modify it to your own available port or leave it blank to run on port 80 by default. (It is worth mentioning that you need to allow the port you need to run this project in the server firewall in advance)

Run the created nextjs project locally#

Execute the following command in the same directory as package.json

npm run dev

Visit http://localhost:3000/ to see "Welcome to Next.js!", which indicates that the example project has been successfully created~

Open and upload the source code to GitHub in Vscode#

Drag and drop the project folder onto the vscode icon, so that it opens as a separate workspace.

Next, click on the left icon "Source Control" > "Publish to GitHub" > "Publish to GitHub private repository" (You can modify the repository name, fill in randomly. Here, I published it to a private repository, but you can choose to publish it to a public repository)

It seems that the latest version of git requires trusting the folder in order to display normally in the source control. Otherwise, it will remain stuck in the original uninitialized interface. I encountered this problem today and found out that git now requires configuring trusted directories.

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

Replace the directory in the command with the directory of your created nextjs project. After running the command, reopen vscode and publish the repository.

Manually deploy the package on the server#

To be continued.