前端伺服器如何搭建

① 前端工程師零基礎個人網站搭建

大家好，我是一名前端工程師，我想大多前端工程師都渴望自己獨立搭建一個個人網站，不管是出於更多的學習提升自己的核心競爭力，還是想要展示自己建一個個人博客，亦或者是純粹出於好奇想建站一條龍跑通，反正，就是要自己獨立搭建一個網站跑通。你可以說沒有以上的想法，反正我有，所以，我就嘗試了，最後輸入我的網址 maramlee.com ，成功展示了「hello world」。啊…哈哈哈……

打算寫這篇文章是希望能給想要嘗試自己建站卻迷茫在前端的同學一點方向，可能就有人說了，網上隨便搜零基礎建站一大堆，不需要我在這邊寫，我回想我這建站之路，覺得還是很有必要，相信肯定會有一部分人會因為我的這篇文章而受益。

我在建站之初就查過很多資料，網上的資料很多很雜，有各種原因：比如太多不好分辨，有些時間比較久遠，也有很多本來是基礎點卻各行如隔山一臉懵，等等，所以實際操作起來比較吃力。我這里就從最初的申請域名開始，到最後輸入網址出現「hello world」，整個流程串聯起來，希望起到拋磚引玉的作用。

我希望您是一個有前端開發基礎的人，當然，我盡量將用到的技術點都提出來，希望能給沒有基礎的人一個思考方向。

我這邊域名、伺服器等用的是阿里雲，不用這個平台的小夥伴兒與自己的平台自行對比哈，有問題，也可以給我評論留言，一起探討。如果不知道選哪個平台申請，可以和我一樣，注冊一個 阿里雲賬號 ，再跟著我做。

此節有 注冊域名 、 實名認證 、 備案域名 這幾個流程。

輸入想要的域名，未被佔用即可注冊。具體操作，請參見 注冊通用域名 。
域名後綴通常為.com或.cn，基本上是能注冊 .com 就注冊 .com ，更多後綴請參見 域名區別 。

具體流程，請參見 域名實名認證概述 。

說明 使用中國大陸境內伺服器託管您的網站時，需要進行備案。否則不需要備案。
為節約備案時間和順利通過備案，建議您提前了解並做好備案前的准備工作：

各省管局要求資料有所不同，請根據 各地區管局備案規則 准備資料。更多詳情，請參見 ICP備案前准備概述 。

如果按步驟來的話，沒有備案過，所以參見： 首次備案 。
如果您是其他備案場景，請參見 ICP備案快速入門 。

先前往 實例創建頁 ，對於運維來說，這節比較簡單，但是作為運維小白，購買伺服器的時候，要注意根據自己的實際情況購買，強烈多查下阿里雲的文檔： 使用向導創建實例 ，很詳細！同時多看看提示、注意事項等。下面是我這個運維小白看了文檔後總結的步驟，如果你是小白也可以這樣做，如果有運維人員發現我的描述這些有問題的話，也請多多指教哈。

比如你只是想學學試一下，就選擇「按量付費」（注意按量付費的話，要先充值，記得充100-200都可以），但你希望長期維護就選擇「包年包月」。

這個要注意，總的來說，查看的網站的人在哪裡多，就選哪裡，如果你自己的博客，也可以選擇自己所在地，反正全國范圍內用的話，都差不了多少。更多的參見： 教我選擇地域

作為玩玩的網站，就按最小的選就可以了。

不知道怎麼選，建議選擇 CentOS 7.4 64位。注意，如果你是 windows 的電腦，也不要想當然的選擇 Windows Server 系統，這里是你的伺服器鏡像，可以簡單的理解為這是一台新電腦的配置，和你本地使用的電腦系統無關。

這個看你存儲東西決定，你可以想像成你新買一個電腦，這里的存儲可以看成電腦的內存。系統盤是必須選的，可以看成 windows 系統的 C 盤。至於數據盤和 NAS 存儲，不了解也可以先不選。對於玩玩的小夥伴兒，可以直接就操作系統盤打通流程，至於其他數據盤什麼的，可以後面深入了解了再擴展。

這個有「經典網路」和「專有網路」的區別，現在新開的賬號，都只有「專有網路」這個選項，就直接選這個就可以了，想知道更多它們可以自行查閱資料。

默認勾選「分配公網IPv4地址」即可

做測試用的話，就選「按使用流量」即可

可以看情況選擇，一般的玩玩，默認 5M 即可

想要了解詳細內容，可以查看： 教我選擇> 。安全組可以根據提示，新建一個安全組： 新建安全組> ，這里進去後，新建時，需要創建專有網路，根據提示填寫，一般默認就可以。

剩餘的彈性網卡和 IPv6 作為小白來說，暫時用不到，可以打通流程後再進行知識補充。

這個看你心情，可以登陸後再設置，可以「自定義密碼」也可以用「密鑰對」，根據文檔提示操作即可

再之後的操作可以看你情況設置，問題不大，確認好後即點擊購買即可。具體詳細操作，記得看文檔哦~

域名解析後，外部用戶才可通過域名訪問網站。比如輸入 .com 就可以訪問網路網站。
主要操作，看阿里雲的這個文檔就可以了： 設置域名解析快速入門

部署網站這里涉及到伺服器部署，對於前端來可能比較陌生，可能對後端來說比較容易些，但是，這個也不是很難，阿里雲給了部署的方式： 自助建站方式匯總 ，可以選擇適合自己的方式進行部署。我是前端人員，最熟悉的語言是 javascript ，所以，我選擇用 node.js 部署，阿里雲文檔里也有對應的操作文檔： node.js部署

這樣，你的第一個網頁就出來啦~~~

作為小白，踩過的坑真的不少，像不會後端怎麼辦？學 node.js 。不會 Linux 系統操作怎麼辦？查 Linux 常用操作。反正就是各種找文檔，找學習資料。這里就稍微提下比較基礎的坑，希望對其他小白有幫助。

連接 ECS 實例有多種方法：

注意，綁定了密鑰對之後，上面兩種連接方式都不可以用了。

想知道更詳細的內容，可查看 文檔 。

Linux格式化數據盤 文檔中有寫，格式化數據盤，需要掛載，隨實例一起購買的數據盤，無需掛載。而且，雲伺服器ECS僅支持數據盤分區操作，不支持系統盤分區操作。我前面就沒注意到，系統盤，就是隨實例一起購買的數據盤，我只有這個盤，看文檔的時候就跟著操作，進行分區，分了很多次，用 fdisk -lu /dev/vda1 查看分區成功的，但是，運行命令 mkfs.ext4 /dev/vda1p1 在新分區上創建一個文件系統就一直報錯：The device apparently does not exist; did you specify it correctly? 找不到文件系統。最後找了很久才發現犯了低級錯誤，在系統盤分區。

由於我不是計算機科班出身，不是很了解 ip 地址，在安全組里創建規則的時候，對於授權對象一欄，一臉懵逼，於是查找了下 IP 地址相關知識。

有一點基礎的人都知道，控制台輸入 ifconfig 列印出的地址，與電腦中圖形化界面上顯示的 ip 地址一樣，但是，這個地址是內網地址，並不是外網地址。
我在這里做測試的時候就將內網 ip 設置上，然後一直沒有預期效果。
外網地址，可以打開網路，直接搜索 ip 就可看到你的外網地址。

對於 ip 地址也是惡補了下，不了解的小夥伴兒可以參考這個地址： CIDR的IP地址的表示與劃分方法 ，對於這個實例，我也做了個筆記，供大家參考：

主機ID全為0和主機ID全為1的為非法IP地址
網路ID相同的就屬於同一網段

C類：C類IP地址：
3位元組的網路地址（最高位必須是110）+1位元組的主機地

CIDR：無類域間路由
IP地址/網路ID的位數 0.0.0.0/0
子掩碼：子網掩碼的二進制格式中的網路位全為1。這樣二進制格式的子網掩碼和二進制的IP地址進行「與」運算，可以得出該IP地址的網路位。
CIDR技術用 子網掩碼 中連續的1部份表示網路ID，連續的0部份表示主機ID。
例如 ：192.168.23.35/21，計運算元網的網路ID、子網掩碼、起止IP地址
子網掩碼：255.255.248.0

網路ID：192.168.16.0

起始IP地址：192.168.16.1

結束IP地址：192.168.23.254

由於我使用的是阿里雲平台，文章中很多節選自阿里雲，想了解更多的小夥伴兒請多查看阿里雲文檔。

我是事後回憶寫的文章，所以，可能有遺漏的地方，如果讀到發現有問題，請給我評論或留言，我會持續改進此文。

② 求node.js搭建前端web伺服器步驟，按網上的教程，安裝完node.js就不知道怎麼搭建了，都

安裝完node.js之後，你可以考慮使用webstorm開發工具創建web項目。
比如創建express項目。自動創建基於express 的web項目。

③ 前端本地開發和伺服器部署的架構怎樣設計合適

在 Application Virtualization Server Management Console 中創建伺服器組之後，可以使用以下過程向該組中添加伺服器。注意 伺服器組中的所有伺服器必須連接到相同的數據存儲。
如果您有一個資料庫的使用頻率非常高，而且由於這些資料庫經常發出更新請求而導致群集復制器過載的話，您需要考慮使用多個群集復制器。在一個伺服器中運行多個群集復制器，可以同時將新的更改復制到其它伺服器中。
如果一個群集復制器在把更改復制到一個資料庫時太忙，會有另外一個群集復制器把更改復制到其它的伺服器。這樣，通過共同分擔復制負荷的方式，多個群集復制器使得數據得到快速的更新並能嚴格的保持同步。

④ 用pyqt做好了前端，想用django做伺服器，想問一下大概怎麼搭建呢

一般客戶端（也就是你說的前段）跟伺服器端（你准備使用Django）都是通過 HTTP 協議交換信息的（除非有特別的需求，才會使用別的或者定製協議）。

在 客戶端（PyQT）中,你可以安裝 Requests 庫，它可以幫助你發送 HTTP 請求給伺服器端，

在 Django 中你可以使用 Django REST Framework 網頁鏈接處理 客戶端的HTTP請求。

⑤ 怎麼搭建FTP伺服器

1、首先，我們創建一個用於登錄FTP以進行操作的用戶帳戶。右鍵單擊我的桌面並選擇「管理選項」，轉到「管理」界面，然後打開「本地用戶和組」選項。我們可以在列表中看到用戶選項。

⑥ 前端搭建本地伺服器供區域網使用

作為前端開發搭建本地服務尤其重要，下邊的方法三步完成伺服器的搭建：

$ npm install http-server -g  // 全局安裝http-server

$ cd demo2   // 打開要共享的文件

$ http-server // 搭建服務

https://segmentfault.com/q/1010000003926981

⑦ 我是個前端，公司讓我搭建伺服器，如何弄

公司讓我搭建伺服器，這個說來也簡單，如果是專業的數據中心託管伺服器，會幫你搭建系統，配置環境。我們的數據中心就是這樣，工程師可以協助用戶搭建環境，上傳應用，都是免費服務。

⑧ 如何搭建web前端框架

搭建web前端框架步驟如下：
1、確定項目使用的技術
根據項目的需求等來選擇使用的技術（這里以angular4 + typsescript + nodejs+mongodb舉例）
2、新建一個項目的工作文件夾
使用npm init初始化項目，根據問題配置，一般是直接回車使用默認配置,生成package.json文件
3、新建一個index.html頁面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript

6、新建webApp目錄，這裡面放的是所有html頁面和js代碼，首先得有個入口文件，與system.config.js配置文件中的入口文件名一樣，app.mole.ts，裡面引入了所有js文件，不被引入的在載入時都不會被載入
7、打包(將代碼壓縮，使程序運行速度更快）

⑨ 雲伺服器部署前端服務

yum install -y nginx

進入/etc/ngin文件夾，並且新建自己的配置目錄如：myconfig，並且進入此目錄，新建一個配置文件如：ghmall.conf，編輯以下內容並且保存：

上傳前端文件（執行npm run build後，項目下會生成一個dist文件夾）至該配置文件中配置的地址如：/usr/portal/ghmall-portal/dist

進入/etc/ngin文件夾，編輯配置文件：vim nginx.conf

修改為自己的server配置：

server {

      listen 9527;

      server_name localhost;

      location / {

        root /usr/portal/ghmall-portal/dist;

      }

      location /ghmall/ {

        proxy_pass http://localhost:8118;

      }

然後重新啟動nginx：nginx -s reload

輸入systemctl start nginx開啟 nginx 服務

瀏覽器上輸入yourIpAdress:9090/便可以訪問你的頁面了

另外systemctl status nginx可以查看 nginx 的運行狀態

以及systemctl stop nginx可以關閉 nginx 服務

⑩ nodejs搭建web伺服器就是這么簡單！

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。（nodejs官網上的介紹），正如官網上介紹的那樣，nodejs確實很牛！怎麼個牛法？看看下面的代碼就知道了。

//引入http模塊

var http = require("http");

//設置主機名

var hostName = 飗.0.0.1'

//設置埠

var port = 8080;

//創建服務

var server = http.createServer(function(req,res){

res.setHeader('Content-Type','text/plain');

res.end("hello nodejs");

});

server.listen(port,hostName,function(){

console.log(`伺服器運行在http://${hostName}:${port}`);

});

短短幾行代碼就把一個簡單的web伺服器搭建完成了，為了驗證效果，我們在瀏覽器請求，結果如下

運行成功！

到此為止，一個web伺服器就建立成功了！ 沒錯就是這么簡單，然後我們就可以寫個html界面愉快的玩耍了，哈哈哈！果斷的寫了一個html頁面來請求一下我們的web伺服器。

代碼簡單，點擊p獲取數據並將伺服器返回的數據展示。好了，我們運行一下demo.html文件，我擦來！居然出現了……

很明顯，通過jquery請求不到數據，這是因為跨域請求的原因。我們的web伺服器並不支持跨域請求，所以報錯了。解決方式：在伺服器的響應頭文件里加上如下代碼：

再次重啟伺服器，運行demo.html，顯示結果很是令人欣喜！

通常請求伺服器都會拼接參數的，最常用的就是get請求，post請求。很明顯，我們現在的代碼還不能支持。express框架很好的封裝了nodejs的http模塊，使我們用起來非常的簡單。

引入express ：$ cnpm install express –save

使用方式變化不大，通過express（）方法開啟服務，然後在通過get方法來設置匹配參數的路由，通過在回調函數的req中可以獲取請求參數和地址。post請求也是類似，不過有不同的是，post請求在獲取參數的時候要引入body-parser 中間件，用於處理 JSON, Raw, Text 和 URL 編碼的數據。

運行結果：

完整的get以及post請求就是以上了。下一篇文章會結果fs文件模塊介紹http是如何返迴文件的，敬請期待！！

學習從來不是一個人的事情，要有個相互監督的夥伴，想要學習或交流前端問題的小夥伴可以私信「學習」小明加群獲取2019web前端最新入門資料，一起學習，一起成長！