目錄

一、引言

二、配置服務(wù)器

1. 遠(yuǎn)程連接服務(wù)器

· 用服務(wù)商提供的遠(yuǎn)程連接

· 用MotaXterm來(lái)遠(yuǎn)程連接

?編輯?編輯?編輯

?2. 登錄實(shí)例

· 如何獲取賬號(hào)和密碼

· 服務(wù)商遠(yuǎn)程連接方式：

?·?MotaXterm連接方式

三、項(xiàng)目準(zhǔn)備與測(cè)試

1. 安裝nodejs

· 進(jìn)入安裝目錄

· 下載

· 解壓

· 重命名文件夾

· 配置環(huán)境變量

· 檢驗(yàn)是否安裝成功

?· 更換鏡像與下載pnpm、yarn、cnpm

2.安裝git并配置SSH

· 下載git

· 配置用戶(hù)名和郵箱

· 配置SSH公鑰

3. 上傳nodejs項(xiàng)目

4. 配置安全組

?5. 測(cè)試在互聯(lián)網(wǎng)上能否訪問(wèn)成功

四、使用pm2持久化運(yùn)行服務(wù)

1. 全局安裝pm2

2. pm2常見(jiàn)命令

3. 運(yùn)行Next.js 服務(wù) （或者node.js）

· 修改package.json

?· 輸入命令持久化運(yùn)行服務(wù)

· 在服務(wù)器上執(zhí)行上述操作

五、自動(dòng)部署

1. 引言與原理

2. 編寫(xiě)一個(gè)接口

3. 配置Webhooks

4. 測(cè)試與debug

六、結(jié)語(yǔ)

一、引言

? ? ? ? 最近Vercel服務(wù)不穩(wěn)定，經(jīng)常被墻，還是得整一個(gè)自己的服務(wù)器呀??????

? ? ? ? 習(xí)慣了vercel的自動(dòng)部署，那么自己的服務(wù)器也得安排上，走起。

? ? ? ? 本文將帶你從0到1進(jìn)行服務(wù)器的配置與項(xiàng)目部署。（next項(xiàng)目部署、node項(xiàng)目部署）(注：nuxt項(xiàng)目部署步驟不一樣，下面部署時(shí)會(huì)講）

? ? ? ? 由于我的是個(gè)人開(kāi)發(fā)自用，可能有的地方不是很規(guī)范，比如運(yùn)行的服務(wù)是dev而不是打包后的代碼（雖然也沒(méi)啥太大區(qū)別吧），所以如果你是想給客戶(hù)打包上線的，可能下面的代碼需要稍微小改一下。

? ? ? ? 本文將以阿里云服務(wù)器、Next.js、GitHub做主要示例。（其它框架也有提及）

二、配置服務(wù)器

? ? ? ? 我的服務(wù)器配置 阿里云免費(fèi)學(xué)生服務(wù)器 2核2G 操作系統(tǒng) centOS 7.5 64位

1. 遠(yuǎn)程連接服務(wù)器

· 用服務(wù)商提供的遠(yuǎn)程連接

? ? ? ? 阿里云：頁(yè)面左下角先點(diǎn)切回舊版：?使用新版也可以，因?yàn)槲铱吹慕坛淌鞘褂门f版的，所以就用舊版來(lái)演示????

????????打開(kāi)阿里云或者騰訊云等，進(jìn)入控制臺(tái)，找到你的云服務(wù)器實(shí)例，點(diǎn)擊遠(yuǎn)程連接 。（下圖為阿里云，如果你的服務(wù)商沒(méi)有這個(gè)功能，可以下載MotaXterm進(jìn)行遠(yuǎn)程連接，見(jiàn)下）? ? ? ?

????????優(yōu)點(diǎn)：很多地方是中文，比較友好

· 用MotaXterm來(lái)遠(yuǎn)程連接

如果你的服務(wù)商沒(méi)有遠(yuǎn)程連接功能，就使用這個(gè)方法

下載地址：MobaXterm free Xserver and tabbed SSH client for Windows?

操作如下：（圖片來(lái)源于文檔 ：阿里云服務(wù)器領(lǐng)取及部署 (yuque.com)）

?2. 登錄實(shí)例

· 如何獲取賬號(hào)和密碼

? ? ? ? 賬號(hào)是創(chuàng)建實(shí)例的時(shí)候順便創(chuàng)建的，一般是root 或?ecs-user

? ? ? ? 密碼是可以自己設(shè)置的，如果不知道默認(rèn)密碼的話(huà)就重置密碼，阿里云重置密碼如下：

· 服務(wù)商遠(yuǎn)程連接方式：

鏈接成功后點(diǎn)擊這里可以查看文件樹(shù)

?·?MotaXterm連接方式

?

然后 輸入密碼，注意你輸入的密碼是不會(huì)顯示在屏幕上的，盲打后直接回車(chē)即可。

接下來(lái)的操作使用MotaXterm還是服務(wù)商提供的遠(yuǎn)程鏈接方式都沒(méi)什么區(qū)別了，不會(huì)分開(kāi)講了

三、項(xiàng)目準(zhǔn)備與測(cè)試

1. 安裝nodejs

? ? ? ? 服務(wù)器就相當(dāng)于一臺(tái)云電腦，需要在上面進(jìn)行一些配置才行

????????先在官網(wǎng)查看node版本，看看自己想安裝哪個(gè)版本的?https://nodejs.org/dist/?下面是linux，所以下載linux版本的

· 進(jìn)入安裝目錄

先看文件樹(shù)，看看這個(gè)目錄存不存在，不存在先創(chuàng)建

創(chuàng)建好后，輸入下面的命令進(jìn)入到所在目錄

cd /opt/software

· 下載

這里我選擇了?16.15.0 版本的nodejs，如果你是其它版本，記得改一下下面的版本號(hào)

wget https://nodejs.org/dist/v16.5.0/node-v16.15.0-linux-x64.tar.xz

· 解壓

如果你是其它版本，記得改一下下面的版本號(hào)

tar xvJf node-v16.15.0-linux-x64.tar.xz

然后刪除二進(jìn)制包，如果你是其它版本，記得改一下下面的版本號(hào)

rm -rf node-v16.15.0-linux-x64.tar.xz

· 重命名文件夾

解壓好后，刷新一下文件樹(shù)，你就能看到剛剛下載的node了，文件夾名字是帶有版本號(hào)的，右鍵這里，把文件夾名字改為node

· 配置環(huán)境變量

命令行輸入這個(gè)命令

vi /etc/profile

?然后在下方插入這個(gè)代碼

export PATH=$PATH:/opt/software/node/bin/

然后按esc退出編輯模式，然后輸入?:wq，然后回車(chē)即可保存 （注意冒號(hào)不要漏了）

附vim基本操作：

vi /etc/profile //編輯文件
i  //插入
:q //退出
:q! 不保存退出
:wq 保存退出

?然后在命令行輸入，保存環(huán)境變量?

source /etc/profile

· 檢驗(yàn)是否安裝成功

命令行輸入 node -v 和 npm -v，查看node版本，有顯示說(shuō)明成功，報(bào)錯(cuò)的話(huà)請(qǐng)檢查上述步驟

?· 更換鏡像與下載pnpm、yarn、cnpm

在命令行依次輸入下面代碼，注意注釋不要復(fù)制進(jìn)去了

//用淘寶鏡像下載cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org 

//用cnpm下載yarn
cnpm i yarn -g

//yarn設(shè)置淘寶鏡像
yarn config set registry https://registry.npm.taobao.org

//cnpm下載pnpm
cnpm i pnpm -g

//查看源
pnpm config get registry 

//切換淘寶源
pnpm config set registry https://registry.npm.taobao.org

2.安裝git并配置SSH

? ? ? ? 既然要實(shí)現(xiàn)自動(dòng)部署，那么肯定是需要用到git的

· 下載git

? ? ? ? 使用的是centOS，如果你不是這個(gè)操作系統(tǒng)，下方的yum命令報(bào)錯(cuò)，可以搜索查看自己的操作系統(tǒng)如何下載git。

? ? ? ? 是centOS的話(huà)，如果報(bào)錯(cuò)沒(méi)有yum這個(gè)命令，那么先使用這個(gè) sudo apt install yum 命令安裝，如果還是不行就查看這個(gè)文檔?解決yum報(bào)錯(cuò)的問(wèn)題

yum install git
git --version //可以查看是否安裝成功

· 配置用戶(hù)名和郵箱

git config --global user.name "這里輸入用戶(hù)名"
git config --global user.email "這里輸入郵箱@xx.com"
git config --global --list

· 配置SSH公鑰

先生成公鑰

ssh-keygen -t rsa -C 12345678@qq.com //這里輸入自己的郵箱

然后查看公鑰

????????先進(jìn)入 ~/.ssh目錄，然后輸入 li，然后輸入 vi?id_rsa.pub ，然后復(fù)制里面的容器到GitHub去配置ssh

cd ~/.ssh
ll //看到ssh文件夾中所有的文件
vi  id_rsa.pub //復(fù)制里面的容器到碼云去配置ssh

去GitHub配置SSH（選擇Gitee也可以，但是本文以GitHub為示例）

????????點(diǎn)擊頭像，點(diǎn)擊設(shè)置 ，找到SSH部分，新建，把剛剛復(fù)制的內(nèi)容粘貼進(jìn)去即可

?

查看是否配置成功

回到服務(wù)器，輸入下方命令

ssh -T git@github.com //查看ssh是否配置成功

3. 上傳nodejs項(xiàng)目

進(jìn)入home目錄

cd /home

然后克隆項(xiàng)目的存儲(chǔ)庫(kù)??

git clone xxxx

刷新一下文件樹(shù)，就會(huì)發(fā)現(xiàn)項(xiàng)目已經(jīng)下載好了?

進(jìn)入項(xiàng)目文件夾

cd xxxx //這里填寫(xiě)剛剛克隆好的倉(cāng)庫(kù)目錄

?安裝依賴(lài)

npm i // 或者 pnpm i 等皆可

嘗試運(yùn)行，根據(jù)你的項(xiàng)目類(lèi)型，運(yùn)行不同的代碼，運(yùn)行成功后，再進(jìn)行下面的步驟

pnpm dev //next.js



node xxx.js //node.js

4. 配置安全組

根據(jù)我們運(yùn)行的服務(wù)器的端口號(hào)，需要配置安全組，才能在互聯(lián)網(wǎng)上訪問(wèn)到你的服務(wù)

?以阿里云為例（其它請(qǐng)查看對(duì)應(yīng)教程），假設(shè)我們剛剛運(yùn)行的項(xiàng)目端口號(hào)為 :3000

?5. 測(cè)試在互聯(lián)網(wǎng)上能否訪問(wèn)成功

打開(kāi)瀏覽器，輸入你的服務(wù)器ip地址，再加上對(duì)應(yīng)的端口號(hào)，看看能否正常訪問(wèn)，能正常訪問(wèn)說(shuō)明服務(wù)運(yùn)行成功。

四、使用pm2持久化運(yùn)行服務(wù)

????????之前使用的命令 node xxx.js 、pnpm dev 等，當(dāng)你關(guān)閉了命令行窗口時(shí)，服務(wù)就掛了，所以需要pm2來(lái)幫我們持久化運(yùn)行服務(wù)。

1. 全局安裝pm2

npm i pm2 -g

2. pm2常見(jiàn)命令

3. 運(yùn)行Next.js 服務(wù) （或者node.js）

所有的操作可以先在自己的電腦上測(cè)試，成功了再上服務(wù)器

· 修改package.json

（如果你是node.js（nodemon除外），可以不看這個(gè)，直接看如何運(yùn)行）

?在自己的電腦上打開(kāi)package.json文件，在script欄增加一條命令

?????????其中， xxxxx是指把服務(wù)命名為xxxxx（可以改成其它的）， 最后的 run dev指的是最終想執(zhí)行的命令，這里由于我想運(yùn)行next.js的開(kāi)發(fā)服務(wù)器（npm run dev），所以在這輸入 run dev，如果你是nuxt.js，就需要其它方法來(lái)部署了。打包之后，參考pm2文檔（快速開(kāi)始 | PM2中文網(wǎng) (fenxianglu.cn)），修改端口（環(huán)境變量 | PM2中文網(wǎng) (fenxianglu.cn)）即可。

? ? ? ? 如果你想運(yùn)行打包后的生產(chǎn)服務(wù)的話(huà)，就先在命令行輸入 next build 進(jìn)行打包 （nuxt是nuxt build），然后把上面的 run dev 改成?run start?

?· 輸入命令持久化運(yùn)行服務(wù)

nodejs（nodemon除外）使用第二條，其它使用第一條

先在自己的電腦上測(cè)試，成功了再去服務(wù)器測(cè)試

npm run pm2start // 通過(guò)自定義的命令，使用pm2 啟動(dòng)項(xiàng)目

pm2 start index.js --name xxxxx //如果你是nodejs，可以直接運(yùn)行index.js即可

· 在服務(wù)器上執(zhí)行上述操作

上述操作在本地成功后，先把本地的改動(dòng)git push上倉(cāng)庫(kù)，然后去服務(wù)器對(duì)應(yīng)目錄下 git pull，然后在服務(wù)器上全局下載pm2包，執(zhí)行上述操作即可運(yùn)行。下圖是我在服務(wù)器上運(yùn)行后的結(jié)果

?至此，我們就能在互聯(lián)網(wǎng)訪問(wèn)我們的服務(wù)啦?。。?！

五、自動(dòng)部署

1. 引言與原理

????????每次修改了代碼都需要手動(dòng)去服務(wù)器做上面的操作，太麻煩辣?。?！ 于是我想到了歪點(diǎn)子，在我們寫(xiě)代碼時(shí)，使用的是開(kāi)發(fā)服務(wù)器，每次修改了代碼，會(huì)自動(dòng)進(jìn)行熱更新（next、nodemon），那么我們就可以利用這個(gè)熱更新，每次發(fā)現(xiàn)了倉(cāng)庫(kù)的代碼有更新，就自動(dòng)執(zhí)行g(shù)it pull，就能實(shí)現(xiàn)“自動(dòng)部署”了? （其實(shí)就是自動(dòng)更新代碼而已）不是真正的CI/CD，只是一個(gè)簡(jiǎn)單的假自動(dòng)部署。

? ? ? ? 當(dāng)然，如果你想使用生產(chǎn)服務(wù)器，也是可以進(jìn)行熱更新的，只不過(guò)比使用開(kāi)發(fā)服務(wù)器多了打包部署等命令。

? ? ? ? 那么怎么知道倉(cāng)庫(kù)是否有新代碼出現(xiàn)呢？ GitHub Webhooks。每次倉(cāng)庫(kù)事件發(fā)生時(shí)，都會(huì)向指定的路徑發(fā)送一個(gè)請(qǐng)求，我們的服務(wù)器接收到這個(gè)請(qǐng)求，然后執(zhí)行g(shù)it pull等命令即可。

2. 編寫(xiě)一個(gè)接口

????????Webhooks需要向一個(gè)路徑發(fā)送請(qǐng)求，那么我們當(dāng)然得寫(xiě)一個(gè)接口來(lái)接收這個(gè)請(qǐng)求。

? ? ? ? 在自己的電腦上寫(xiě)好代碼，然后再去服務(wù)器git pull部署

? ? ? ? 下面以next.js為例，在pages/api文件夾下新建一個(gè)接口文件。（next.js: 比如我放在了pages/api/xxxx/CI_CD.js，那么對(duì)應(yīng)的接口路徑即為? http://xxxxxxx:3000/api/xxxx/CI_CD）

? ? ? ? 接口代碼：關(guān)鍵部分在try{ } 里面的 exec函數(shù)，使用其它框架的的請(qǐng)自行修改為對(duì)應(yīng)接口

? ? ? ? 含義為接收到這個(gè)請(qǐng)求時(shí)，就執(zhí)行g(shù)it pull + npm i這個(gè)命令。如果你是生產(chǎn)環(huán)境代碼，就加上打包命令，詳情可搜索exec函數(shù)如何使用 （當(dāng)前代碼沒(méi)有鑒權(quán)，等下面配置好Webhook之后可以進(jìn)行鑒權(quán)，防止“惡意幫你部署” ）

import { exec } from 'child_process';


/**服務(wù)器自動(dòng)化部署（使用pm2運(yùn)行pnpm dev開(kāi)發(fā)服務(wù)器，有新代碼會(huì)自動(dòng)重構(gòu)，所以只需要git pull即可自動(dòng)部署了） */
const CI_CD = async (req, res) => {
    return new Promise(async (resolve, reject) => {
        try {
            const { headers, body, query } = req
            console.log('——————————接收到GitHub請(qǐng)求，header為', headers, '\nbody為', body, '\nquery為', query);
            exec('git pull && npm i', (err, stdout, stderr) => {
                //`標(biāo)準(zhǔn)輸出stdout為${stdout}`, `錯(cuò)誤對(duì)象err為${JSON.stringify(err)}`, `標(biāo)準(zhǔn)錯(cuò)誤stderr為${stderr}`
                console.log('err為\n,', err, 'stdout為', stdout, '\nstderr為', stderr, '\nlogArr為', logArr);
                if (err) {
                    console.log(err,stderr);//執(zhí)行命令失敗
                } else {
                    console.log(stdout)//執(zhí)行命令成功，stdout為標(biāo)準(zhǔn)輸出
                }
                res.status(200).json({
                    success: true,
                    err, stdout, stderr
                }) //返回?cái)?shù)據(jù)
            });
        } catch (error) {
            console.log('error', error); 
            res.send({ success: false, errMeg: error?.message || error || '系統(tǒng)錯(cuò)誤' })
        }
    })
}

export default CI_CD

3. 配置Webhooks

打開(kāi)GitHub（gitee也可以，本文演示GitHub），打開(kāi)自己的倉(cāng)庫(kù)，找到設(shè)置，點(diǎn)擊“Webhooks”

?點(diǎn)擊新增?

然后新增?

?可以在接口的代碼中，對(duì)密匙進(jìn)行校驗(yàn)，這里我就不放校驗(yàn)的代碼了。

4. 測(cè)試與debug

????????在服務(wù)器上git pull拉取最新代碼，然后自行部署好最新代碼并啟動(dòng)服務(wù)。然后自己進(jìn)行一下push操作，pm2 logs 查看日志，查看 接口是否被請(qǐng)求 、 是否成功拉取代碼 的日志 。

? ? ? ? 如果發(fā)現(xiàn)出現(xiàn)錯(cuò)誤，那么就修復(fù)bug。如果沒(méi)有接受到請(qǐng)求，那么打開(kāi)下面的頁(yè)面，拉到頁(yè)面最底端，可以查看Webhooks日志。

六、結(jié)語(yǔ)

? ? ? ? 本篇文章到此結(jié)束啦，全是我個(gè)人的踩坑后的總結(jié)，如果你遇到了問(wèn)題可以在評(píng)論區(qū)問(wèn)我，如果文章哪里寫(xiě)錯(cuò)了也歡迎指出。

? ? ? ? 參考文檔：阿里云服務(wù)器部署教程 (yuque.com)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-744488.html

到了這里，關(guān)于在服務(wù)器部署Next.js、Node.js項(xiàng)目，并實(shí)現(xiàn)自動(dòng)部署（偽CI\CD）超詳細(xì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！