Create by jsliang on 2018-12-21 13:34:13
Recently revised in 2018-12-23 12:30:38

 Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更精彩文章的動力！GitHub 地址

 本篇文章重點：

• 雲伺服器購買及使用
• 域名購買、備案及解析
• Nginx 配置多個二級域名及解析網頁
• Node 服務端的部署及 MySQL 的安裝

 最終效果：

目錄	介紹
jsliang.top	jsliang 的網站列表
cv.jsliang.top	通過 ECharts + Vue 打造個人線上簡歷
playregex.jsliang.top	通過遊戲來了解正規表示式
lucky.jsliang.top	悠閒刮刮樂，僅供娛樂
deadline.jsliang.top	jsliang 的工作時間軸
webpack.jsliang.top	Webpack 學習成果，Webpack 多頁面配置
game.jsliang.top	一個小遊戲，只相容 PC，適配移動端失敗
company.jsliang.top	Node 打造企業網站，支援註冊、登入及留言
work.jsliang.top	jsliang 工作成果，給領導或者工作小夥伴檢視

一 目錄

 不折騰的前端，和鹹魚有什麼區別

目錄
一 目錄
二 前言
三 雲伺服器及域名
3.1 雲伺服器
3.2 域名
四 Nginx 代理前端頁面
五 MySQL 安裝及部署
六 Node 提供介面服務
七 總結

二 前言

返回目錄

 作為一枚程式猿，
 第一句程式設計必須是 Hello World!，
 第一個願望必須是 My Blog，
 如果不是，當我沒說。

 關於雲伺服器：
 作為一枚能 “折騰” (能作死) 的人，jsliang 玩過騰訊雲伺服器和阿里雲伺服器。

• 騰訊雲伺服器。如果你是大學生，那麼騰訊雲不可錯過，[雲+校園]學生雲伺服器體驗套餐 10 元/月。這個活動，其實一開始的價格是 1元/月，1 年也就 12 元，一餐飯的價格都不到，jsliang 用了兩年，直至 jsliang 畢業。後來，enm... 你知道的，變成了 10 元/月，騰訊雲的意圖我就不猜了，一年就是 120 元，雲伺服器配置是 1 核 2 G + 1 M頻寬，對於初學者來說，完全夠用了。
• 阿里雲伺服器。jsliang 目前正在使用的伺服器就是雲伺服器。也許有的小夥伴們應該瞭解過雲伺服器，也知道在雙 11 雙 12 的時候，不僅有瘋狂的淘寶購物，還有阿里雲伺服器的推送，說不定小夥伴已經買了一臺給自己了，但是一直沒用上。

 如果小夥伴需要訂購雲伺服器來存放像 jsliang 個人網站類的靜態或者有 Node 後端的網頁，但卻不知道怎麼選擇，可以加 jsliang QQ：1741020489 諮詢，下面是一些優惠推廣：

 騰訊雲推廣：

 新使用者點這裡：

• 新客戶無門檻 2775 元代金券

  

 購買雲伺服器：

• 12 月優惠低至 168 元/年

  

 阿里雲推廣：

 新使用者點這裡：

• 新使用者雲產品 1888 通用代金券

  

 購買雲伺服器：

• 高效能雲伺服器 - 低至 293元/年

  

 購買企業級雲伺服器：

• 企業級高效能雲伺服器

  

三 雲伺服器及域名

返回目錄

 雲伺服器和域名都是需要備案的：阿里雲備案管理
 小夥伴可以通過上面連結瞭解下備案相關知識。

3.1 雲伺服器

返回目錄

 如果你已經通過上面推送購買了雲伺服器，或者你本身就有云伺服器，那麼我們開始講解下 jsliang 對雲伺服器的使用：

 我們瞭解下在哪裡可以看到自己的雲伺服器：

1. 在阿里雲首頁點選控制檯。

2. 點選左側展開側邊欄，點選雲伺服器 ECS。

3. 點選例項，選擇雲伺服器所在地區，便出現了自己買的雲伺服器例項。

 我們需要記住有五大塊：

• IP 地址。IP 地址 可以讓你通過 Win + R，輸入 mstsc 後，在遠端桌面中，通過輸入公網地址以及密碼，訪問你的雲伺服器，方法詳情。
• 遠端連線。遠端連線 可以直接通過網頁的形式連線雲伺服器，對它進行操作。
• 例項狀態。更多 -> 例項狀態 可以停止、開啟、重啟雲伺服器。
• 磁碟和映象。
  • 如果你感覺 Windows 雲伺服器滿足不了你了，或者你想更換 Windows 系統的其他版本，那麼你可以通過 更多 -> 磁碟和映象 -> 更換系統盤 來更換系統（請先在例項狀態中停止雲伺服器）。方法詳情
  • 如果你覺得你的雲伺服器爆滿了，想重新折騰過，那麼可以通過 更多 -> 磁碟和映象 -> 重新初始化磁碟 進行伺服器的重置。方法詳情
• 網路和安全組。點選 更多 -> 網路和安全組 -> 安全組配置 -> 配置規則 -> 新增安全組規則，從而新增 80 埠的安全組。方法詳情

這裡我們講解的是 Windows 系統對 Windows 雲伺服器的操作，因為 Windows 系統方便操作，所以有著其他系統的雲伺服器的小夥伴，可以考慮將雲伺服器改成 Windows 系統，或者百度、google 查詢其他雲伺服器的部署方式。

 現在，我們講解了雲伺服器的基本操作，我們暫且將雲伺服器這塊內容先放一邊，講解下域名部分。

3.2 域名

返回目錄

 在你使用域名之前，記得給域名備個案；阿里雲備案管理
 如果你沒有域名，可自行購買：萬網域名註冊

 現在我們進入域名控制檯：

 除了備案，其他的都不用理會了，我們直接點選解析：

 上面的圖片中顯示的，都是 jsliang 在 jsliang.top 進行的解析記錄。其中：

• 主機記錄：二級域名開頭，例如 company 對應的就是 http://company.jsliang.top 這個二級域名。
• 記錄值：就是小夥伴雲伺服器的公網地址，在上面章節中提到過雲伺服器的 IP 地址。這是個很重要的玩意，請勿洩露。

 很好，現在我們點選 新增記錄：

 我們只需要填上 主機記錄 以及 記錄值，然後點選 確定 就可以完成一條二級域名的新增了。

下面會講解到如何通過雲伺服器的 Nginx 配置，使二級域名導向伺服器中的指定目錄。

四 Nginx 代理前端頁面

返回目錄

為了保證小夥伴們儘可能地實施順利，jsliang 對自己的雲伺服器進行了 重新磁碟化磁碟 的操作，從而減少中間出簍子的可能。

 現在我們開始配置 Nginx。
 首先，遠端連線我們的雲伺服器。操作方法

雲伺服器配置：
雲伺服器作業系統：Windows Server 2008 R2 企業版 64位中文版
開放埠：80、-1、22、3389

 然後，我們開啟 C 盤，建立這幾個目錄：

• WebFrontEnd：存放前端檔案位置
• WebBackEnd：存放後端檔案位置
• Nginx：存放 Nginx 安裝目錄以及配置
• Node：存放 Node 安裝位置
• MySQL：存放 MySQL 安裝位置

 然後，我們進行 Nginx 的安裝及配置：

• Nginx 下載

由於雲伺服器瀏覽器時 IE，enm...所以我們本地直接下載吧！
PS：可能這也是我為什麼用 Windows 的原因，因為方便複製本機內容貼上到雲伺服器上去。

 我們下載穩定版本，即 nginx/Windows-1.42.2，它會彈窗讓你下載 zip 包，我們先在本機解壓配置好，最後再複製到雲伺服器上的 Nginx 檔案目錄中。

 接著，我們進行 Nginx 的配置解析，先在本地熟悉下目錄。

 在這裡，我們要先了解到：Nginx/conf/nginx.conf 是我們要修改的配置，而 vhost 是我們要新建的目錄，目錄下就是我們二級域名配置檔案，例如 compony.jsliang.top 對應的就是 company_jsliang.conf 檔案。

 然後，我們開啟檔案 Nginx/conf/nginx.conf 進行配置，配置的檔案已有註釋，故這裡不再哆嗦：

Nginx/conf/nginx.conf

#user nobody;

# 跟 CPU 有關，不用修改
worker_processes 1;
events {
  # nginx 最大負載量
  worker_connections 1024;
}
http {
  
  # mime type 對映
  include mime.types;
  default_type application/octet-stream;
  
  # 啟動高效傳輸檔案的模式
  sendfile on;
  
  # 長連線 timeout
  keepalive_timeout 65;
  
  # http 結構下可以有多個 server。請求進來後，確定哪一個 server 由server_name 決定，這裡我們通過 include **檔案 來進行多網址配置
  server {
    
    # 監聽埠
    listen 80 default_server;
    
    # 識別的域名
    server_name localhost default_server;
    
    # 一個關鍵配置，與 URL 引數亂碼問題有關
    #charset utf-8;
    root html;
    
    # 監聽的檔案
    location / {
      index index.html index.htm;
    }
    
    # 404頁面
    # error_page 404 /404.html;
    # 重定向埠錯誤頁面到50*.html頁面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
  }
  
  # 把其他 server 配置寫到其他檔案，方便管理
  include ../vhost/*.conf;
}
複製程式碼

 在上面，我們通過最後一句話 include ../vhost/*.conf 可以知道，我們將配置檔案放到了 vhost 目錄中，從而方便我們下次新增二級域名。

 如果小夥伴希望多瞭解點 Nginx 的知識，可以看下下面的文章。
 如果小夥伴們單純就想快點部署完，請跳過這段話。

• Nginx 多域名配置
• worker_processes：程式數（1）
• worker_connections：最大負載量（1024）
• sendfile：啟動高效傳輸檔案的模式（on）
• keepalive_timeout：長連線（65）
• include：（mime.types）
• proxy_pass：要轉發的地址（http://www.a.com:3000）

 再接著，我們在 Nginx 目錄下新建 vhost 目錄，然後新增 company_jsliang.conf、work_jsliang.conf ……等目錄，命名不重要，好記且它是 *.conf 就行。

*.conf

server {
  # 監聽的埠，80 即可
  listen 80;
  
  # 監聽的網址，這裡填寫你的網址，我的就有 company.jsliang.top 等……請確保該域名已經在阿里雲、騰訊雲、百度雲等進行了域名解析。
  server_name company.jsliang.top;
  
  # 監聽的目錄
  root C:\WebFrontEnd\company;
  
  # 監聽的檔案
  location / {
    index index.html index.htm;
  }
}
複製程式碼

 看到這個，小夥伴們可能就明白了：當我們訪問 company.jsliang.top 時，Nginx 就會監聽我們在 C 盤下 C:\WebFrontEnd\company 目錄下的 index 或者 index.html 或者 index.htm。
 當小夥伴們回想起我們在域名解析時的操作時，會更加清晰：

• 域名解析到公網 IP -> Nginx 監聽到了來自瀏覽器的請求 -> Nginx 查詢關於這個請求的配置 -> Nginx 找到這個配置，發現應該定位到 ** 目錄 -> Nginx 將資訊返回給瀏覽器。

 配置完成後，我們將檔案複製並替換到雲伺服器上去。

記得在 WebFrontEnd 上存放你的前端網頁檔案喔，要不然最後執行 Nginx 你會發現好像沒成功一樣~

 再然後，我們進入目錄 C:\Windows\System32\drivers\etc，修改下 hosts 配置並儲存：

hosts

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

127.0.0.1  jsliang.top
127.0.0.1  company.jsliang.top
127.0.0.1  cv.jsliang.top
127.0.0.1  deadline.jsliang.top
127.0.0.1  game.jsliang.top
127.0.0.1  lucky.jsliang.top
127.0.0.1  playregex.top
127.0.0.1  webpack.jsliang.top
127.0.0.1  work.jsliang.top
複製程式碼

 最後，我們再雙擊 Nginx 目錄中的 nginx.exe，執行 Nginx。
 這時候，有的小夥伴可能發現有一個小框一閃而過，然後以為沒開啟成功？別急，開啟 Windows 工作管理員你會發現它已成功執行了。

如果小夥伴要新增一個二級域名，那就需要去 Windows 工作管理員將 Nginx 的兩個程式結束，新增完畢後再重啟 Nginx。

 這時候，我們開啟 company.jsliang.top 進行檢視，發現它已成功部署啦：

 後記，附上我學習 Nginx 時的其他參考：

• Nginx中文文件
• Nginx 在 Windows 上安裝及 Nginx 的配置及優化
• Nginx 基本配置與引數說明

五 MySQL 安裝及部署

返回目錄

 關於 MySQL 的安裝，我在另一篇文章中有記錄：

• MySQL 的安裝及配置

 現在，我們直接在本地下載安裝包，下載完後直接複製到雲伺服器上，按照教程一步一步配置即可。

六 Node 提供介面服務

返回目錄

 首先，我們下載 Node 的 msi 安裝包，並複製到雲伺服器上：下載地址

 在這裡要注意的是，我們下載的是 64 位的 msi 安裝包，因為在上面的 Nginx 配置的時候，我們講過我們的雲伺服器是 Windows Server 2008 R2 企業版 64位中文版。

 我們只需要一路 Next，在配置安裝位置的時候，將位置放在我們建好的 Node 目錄中即可。

 然後，我們通過 win + r -> cmd -> cd C:\WebBackEnd -> node -v 檢視我們的 Node 版本，jsliang 這裡顯示的是 v10.14.2，表明我們安裝成功了。。

 接著，我們將我們的 Node 程式碼複製到 WebBackEnd/NodeBase 目錄中，同時控制檯 cd 到這個目錄：cd NodeBase，然後 npm i 安裝依賴包，並 node index.js 從而開啟專案。

 最後，因為我們 Node 專案開啟的是 8888 埠，所以我們需要在雲伺服器的配置規則上配置好 8888 埠：方法詳情

 至此，我們的 Node 配置完畢併成功開啟，如果小夥伴們想知道 Node 如何連線 MySQL、Node 如何使用、cnpm 以及 pm2 是什麼，請檢視 Node 基礎。

記得 npm i 安裝專案依賴包以及配置雲伺服器中相關的埠喔~

七 總結

返回目錄

 經過一系列的折騰，我們的雲伺服器終於配置完畢了，接下來就可以愉快玩耍啦~
 當然，如果小夥伴嫌自己配置麻煩，可以去阿里雲的雲伺服器市場看看有沒有裝好的 Node + MySQL 環境喔~

 最後叨一句：需要購買雲伺服器的小夥伴可以諮詢我 QQ 1741020489 哈~

jsliang 的文件庫 由 樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.om/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。