天天看點

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

1.将本地代碼上傳到git伺服器

git是國外代碼庫,可以使用國内

gitee碼雲

沒有賬号直接注冊即可,點選建立倉庫:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器
設定倉庫:
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器
點選建立後,檢視入門教程,我們開始上傳代碼到git伺服器:
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

(1)在本地安裝git

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-3.nginx配置web伺服器并安裝網站環境

文章開始我們就已經下載下傳了完整的git,是以我們可以在vscode終端直接使用。

(2)在本地使用git建立keygen

過程與伺服器中一樣:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

同樣儲存記錄公鑰keygen,友善以後直接使用。

(3)将公鑰部署到git伺服器

将公鑰部署到git伺服器後,每次上傳代碼就不需要輸入密碼了。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器
進入設定頁面,找到ssh公鑰進行公鑰的添加:
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器
輸入密碼驗證後成功添加:
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時成功,就等于git授權了目前你這台電腦上傳下載下傳檔案的權限。

(4)初始化git

首先對git進行全局設定:

git config --global user.name "bafangsheji"
git config --global user.email "[email protected]"           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

然後初始化git

git init           

目的是初始化目前檔案夾為git項目。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

顯示沒有git指令,這是因為最初下載下傳的時候沒有意識到會有可能在非git軟體上使用git,是以我們隻要将git添加到環境變量即可。

找到環境變量在哪:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

先将git的bin路徑添加到環境變量:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

然後找到cmd所在位置,同樣路徑添加到環境變量:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

添加後重新開機vscode,輸入指令git init:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

我這變綠了,好可怕,但是成功了:)。

此時綠色就代表這個項目為git項目。

此時我們可以看到項目檔案夾中的部分檔案夾為灰色,基本上都是一些封包件,是因為在.gitgnore檔案中自動識别了一些沒有必要一起上傳的大檔案包,在上傳到git伺服器時自動忽略。這些包之後在伺服器中可以使用一條指令根據package.json檔案在伺服器中重新下載下傳。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

(5)把目前檔案夾添加到git項目中

git add .           

表示将項目檔案夾中所有檔案加入到git版本,以便于上傳到git。

(6)将目前項目送出到本地(儲存目前項目狀态)

// git commit送出到本地  -am 添加描述
git commit -am "初始化"           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時git要求我們送出一些資訊,按照他的要求送出我們的資訊。

添加完資訊後再次執行送出到本地指令

git commit -am "初始化"

:

一頓更新,檔案狀态又恢複原狀,意思是本地代碼回來了。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

其中create mode ...意思是對于git來說新建立了這些檔案。

(7)給本地git添加一個源頭位址

源頭位址大緻就是我們本地代碼需要上傳到的位址。

origin是約定俗成的源頭名,你想要改成其他名字也可以。

位址就是最開始我們找到的git的ssh位址。

git remote add origin [email protected]:bafangsheji/node-mine.git           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

(8)送出本地代碼到git伺服器

// git push上傳代碼  -u xxxx上傳到的位址
git push -u origin master           

首次送出代碼需要使用-u說明添加到的位置,以後送出直接git push即可。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

成功上傳,在git頁面中重新整理檢視,除了灰色的檔案夾都成功上傳了:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

2.在網站伺服器中拉取git伺服器中的代碼

(1)部署網站伺服器中的公鑰

首先我們要将之前網站伺服器中的ssh-keygen公鑰部署到git賬号中,用來作網站伺服器對git中代碼的拉取。

與本地公鑰不同的是,網站伺服器中的公鑰不要直接添加到設定中的SSH公鑰中,因為如果你的網站項目是給客戶做的,客戶就可以在伺服器中通路你git賬号中的所有項目。

在git伺服器中進入我們的項目,選擇管理,找到公鑰管理,添加部署公鑰:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

将網站伺服器中的公鑰錄入添加:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

添加并自動啟用後我們就可以拉取代碼到網站伺服器了。

(2)拉取代碼到網站伺服器

登入網站伺服器:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

ll指令檢視目前伺服器中所有檔案夾和檔案:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

進入‘/’目錄并再次查詢,找到/var檔案夾,檢視:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

進入'www'檔案夾,在進入html檔案夾,其中隻有一個html檔案:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時在html檔案夾中建立一個data檔案夾并進入:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

具體指令:

// 切換檔案夾
cd ***
// 檢視檔案夾檔案
ls
// 檢視檔案夾檔案,并顯示隐藏檔案
ll
// 建立檔案夾(make directory)
mkdir ***           

重頭戲,在這個data檔案夾中拉取項目代碼:

git clone ***           

複制git中ssh位址:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

開始拉取代碼:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時ll檢視data檔案夾内容:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

代碼拉取成功,此時我們根據server端package.json中之前儲存下來的效果包名下載下傳之前被忽略的所需功能包。

// 從package.json中找到需要下載下傳的檔案包進行下載下傳
npm i           

過程中讓我更新npm,下載下傳很快不知道是否更新完node_module中的包。

檢查一下,可以找到幾個我們之前安裝過的包:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

應該沒什麼問題,這時我們就可以啟動該項目了:

node index.js           

回到server檔案夾,輸入指令,得到端口号:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

但此時情況與我們本地相同,都是一個本地環境上項目的開啟,一旦關閉伺服器連接配接,項目就同時關閉了。是以我們需要使用pm2對我們的項目進行背景連接配接,實時開啟我們的項目。

3.使用pm2實時開啟項目

(1)全局安裝pm2:

npm i pm2 -g           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

(2)使用pm2開啟項目

pm2 start index.js           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時我們的項目就啟動了,同時沒有占用目前終端,可以繼續操作。

更多相關pm2指令:

// 檢視目前程序
pm2 list
// 檢視此時占用端口
pm2 logs index           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時根據查詢logs發現項目啟動後報錯了,是以趕緊根據提示檢視了報錯原因:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

經查詢後說是node 和 npm 版本的原因,試了半天問題并沒有解決,于是我關閉了pm2,再次使用node index.js進行開啟端口,檢視到了問題所在:

// 根據目前項目序列0關閉pm2背景運作的項目
pm2 stop 0
// node開啟端口
node index.js           

一失足成千古恨,把一切warning報錯習慣性忽略的我終于被打了臉。經查詢原因是mongodb資料庫的問題,它要求我加上

{ useUnifiedTopology: true }

,沒辦法,本地代碼中找到資料庫設定:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

别扭啊,搞不懂,但也沒辦法,重新将代碼上傳到git伺服器,再到網站伺服器拉取一遍試一下:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時git中檔案已更新:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

網站伺服器再次拉取項目:

當輸入git指令,顯示沒有.git時

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

輸入指令git init 建立.git檔案

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

重新拉取項目前先将項目移除:

// 删除檔案
rm ***
// 删除檔案夾
rmdir ***
// 删除檔案夾及子檔案
rm -rf ***           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

此時重新拉取git伺服器上的項目代碼:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

進入server,再次下載下傳package.json挂載的封包件後啟動項目:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

成功,沒有報錯,牛比。

此時關閉連接配接,使用pm2啟動項目,并使用curl指令檢視項目:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-4.git拉取代碼到伺服器

成功進入頁面,由于其他頁面我再編譯生産環境時沒有做,是以大家如果當時把localhost:3000:web做了的話就可以進去看一下。

此時伺服器中的項目就可以通路了,下篇文章我們配置nginx反向代理,使得我們可以根據域名通路我們的項目,看到頁面。