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