手把手教你搭建網站

前言

相信很多前端的小夥伴都有一個這樣的想法：自己寫了個前端項目，本地玩膩了，想着配個服務器，然後把自己的項目發佈到服務器上，搭建一個屬於自己的網站。沒錯，我很早就有了這樣一個想法，但苦於知識量匱乏，很多東西都不懂，一直到現在，才真正搭建了屬於自己的網站。

總體來說，如果對於一些只接觸了純前端，對服務器以及項目上線部署沒什麼瞭解的小夥伴們來說，從購買服務器到真正搭建自己的網站還是有一點困難的，所以，接下來，我將詳細解讀以及教小夥伴們怎麼在服務器上搭建一個屬於自己的網站。

在文章最後，我會對連接服務器、上傳項目、以及搭建網站經常遇到的一些問題進行一些總結，以便各位小夥伴們遇到不同的情況都能夠很好的解決。

首先聲明，本人基於 Linux 下的 CentOS 8 系統鏡像，接下來的操作可能大部分偏向系統鏡像操作，但應用鏡像操作也會涉及，小夥伴們請耐心看完全文，你會收穫到自己想要的答案的。

預備知識

什麼是雲服務器？

雲服務器(Elastic Compute Service, ECS)是一種簡單高效、安全可靠、處理能力可彈性伸縮的計算服務。其管理方式比物理服務器更簡單高效。用戶無需提前購買硬件，即可迅速創建或釋放任意多臺雲服務器。

什麼是域名？

域名（英語：Domain Name），又稱網域，是由一串用點分隔的名字組成的 Internet 上某一臺計算機或計算機組的名稱，用於在數據傳輸時對計算機的定位標識（有時也指地理位置）。由於 IP 地址具有不方便記憶並且不能顯示地址組織的名稱和性質等缺點，人們設計出了域名，並通過網域名稱系統（DNS，Domain Name System）來將域名和 IP 地址相互映射，使人更方便地訪問互聯網，而不用去記住能夠被機器直接讀取的 IP 地址數串。

什麼是 SSL 證書？

SSL證書是數字證書的一種，類似於駕駛證、護照和營業執照的電子副本。因爲配置在服務器上，也稱爲 SSL 服務器證書。

SSL 證書就是遵守 SSL 協議，由受信任的數字證書頒發機構 CA，在驗證服務器身份後頒發，具有服務器身份驗證和數據傳輸加密功能。

SSL 證書通過在客戶端瀏覽器和 Web 服務器之間建立一條SSL安全通道（Secure socket layer(SSL), 安全協議是由 Netscape Communication 公司設計開發。該安全協議主要用來提供對用戶和服務器的認證；對傳送的數據進行加密和隱藏；確保數據在傳送中不被改變，即數據的完整性，現已成爲該領域中全球化的標準。

服務器選配

首先第一步，想要在服務器上部署項目，當然前提得有一臺服務器呀，所謂工欲善其事，必先利其器嘛。

市場上服務器廠商都挺多，我們熟知的可能也就是阿里雲，騰訊雲，華爲雲，百度雲等這些，個人推薦選擇阿里雲和騰訊雲，我第一次搭建是因爲百度雲有個活動可以白嫖三個月，所以第一次選擇了百度雲。其實服務器的配置這些對於新手來說不必過多擔心，我們購買服務器的用途也就是測試測試自己開發的項目，或者搞個自己的個人博客之類的放在服務器上，所以，一般的輕量級服務器就已經夠我們用了，不必很在意服務器的配置，所以新手我推薦輕量級服務器。

而且如果是新用戶，各大服務器廠商對新用戶的優惠力度都特別大，所以購買一個輕量級的個人服務器不是很貴，註冊之後記得實名，不實名的話是沒辦法購買服務器的。

對於活動推出的服務器，我們也不必擔心怎麼去配置服務器的參數那些，因爲配置都配好了，頂多就是讓你選擇操作鏡像，設置初始化用戶名和密碼等。不管選擇哪個廠商，其實相同配置下，價格差異並不大。各大廠商都是點擊最新活動，去享受優惠價格

阿里雲官網鏈接

騰訊雲官網鏈接

華爲雲官網鏈接

當我們註冊好一個賬戶並實名認證成功之後，我們就可以去購買一個屬於自己的服務器了，要是還在糾結的小夥伴，也可以去各廠商活動頁面先申請一個免費體驗的服務器先操作一下，等自己學會怎麼玩服務器了再購買也不遲，哈哈，沒錯，就是像我一樣，我第一次使用服務器並不是購買的，而是看到百度雲裏有活動，然後白嫖了三個月。百度雲活動鏈接

參數配置詳解

在購買服務器配置頁，會讓用戶選擇一些配置，接下來我將詳細解釋每個配置到底該怎麼選，以便幫助各位小夥伴們選擇出一臺最適合自己的服務器。下面我以百度雲和騰訊雲爲例，詳細解讀參數配置。

百度雲

快速購買方式

這個界面基本不用自己配置什麼參數，比較容易上手，對實例（服務器）的配置也有說明，可根據自己需求選配

地區及可用區

這裏分兩種情況，假如說自己買個服務器是因爲項目要上線投入使用，那麼這種情況，用戶主要集中在那個區域就選那個區域，這樣的話用戶訪問網站項目響應速度就相對較快。還有一種情況就是自己買了自己玩，這種的話就直接選擇自己所在地區

實例配置

有的小夥伴可能會問，我買的不是服務器嗎？實例是個什麼鬼？實例是雲端的虛擬計算資源，可理解爲雲服務器（Cloud Virtual Machine，CVM），包含 CPU、內存、操作系統、網絡、磁盤等最基礎的計算組件。雲服務器實例可在雲端提供安全可靠的彈性計算服務，實現計算需求；可隨着業務需求的變化，實時擴展或縮減計算資源；可極大降低企業的軟硬件採購成本，簡化 IT 運維工作。這裏說的實例配置其實就是服務器的配置，在快速購買這個頁面，對不同實例的配置都做了說明，小夥伴們可以根據自己用途來進行選擇

操作系統

其實這裏的操作系統又可以稱爲操作鏡像，簡單理解就是服務器購買者通過什麼樣的方式訪問到自己購買的服務器，這裏也可能是新手比較糾結的一點，操作鏡像呢又分爲應用鏡像和系統鏡像。鏡像是一個包含了軟件及必要配置的服務器或磁盤模版，包含操作系統或業務數據，還可以包含應用軟件 (例如，數據庫軟件) 和私有軟件。鏡像分爲公共鏡像、私有鏡像、共享鏡像、市場鏡像。鏡像服務 (Image Management Service) 提供鏡像的生命週期管理能力。用戶可以靈活地使用公共鏡像、私有鏡像或共享鏡像申請彈性雲服務器和裸金屬服務器。一般推薦選擇安裝系統鏡像，這樣的話操作系統是純淨的，未安裝過任何環境和程序的，方便我們操作。

帶寬

簡單理解就是在給定時間內可以傳輸的數據量。它相當於一條路，需要通過的數據相當於其中的車輛。如果道路狹窄，車輛通過所需的時間會相對較慢，這也是帶寬會在一定程度上影響網頁的打開速度的原因。如果把帶寬比作水管，帶寬實際上就是水管的流量而流量就是流出的水的總量。帶寬影響主機的訪問速度，網絡帶寬的大小對於訪問量大的網站尤爲重要。所以，帶寬越大，就代表訪問服務器和響應速度越快，但是呢，對於新手小白來說，一般帶寬 1M~2M 已經夠用了，大佬可滑走。

騰訊雲

相同的地方我就不在贅述，咱們來說說一些不同的值得注意的點


安全組

安全組（Security Group）是一種有狀態的包過濾功能的虛擬防火牆，它用於設置單臺或多臺雲服務器的網絡訪問控制，可以將同一地域內具有相同網絡安全隔離需求的雲服務器實例加到同一個安全組內，通過安全組的網絡策略對雲服務器的出入流量進行安全過濾。出於安全考慮，騰訊雲服務器默認只開放了 22 和 3389 端口，假設在這臺雲服務器上搭建網站，則需要 80 端口，就是通過配置安全組規則放行 80 端口來實現的。

登錄方式

密碼是每臺雲服務器實例專有的登錄憑據。爲保證實例的安全可靠，騰訊雲提供以下兩種加密登錄方式：

SSH 密鑰對：只需在控制檯和本地客戶端做簡單配置即可遠程登錄實例，再次登錄時無需再輸入密碼。此登錄方式更爲安全可靠，可以杜絕暴力破解威脅。

登錄密碼：任何擁有實例登錄密碼的人都可以通過被安全組允許的公網地址遠程登錄雲服務器實例。

IP 地址

騰訊雲提供 內網 IP 地址 和 公網 IP 地址。簡單理解，內網 IP 提供局域網（LAN）服務，雲服務器之間互相訪問。公網 IP 在用戶在雲服務器實例上需要訪問 Internet 服務時使用。

以上就是在選擇服務器時一些比較值得注意的參數配置，小夥伴們看到這裏，就可以去選擇一臺滿足自己需求，適合自己的服務器啦。

系統鏡像和應用鏡像怎麼選？

系統鏡像，也就是我們平時所說的操作系統鏡像，系統鏡像是不包含任何軟件以及插件的純淨版的操作系統。更多的人都會選擇系統鏡像，因爲不同方向的人可以根據自己的需求安裝自己所需要的服務以及軟件，優點就是靈活性比較強。

應用鏡像，簡單理解就是服務器已經幫你選擇了操作系統，並且在操作系統的基礎上又額外安裝了一些環境，相當於一條龍服務，自己不用動手去安裝環境，可根據選擇不同的應用鏡像搭建不同的網站類型，常見的有 WordPress、LAMP、Node.js 等。優點就是相對於系統鏡像來說，操作起來比較方便。

看到這裏，相信各位小夥伴在於選擇鏡像問題上應該知道怎麼選了吧，我剛開始一步直接到位選擇了系統鏡像，確實到後面也是花費了好多的時間才成功搭建起網站。所以對於沒有基礎的小夥伴來說，我覺得剛開始可以選擇應用鏡像，這種方式操作起來也相對簡單，如果也有小夥伴想選擇可玩性高的系統鏡像，那麼我推薦 Linux 下的CentOS鏡像，版本越高越好，但需要一定的 Linux 基礎。

登錄控制檯

當我們選好自己的配置併購買服務器後，就可以轉到自己的控制檯頁面查看自己的購買的服務器，並且再次設置一些參數，比如安全組，重置密碼等等。購買成功之後首次訪問公網 IP 是沒有響應的，因爲默認瀏覽器訪問的是 80 端口，而一般在服務器購買後沒做任何配置 80 端口是沒有被佔用的。但是如果選擇的是應用鏡像的話，在訪問的時候會根據自己選擇應用鏡像最終顯示對應的頁面

接下來我所講的內容主要以 Linux 下的 CentOS 8 鏡像爲主，因爲我選擇的是系統鏡像，但講完系統鏡像，我也會對應用鏡像做一些教程，方便不同小夥伴們的需求。

購買服務器成功之後，有條件的小夥伴可以去註冊一個屬於自己的域名， 購買域名後到相應的界面進行備案，只有備案成功後，自己纔可以通過域名來訪問自己的網站，這個過程差不多需要兩三天的審覈時間。

個人建議先把自己的網站搭建出來在考慮購買域名和備案這些操作，這樣比較把穩一點，不然域名買了，備案備了，自己網站搭建不出來，那豈不是白搭。

連接服務器

接下來要做的肯定就是連接服務器啦，我所知道的有三種方式，效果都差不多，看個人選擇，但推薦選擇使用遠程連接軟件連接。比如 Xshell 等。

使用網頁 VNC 訪問服務器

在控制檯頁面下點擊自己購買的實例，可以看到使用 VNC 登錄的方式。VNC 服務對瀏覽器有一定的要求，使用之前注意 VNC 頁面的提示。登錄之前要確保自己的實例正在運行，不然是沒辦法連接上的

現在只支持如下版本的瀏覽器

對於 linux 系統，在 VNC 窗口 的的對話框中，在 “login” 後輸入用戶名，按 Enter。對於 Windows 操作系統，點擊按鈕 “發送 Ctrl+Alt+Del”，發送 Ctrl+Alt+Del 命令到操作系統。

在 “Password” 後輸入密碼，按 Enter。值得注意的是輸入的密碼默認是不顯示的，別像我傻乎乎的，輸入密碼光標不動還以爲是自己鍵盤壞了。如下圖所示：

使用遠程連接軟件

此方式是大家都比較推薦的方式，原因很簡單，方便，靈活性高。這裏我使用的是 Xshell 遠程連接
首先去官網下載 Xshell，官網鏈接 Xmanager 中文官網_Xshell,Xmanager,Xftp 7 下載，現在 Xshell 已經更新到 7 版本，小夥伴們自行下載就行。

打開軟件後，新建一個會話，【名稱】選項自己可以隨意命名，不影響。【主機】選項填寫自己的公網 IP 地址，也就是自己服務器的地址，在控制檯可以查看自己的服務器 IP 地址，【端口號】選項默認是 22 端口，不用修改。22 端口就是用於 SSH 遠程連接的端口。其他選項不用選擇，直接點擊【連接】按鈕進行連接。

首次連接可能會跳出一個叫什麼密鑰配對的窗口，點擊接受就可以了，然後就是輸入【用戶名】和【密碼】，確定後就連接成功了，這裏的用戶名和密碼就是當時購買服務器要填寫的服務器用戶名和密碼喲。


顯式這個頁面即表示連接成功了喲，接下來就可以對自己的服務器進行一些操作了

使用遠程桌面連接

這也是第三種遠程連接服務器的方式，適用於選擇了 Windows 鏡像的用戶，可以直接用自己電腦上的遠程桌面連接到自己的服務器。

下載服務器 Web 服務

連接上自己的服務器之後，就可以對自己的服務器環境進行一些配置了，想要搭建網站，肯定少不了的就是使用 Web 服務來提供網站訪問能力，當下一些比較主流的 Web 服務有：Apache HTTP Server、NGINX、Apache Tomcat、Node.js、Lighttpd 等。這裏我推薦的使用的是Nginx，如果有小夥伴不瞭解這些是什麼東西，記得先去查閱下資料喲。

Nginx

Nginx 可以作爲靜態頁面的 web 服務器，同時還支持 CGI 協議的動態語言，比如 perl、php 等。但是不支持 java。Java 程序只能通過與 tomcat 配合完成。Nginx 專爲性能優化而開發， 性能是其最重要的考量, 實現上非常注重效率 ，能經受高負載的考驗, 有報告表明能支持高 達 50,000 個併發連接數。

首先，我們先創建一個文件夾，用於保存後面自己要上傳的項目

# 輸入代碼 mkdir web

接下來，查看自己的端口占用情況，上面我就提到了，服務器初始化狀態下 80 端口是未被佔用的

# 輸入代碼 netstat -ntlp


在 Linux 環境下下載 Nginx 非常的簡單，Linux 提供了很多包管理工具，所以直接輸入以下命令，敲下回車就可以下載 Nginx

# 輸入代碼 yum install nginx

下載過程中出現一下界面，直接選 y，一路下載

下載完成之後，我們輸入nginx來啓動服務，這時候我們再來查看端口占用情況就可以發現 80 端口已經被 nginx 佔用了

然後直接訪問自己服務器 IP 地址，出現如下界面就代表 Nginx 安裝並運行成功了

如果安裝完成之後，訪問服務器IP地址不成功，可能存在兩個問題，80 端口被其他服務佔用或者 Nginx 下載文件丟失或下載不成功。如果 80 端口被其他程序佔用，則清空 80 端口或者設置 80 端口占用服務爲 Nginx 即可。如果出現 Nginx 下載失敗或者下載文件缺失損毀，則卸載 Nginx 再次重新安裝就行了。

卸載 Nginx 命令：

# 輸入命令 yum remove nginx

上傳網頁項目

完成上述操作之後，接下來就可以把自己的項目上傳到服務器啦，那如何上傳呢，這裏介紹兩種方式

直接替換 Nginx 默認頁面

找到 Nginx 默認顯示頁面

# 輸入代碼 cd /usr/share/nginx/html

刪除 nginx 默認顯示頁面

# 輸入代碼 rm -rf index.html

將自己的網頁直接拖拽進目錄下即可，然後查看是否成功。全選文件，直接拖拽

查看是否存在文件


到這一步，咱們就簡單實現了一個靜態頁面上傳服務器了，現在直接訪問服務器 IP 地址，就可以看見自己的網頁啦。

修改 Nginx 配置文件

第一種做法呢比較麻煩，萬一要是文件夾刪錯了，那可不就廢了。所以，我比較推薦第二種方法。

首先下載 Xshell 配套的文件傳輸軟件 Xftp 7（遠程文件傳輸的軟件有很多，不一定非要使用這個，可根據自己選擇），連接上自己的服務器，連接方式和 Xshell 7 一樣。上面說道我新建了一個 web 文件夾，接下來我們把文件上傳到這個 Web 文件夾下。


接着找到 Nginx 的配置文件，修改默認配置，指向自己創建的文件夾下的 html 文件即可。

打開 Nginx 文件夾：

# 輸入命令 cd /etc/nginx

文本編輯打開 Nginx 配置文件：

# 輸入命令 vim nginx.conf

修改配置文件

完成這一系列操作之後，再次重啓 nginx 服務，然後訪問服務器 IP 地址，也能看到自己的網頁啦。

到此，簡單的靜態頁面網站就搭建成功啦，至於怎麼搭建動態網站，配置數據庫，後端，等等一些操作，我還正在摸索。那有沒有更簡單的方式呢，當然有，接下來我就講講寶塔面板的使用。

寶塔 linux 控制面板

寶塔面板是一款服務器管理軟件，支持 windows 和 linux 系統，可以通過 Web 端輕鬆管理服務器，提升運維效率。例如：創建管理網站、FTP、數據庫，擁有可視化文件管理器，可視化軟件管理器，可視化 CPU、內存、流量監控圖表，計劃任務等功能。

寶塔面板分爲 Windows 版本和 Linux 版本，我主要介紹的是 Linux 版的寶塔面板怎麼下載和使用，Windows 版本其實相差無幾。

下載

在下載之前，可先進入寶塔面板官網，註冊一個寶塔賬戶，後文服務器綁定時需要寶塔賬戶。在 Linux 系統中，使用一行命令就可以下載寶塔面板。

因爲我的服務器是Centos版本，所以，直接在 Xshell 中輸入以下命令：

# 輸入代碼 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

下載完成之後，會出現以下界面，包含訪問面板 IP 地址，登錄寶塔面板的用戶名和密碼，最好截圖保存一下，以便後續登錄。

在瀏覽器訪問寶塔面板，輸入用戶名和密碼，第一次登錄要綁定自己的寶塔賬戶，綁定之後出現以下界面

選擇一鍵安裝後，在面板的左上角，會自動顯示任務的數量，點擊後進入任務列表。在當前界面會顯示程序的安裝進度，或程序執行進度等。等待一段時間後，查看任務列表中的信息，查看是否完成。

等待安裝的過程中，自己可以瞭解面板的各模塊

創建站點

服務下載完成之後，點擊左側網站一欄，創建新的站點

【域名】：填寫需要綁定的域名以及端口。沒有域名可填寫服務器 IP 地址

【根目錄】：當前站點文件的路徑，可以自己選擇創建點，儘量使用默認路徑（www/wwwroot）方便管理。

創建站點成功後，進入目錄下，刪除默認網頁文件，上傳自己的網站文件，然後訪問服務器 IP 地址就能看見自己的網站啦，到這裏，網站建站就成功了

常見問題

建站失敗報錯

有時候登錄到寶塔面板想要新建一個站點時，會出現建站失敗的報錯，一般情況下考慮 Nginx 配置文件有問題，可重新下載 Nginx，並重新配置 Nginx 配置文件

寶塔面板連接不上雲服務器

這個報錯我遇到過一次，登錄上面板後一直彈窗說連接不上雲服務器，後來百度各種解決方案，感覺比較靠譜的就是重新下載面板，但也有可能是端口占用問題。

端口未放行

以下雲服務商，安裝寶塔後需開端口，不開啓將無法使用。

騰訊雲：https://www.bt.cn/bbs/thread-1229-1-1.html
阿里雲：https://www.bt.cn/bbs/thread-2897-1-1.html
華爲雲：https://www.bt.cn/bbs/thread-3923-1-1.html

更多詳情，請查看【寶塔手冊】序言 · 寶塔面板手冊 · 看雲

其實講到寶塔面板，也涉及應用鏡像這一塊了，如果在選擇服務器配置選擇了應用鏡像，那麼首次訪問服務器 IP 就會出現對應應用鏡像的默認頁面，對應的，在控制檯頁面也會給出登錄各應用的控制面板，可自行根據需求操作。

常見的應用鏡像說明

各廠商的應用鏡像描述不一樣，可根據自己的需求選擇對應的應用鏡像。

連接服務器常見問題

拒絕遠程連接

有時候使用 Xshell 遠程連接服務器會出現拒絕連接這種情況，一般就是 SSH 連接端口沒有開啓，可在控制檯安全組設置訪問規則。

項目發佈常見問題

頁面停留在 Nganix 默認頁

這個問題其實和上面的差不多，就是修改 Nginx 配置文件可能未生效，重新修改配置文件並保存退出，然後重啓 Nginx 服務，重啓服務器即可

圖片加載不出來

這種情況我搭建網站的時候遇到過，說來慚愧，我有些靜態資源是以中文命名的，比如有些圖片，後來我把圖片重命名後就加載得出來啦。還有可能就是自己的路徑不對，改下路徑就 OK 了。

總結

以上就是我在購買服務期後自己搭建網站的一些經驗和總結，寫這篇文章的目的也是爲了能夠幫助小夥伴們在購買服務器以及搭建網站的時候不那麼費力，少走點彎路。同樣，這也是我第一次嘗試把自己的網頁放到服務器上，並且能夠成功訪問，之前也沒接觸過到服務器有關的知識和操作，所以在這段路上我嘗試了很多次，也失敗了很多次，遇到過很多各種各樣的問題，經過多方面的不斷借鑑以及參考，終於成功在服務器上訪問到了自己的網頁。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ZKz-BYyfkQchYVEe6vQ4Dg

猜你喜歡