從0到1，手把手教你部署自己的線上項目
Hello，大家好，我是 Sunday。
無論是針對校招還是社招而言，部署自己的線上項目都是非常重要的一件事情。但是我在跟很多同學(xué)溝通之后發(fā)現(xiàn)，很多同學(xué)對如何部署線上項目并不熟悉，有的同學(xué)甚至連服務(wù)器和域名都不太能搞清楚。
所以，今天咱們就花上幾分鐘的時間，和大家一起，從購買服務(wù)器開始，來看看如何快速的部署自己的線上項目！
視頻版地址：https://www.bilibili.com/video/BV15D42137dF
圖片
完整腦圖：
圖片
一、服務(wù)器與域名購買
想要部署項目，那么首先我們需要先了解兩個東西：
- 服務(wù)器
- 域名
其中，服務(wù)器是必須的，而域名不是必須的。但是要注意，這兩個都需要花錢購買。服務(wù)器買了就能用，而域名還需要進(jìn)行單獨(dú)的備案操作才可以。
那么首先，咱們先來看服務(wù)器。
1.1 服務(wù)器與公網(wǎng) IP
服務(wù)器并不是一個單獨(dú)的東西，它和 公網(wǎng)IP 是一起的。
其中：
- 服務(wù)器：相當(dāng)于一臺電腦。你的項目將來得在這個電腦中運(yùn)行。
- 公網(wǎng) IP 地址：相當(dāng)于找到這個電腦的方式。在網(wǎng)絡(luò)中通過 公網(wǎng) IP 訪問到你的電腦。這里大家要注意 你的家用電腦是沒有公網(wǎng)IP地址的，我們平時用的 192.168 開頭的都是局域網(wǎng) IP 地址。
那么怎么獲得這兩個東西呢？這就得花錢買了。國內(nèi)比較常見的有：阿里云、騰訊云、華為云大家可以根據(jù)自己的需要進(jìn)行購買。注意：買服務(wù)器送公網(wǎng) IP。也就是說你只需要購買一個服務(wù)器就可以了，公網(wǎng)IP 不需要單獨(dú)購買
咱們就以阿里云為例：
- 在產(chǎn)品這里找到 云服務(wù)器ECS：
- 點(diǎn)擊立即購買，這里注意：新用戶擁有 3 個月的免費(fèi)試用機(jī)會。足夠覆蓋你的找工作時間了。如果不夠用，騰訊云也送 3 個月，可以循環(huán)白嫖一下。
- 配置的話，咱們根據(jù)需要進(jìn)行選擇就可以，一般情況下 最低配（2V2G） 的足夠個人使用了。系統(tǒng)這里我選擇的是 centos 7.6 的版本，大家如果不知道選擇什么系統(tǒng)的話，那么就按照我的選擇就可以。
- 然后往下滑，可以看到 公網(wǎng)IP 的選項，這里建議選擇 按固定帶寬付費(fèi)，帶寬值個人選擇 1M 就行，越大越貴。
- 登錄憑證選擇 自定義密碼，這個最簡單。
- 其他的選擇默認(rèn)就行了。
然后就是下單付費(fèi)，這樣你就有了一個自己的服務(wù)器，同時這個服務(wù)器會贈送一個訪問地址，也就是公網(wǎng) IP。在 控制臺 可以直接查看到。
圖片
域名
說完了服務(wù)器，那么接下來咱們說域名。
域名是需要買的，不光要買還得備案才可以。
備案成功之后，還需要進(jìn)行一些配置才可以。這里我建議，你 在哪買的服務(wù)器，就在哪里買域名 。這是最省事的。
國內(nèi)無論是 阿里云 還是 騰訊云 都提供了域名的購買。我們還是以 阿里云 為例：
- 首先在輸入框中輸入你要查找的域名，比如：lgdsunday。這樣就可以看到所有未注冊的域名。
圖片
- 點(diǎn)擊立即注冊，就可以直接購買了。
這里有個點(diǎn)大家要注意，所有的服務(wù)，無論是 域名還是服務(wù)器，續(xù)費(fèi)的價格都會比第一次購買要貴。
所以說，如果使用時間長的話，一開始多買幾年價格上會更加合適。
如果不確定使用期限的話，那么可以根據(jù)大家自己的情況進(jìn)行選擇。
- 域名購買之后，會有一個備案信息。這個備案只有在初次購買的時候才會有，所以這里沒辦法跟大家演示。
- 不過，整個備案流程并不復(fù)雜。并且整個流程會有專門與你電話聯(lián)系，按照官方指導(dǎo)走就行。不會有什么難度的。
- 域名備案成功之后，就可以正常使用了。使用需要到 域名控制臺 中使用才可以。
因?yàn)槲业挠蛎窃?騰訊云購買的，所以說，這里我只能在騰訊云跟大家演示了。不過 騰訊云和阿里云 他們的域名控制臺都差不太多，這個大家不需要過于擔(dān)心。
- 進(jìn)入 云解析 DNS 控制臺，大概就張這樣。
圖片
- 點(diǎn)擊 解析 按鈕，就可以看到所有的解析記錄。
圖片
- 點(diǎn)擊左上角的 添加記錄 就可以新增一條解析。其中 每一條解析大家可以理解為是一個服務(wù)的訪問路徑。
但是： 這里有一個知識點(diǎn)大家需要知道。我們購買的域名是 lgdsunday.club。也就是說 它不是包含 www 的。
也就是說， www.lgdsunday.club 并不是購買的域名，而是在 lgdsunday.club 的基礎(chǔ)上配置的域名。
- 點(diǎn)擊 添加記錄，比較重要的選項有 3 個：
- 主機(jī)記錄：表示真是訪問域名是多少。比如這里寫入 www，那么訪問的地址就是 www.lgdsunday.club。
- 記錄類型：里面的選項值有很多。常用的有兩個：
A 記錄：指定主機(jī)名（或域名）對應(yīng)的IP地址記錄。咱們剛才買的服務(wù)器不是送了一個公網(wǎng)IP 嗎？使用 A 記錄就可以把公網(wǎng) IP 寫在 記錄值 這里。
CNAME 記錄：別名解析。一般如果做 CDN 訪問的時候會經(jīng)常用。使用 CNAME 記錄 記錄值 就需要寫 CDN 訪問地址了。
記錄值：主要看 記錄類型 寫的是什么內(nèi)容了。
配置好了之后，點(diǎn)擊確認(rèn)。就可以直接訪問了。
但是要 注意： 這樣的訪問，只能是 http 的協(xié)議，也就是 http://www.lgdsunday.club 。如果想要使用 https 的協(xié)議，那么需要使用到 SSL 證書才可以。這一塊如果大家有需要，咱們單獨(dú)再開一個視頻來說。
那么到這里，關(guān)于 服務(wù)器 與 域名 相關(guān)的域名相關(guān)的內(nèi)容，就全部說完了哈。
總結(jié)來說就是：
- 服務(wù)器 和 域名都需要購買。服務(wù)器貴點(diǎn)，一般個人使用選擇最低配（1核、1G內(nèi)存、1M帶寬）的就可以，一年五百塊錢左右。個人使用的域名便宜點(diǎn)（也有很貴的），一年幾十塊錢。
- 服務(wù)器購買之后，會贈送 公網(wǎng)IP，可以通過公網(wǎng) IP 直接訪問到服務(wù)器。但是如果想要訪問具體部署的項目（服務(wù)），還需要完成一些其他操作才可以（后面會講到的）。
- 域名購買之后，需要備案，才可以生效?？梢栽?nbsp;域名控制臺 配置 解析 綁定域名和服務(wù)器IP。這樣就可以直接通過 域名 而不是 公網(wǎng)IP 進(jìn)行訪問了。不過，這樣的域名默認(rèn)是 http 協(xié)議的，如果想要使用 https 協(xié)議，那么需要單獨(dú)購買 SSL 證書。
02：服務(wù)器連接
服務(wù)器本質(zhì)上是一臺電腦。但是區(qū)別在于 我們沒有辦法像訪問家用電腦一樣直接打開就可以訪問。
所以說，想要訪問到服務(wù)器就必須使用到一些工具才可以。也就是 服務(wù)器連接工具。
這個工具有很多，在選擇的時候需要注意 一定要選擇支持 FTP 傳輸?shù)摹槭裁茨兀?/p>
剛才咱們也提到了，服務(wù)器本質(zhì)上是臺電腦，而鏈接服務(wù)器就是 用你現(xiàn)在的電腦，訪問服務(wù)器這臺電腦。
那么在訪問的時候就會涉及到兩個操作：
- 指令操作：通過指令控制電腦的行為，比如前端都會用到的 npm i -g xxx 通過這樣的指令來安裝一些插件。這個操作可以直接鏈接服務(wù)器完成。
- 文件傳輸：因?yàn)閭€人項目部署，所以沒有必要搞什么復(fù)雜的自動化流程。最簡單的方式就是把打包之后的項目直接傳到服務(wù)器上。如果通過指令上傳未免有點(diǎn)復(fù)雜了。所以說，如果有個工具可以讓你直接 拖拽上傳 是不是就方便很多了。那么這種拖拽工具就叫做 FTP 工具 ，它使用 FTP 協(xié)議 來完成文件傳輸。
如果大家不知道用什么的話，那么我給大家做一個簡單的推薦：
- 在 windows 上，推薦大家使用 XSHELL + XFTP，企業(yè)版是需要收費(fèi)的。不過有一些社區(qū)版可以免費(fèi)使用，大家可以自行搜索。
圖片
圖片
- 在 mac 上，推薦大家使用 Termius ，我也是一直在使用這個，在這里推薦給大家。
圖片
那么接下來，我就通過 Termius 給大家進(jìn)行演示鏈接方式。
咱們在這里先演示連接，然后到后面在演示 FTP。
Termius 的連接并不復(fù)雜，共分為 兩步：
- 直接點(diǎn)擊 新建服務(wù)器。
圖片
- 輸入 IP 地址、用戶名、密碼。
圖片
- 雙擊 Item 項目，直接連接即可。
- 出現(xiàn)這個頁面，就表示 連接成功了。
三、軟件安裝
連接成功之后，咱們就需要在服務(wù)器上安裝不同的軟件。
這個軟件主要有 3 個：
1.安裝 Nginx
- Nginx 是服務(wù)器上可用的服務(wù)。將來我們的項目都需要運(yùn)行在 Nginx 上才行。
sudo yum install nginx -y- 然后執(zhí)行 nginx -t 看到這樣的打印，證明 nginx 安裝成功：
其中 紅框 所標(biāo)注的位置，就是 Nginx 的配置地址。
如果我們將來想要部署項目，那么少不了需要修改這個配置文件的內(nèi)容的。
這里咱們先不管，后面再說。
2.安裝 node
如果將來你會頻繁切換 Node 版本的話，那么可以直接安裝 nvm 。如果不頻繁切換 Node ，那么可以直接安裝指定的 Node 版本。
- 咱們這里就按照 會頻繁切換來做，直接安裝 nvm。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash- 出現(xiàn)以下打印表示 nvm 安裝成功。
圖片
- 但是此時，nvm 是無法直接使用的，因?yàn)槲覀冞€沒有把它添加到 環(huán)境變量 中。此時執(zhí)行 nvm -v 會得到如下打?。?/li>
圖片
- 想要正常使用，可以通過如下命令 添加 nvm 到環(huán)境變量：
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
source ~/.bashrc- 此時再次執(zhí)行 nvm -v ，打印成功：
圖片
- 有了 nvm 之后，就可以直接安裝指定的 node 版本了。比如：我這了安裝 16 的版本：
nvm install 16
圖片
出現(xiàn)一下打印，表示安裝成功！
可以通過 node -v 進(jìn)行驗(yàn)證。
3.安裝 mongoDB
mongo 是數(shù)據(jù)庫的一種。因?yàn)槲业姆?wù)都是使用的 mongo 數(shù)據(jù)庫，所以在這里為大家演示，如何在服務(wù)器安裝 mongoDB。
- 添加MongoDB的Yum存儲庫，這里需要做兩步操作：
創(chuàng)建一個文件 /etc/yum.repos.d/mongodb-org-4.4.repo 并使用文本編輯器打開它。
將以下內(nèi)容添加到文件中。
[mongodb-org-4.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc在這樣的操作過程中，如果直接在服務(wù)器通過 vim編輯器 書寫就比較麻煩。所以，我們就可以在本地完成編輯之后，利用到 FTP 上傳到服務(wù)器的指定位置：
- 在電腦創(chuàng)建 mongodb-org-4.4.repo 文件，并寫入以上內(nèi)容。
- 然后在 Termius 中找到 SFTP。
圖片
- 鏈接服務(wù)器之后，找到 /etc/yum.repos.d/ 路徑，直接把本地寫好的文件放入即可。
圖片
以上操作完成，即可安裝 mongoDB。
- 安裝mongoDB
sudo yum install -y mongodb-org- 啟動服務(wù)
sudo systemctl start mongod- 設(shè)置MongoDB為開機(jī)自啟動：
sudo systemctl enable mongod- 檢查MongoDB服務(wù)狀態(tài)：
sudo systemctl status mongod打印如下內(nèi)容，證明運(yùn)行成功
四、項目部署
以上內(nèi)容安裝好之后，接下來就可以部署項目了。一般情況下項目部署分為三部分：
- 數(shù)據(jù)庫
- 后端代碼
- 前端代碼
注意：以下操作是針對個人項目或小公司的極簡方案。所以并沒有任何的自動化、工程化流程。核心目標(biāo)就是：以最簡單的方式完成上線項目。
數(shù)據(jù)庫
對于很多個人項目來說，可能沒有什么需要遷移的數(shù)據(jù)，這樣的話只需要創(chuàng)建對應(yīng)的庫就可以了。
但是，如果有數(shù)據(jù)需要遷移，那么需要先把數(shù)據(jù)遷移完成。
整個過程也并不復(fù)雜，這里咱們使用 Navicat 這個工具來完成。
- 使用 Navicat 連接服務(wù)器數(shù)據(jù)庫，基于 SSH 連接。
圖片
- 保存之后，左側(cè)會出現(xiàn)連接記錄。
圖片
此時，可以把之前數(shù)據(jù)庫數(shù)據(jù)導(dǎo)出，然后導(dǎo)入到該數(shù)據(jù)庫之中（沒有的話，就直接新建即可）。
- 選中指定數(shù)據(jù)庫，導(dǎo)出之前數(shù)據(jù)。
圖片
- 導(dǎo)出之后會被保存為 .js 格式的文件。
- 直接在新的服務(wù)器中創(chuàng)建數(shù)據(jù)庫導(dǎo)入文件即可。
后端代碼
有了數(shù)據(jù)庫之后，導(dǎo)入后端代碼就很簡單的。
后端代碼不同于前端代碼，不需要打包上傳。
- 創(chuàng)建對應(yīng)路徑 sunday/。
圖片
- 把后端代碼拖到指定路徑下（不需要 node_modules）。
圖片
- 然后在服務(wù)器執(zhí)行命令 npm i 即可。
圖片
此時依賴安裝完成，項目就可以啟動了。但是： 要注意在服務(wù)器上啟動項目不可以和電腦一樣。
即：不可以直接通過 node index.js 或者 nodemon 進(jìn)行啟動。因?yàn)檫@樣會占死你的控制臺，無法進(jìn)行后續(xù)操作了
所以，想要在服務(wù)器上啟動服務(wù)，需要借助一些工具，比如 pm2：
Pm2 是一個 npm 的包，安裝比較方便，直接 npm i -g pm2 即可。
圖片
安裝成功之后，在項目目錄中，直接 pm2 start index.js --name="admin" 即可。
圖片
不過， 此時訪問你的接口地址，你會發(fā)現(xiàn)依然訪問不到：
圖片
出現(xiàn)這個情況是因?yàn)?nbsp;對于服務(wù)器端口訪問來說，是存在 安全組 的概念的。
端口沒有配置 安全組訪問 是不可以被訪問到的。
所以需要到 阿里云服務(wù)器控制臺 找到 安全組配置 進(jìn)行 端口配置：
圖片
配置完成之后，訪問即可得到如下響應(yīng)：
圖片
至此，服務(wù)端配置完成！
前端代碼
服務(wù)端配置成功之后，下面咱們就需要配置前端項目了。
前端項目需要先打包，然后配合 nginx 完成發(fā)布操作。
- 前端項目打包，一般都可以通過 npm run build 完成打包操作。
- 打包之后，生成 dist 文件，直接拖到服務(wù)器指定位置，我這里適合 server 平級。
圖片
上傳成功之后，接下來就需要配置 nginx 了。
- 通過 nginx -t 命令獲取到 nginx 的配置文件位置。
圖片
- 當(dāng)前當(dāng)前路徑文件，拖拽到本地 進(jìn)行修改（vim 并不好用，不推薦使用，太麻煩）。
- 配置的方式根據(jù)大家的協(xié)議不同（http 或者 https）各不相同。我這里有 SSL 證書，所以可以直接配置 https 協(xié)議請求。大家沒有可以略過。
圖片
- 把 SSL 證書直接放入到 /etc/nginx/ 路徑即可。
- 然后進(jìn)行nginx的server配置，一個server就是一個服務(wù)。
# admin
server {
#SSL 訪問端口號為 443
listen 443 ssl;
#填寫綁定證書的域名
server_name 你的域名沒有就寫 localhost;
#證書文件名稱
ssl_certificate 證書地址;
#私鑰文件名稱
ssl_certificate_key 證書地址;
ssl_session_timeout 5m;
#請按照以下協(xié)議配置
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
#請按照以下套件配置，配置加密套件，寫法遵循 openssl 標(biāo)準(zhǔn)。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
root /sunday/admin/dist/;
#charset koi8-r;
access_log logs/host.access.log main;
location / {
# index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 反向代理，解決跨域問題（單獨(dú)代理請求到服務(wù)端）
location /prod-api/ {
proxy_pass 代理服務(wù)器地址;
# rewrite ^/api/(.*)$ /$1 break;
# $host 變量，Host 為變量名
proxy_set_header Host $host; #域名轉(zhuǎn)發(fā)
proxy_set_header X-Real-IP $remote_addr; #IP轉(zhuǎn)發(fā)
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie; # cookie 配置
}
}這樣配置之后，即可訪問。
總結(jié)
那么到這里，咱們就已經(jīng)完成了一個線上的項目部署。
不過大家要注意，以上屬于部署方案適合 個人項目或者小公司的項目部署方案。所以就不要提出 工程化、自動化、流程化 的東西了，這些方案好是好，但是并不適合個人或者小團(tuán)隊。
