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 這個工具來完成。

1. 使用 Navicat 連接服務器數據庫，基于 SSH 連接。

圖片

2. 保存之后，左側會出現連接記錄。

圖片

此時，可以把之前數據庫數據導出，然后導入到該數據庫之中（沒有的話，就直接新建即可）。

• 選中指定數據庫，導出之前數據。

圖片

• 導出之后會被保存為 .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 配置
        }

    }

這樣配置之后，即可訪問。

總結

那么到這里，咱們就已經完成了一個線上的項目部署。

不過大家要注意，以上屬于部署方案適合 個人項目或者小公司的項目部署方案。所以就不要提出 工程化、自動化、流程化 的東西了，這些方案好是好，但是并不適合個人或者小團隊。