雲服務器建站 - Node & Nginx & MySQL

時間 2019-11-16

原文原文鏈接

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

Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更精彩文章的動力！GitHub 地址html

【2019-08-16】Hello 小夥伴們，因爲 jsliang 對文檔庫進行了重構，這篇文章的一些連接可能失效，而 jsliang 沒有精力維護掘金這邊的舊文章，對此深感抱歉。請須要獲取最新文章的小夥伴，點擊上面的 GitHub 地址，去文檔庫查看調整後的文章。前端

本篇文章重點：node

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

最終效果：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 工做成果，給領導或者工做小夥伴查看

一目錄

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

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

二前言

返回目錄nginx

做爲一枚程序猿，
第一句編程必須是 Hello World!，
第一個願望必須是 My Blog，
若是不是，當我沒說。git

關於雲服務器：
做爲一枚能「折騰」 (能做死) 的人，jsliang 玩過騰訊雲服務器和阿里雲服務器。github

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

若是小夥伴須要訂購雲服務器來存放像 jsliang 我的網站類的靜態或者有 Node 後端的網頁，但殊不知道怎麼選擇，能夠加 jsliang QQ：1741020489 諮詢，下面是一些優惠推廣：web

騰訊雲推廣：

新用戶點這裏：

新客戶無門檻 2775 元代金券

購買雲服務器：

12 月優惠低至 168 元/年

阿里雲推廣：

新用戶點這裏：

新用戶雲產品 1888 通用代金券

購買雲服務器：

高性能雲服務器 - 低至 293元/年

購買企業級雲服務器：

企業級高性能雲服務器

三雲服務器及域名

返回目錄

雲服務器和域名都是須要備案的：阿里雲備案管理
小夥伴能夠經過上面連接瞭解下備案相關知識。

3.1 雲服務器

返回目錄

若是你已經經過上面推送購買了雲服務器，或者你自己就有云服務器，那麼咱們開始講解下 jsliang 對雲服務器的使用：

咱們瞭解下在哪裏能夠看到本身的雲服務器：

在阿里雲首頁點擊控制檯。

點擊左側展開側邊欄，點擊雲服務器 ECS。

點擊實例，選擇雲服務器所在地區，便出現了本身買的雲服務器實例。

咱們須要記住有五大塊：

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、-一、2二、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 目錄下新建 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
複製代碼