服務端入坑——從創建本身的線上網站開始

時間 2019-11-24

標籤服務創建本身線上網站開始欄目網站開發简体版

原文原文鏈接

作前端兩年了，對服務端所知甚少，一直想學習一些服務端的知識。學習了一些服務端語言後，我打算從本身創建一個線上網站開始本身的服務端實踐之路。html

思路

學習一門服務端語言和他的 Web 框架，我是作前端的，JavaScript 用的比較多，因此選擇了 Node.js，框架選用了 Express。能在本地跑一個「Hello World」的頁面就行。
買一個域名。我是在 godaddy.com 上買的，zangjiabin.me 第一年 3.5 美刀。
購買一個雲計算服務。通俗點說就是買一個雲服務器，用來運行咱們的代碼。我選了 aws EC2，它有一個免費套餐，第一年基本不用花錢。
有了雲計算服務咱們就能夠配置本身的虛擬主機了，通俗點講就是裝機。選擇操做系統，安裝基本的軟件。
把咱們的代碼部署到咱們的虛擬主機上，啓動服務。
讓咱們可使用域名來訪問咱們的虛擬主機。
讓咱們的網站能夠用 https 來訪問。

你們可能使用的 Web 框架，域名服務商和雲計算服務商不同，但上面的思路是通用的。前端

啓動 EC2 實例

首先註冊並登陸 aws 帳號，以後進到 EC2 服務的主頁。像下面這樣，點擊紅色區域的「Launch Instance」,開始創建實例。 node

點擊後會進到選擇主機模板的頁面，我選的是 Ubuntu, 以下圖。

點擊後選擇主機配置，默認選擇免費的那一款，而後點擊「Review and Launch」，以下。

點擊「Lunch」。

點擊後會彈窗提示讓咱們建立一對祕鑰，後期當咱們用 ssh 遠程登陸咱們的主機時，咱們須要這樣一對祕鑰做爲登陸憑證。選擇「Create a new key pair」，對它進行命名，而後下載到本地保存好。作完這些後，在頁面中點擊「Lunch Instance」

設置安全策略和靜態IP
如今咱們的主機安全策略默認只接受 ssh 訪問，咱們須要開啓 http 訪問。另外，咱們還須要給主機分配一個公網能夠訪問的靜態IP。
首先進入到 EC2 的控制檯，能夠看到咱們正在運行的實例。

注意左邊側欄的「Security Groups」和「Elastic IPs」。這兩個選項分別對應「安全策略設置」和「靜態 IP 設置」。上圖中被選中的那個實例是咱們剛剛建立的，向右滑動，能夠查看到它正在使用的「Security Group」，點擊進入到該「Security Group」的設置項。

點擊上方「Action」按鈕，選擇「Edit Inbound Rules」,彈出圖示彈框，點擊「Add Rule」, Type 選擇「All Traffic」，Source 選擇「Anywhere」(這樣作並不安全，但能夠保證咱們用各類方式都能訪問到咱們的主機，後期能夠針對性的優化)。點擊「Save」按鈕保存。
進入「Elastic IPs」頁面，點擊「Allocate new address」，申請一個新的靜態IP地址。

如圖，申請成功後，咱們須要將這個 IP 和咱們的主機關聯起來。選中咱們建立的 IP, 點擊上方「Actions」，點擊「Associate address」。進入下面的頁面。

按照提示選擇咱們要關聯的主機，而後點擊「Associate」。沒意外的話咱們的主機就有了它的公網靜態IP。

使用 ssh 鏈接遠程主機

ssh -i ~/.ssh/ubuntu_key_pair.pem ubuntu@3.16.85.11python

注意，上面的命令中，-i 後面跟的是你的主機祕鑰的路徑。最後的 ubuntu@3.16.85.11 中，3.16.856.11 是咱們主機的靜態 IP，ubuntu 是主機中的用戶名。選擇 ubuntu 系統做爲主機模板的，默認是這個用戶名。鏈接成功後以下圖示 linux

沒有意外的話，你如今能夠操做本身的主機了！🎉

安裝 Nginx

ssh 鏈接到遠程主機後，執行下列命令安裝 Nginx。nginx

sudo wget http://nginx.org/keys/nginx_signing.key
sudo apt-key add nginx_signing.keygit

wget 是 Linux 系統中下載文件的軟件工具。apt 是 Linux 系統中的軟件管理包。這一步大概是將 Nginx 的簽名添加到 apt 的簽名庫中。防止安裝時沒有權限。github

sudo nano /etc/apt/sources.listweb

將下面兩行添加到文件底部。express

deb http://nginx.org/packages/ubuntu xenial nginx
deb-src http://nginx.org/packages/ubuntu xenial nginx

source.list 文件記錄了 apt 安裝與更新軟件的地址。這一步至關於告訴 apt 從哪裏安裝 Nginx。保存 source.list 文件，而後執行下面的命令

sudo apt-get update
sudo apt-get install nginx

這一步是安裝 Nginx。

sudo service nginx start

這一步是啓動 Nginx
關於在 Linux 下安裝 Nginx 的更多內容能夠參考這裏
完成上面的操做後，在瀏覽器中訪問咱們的靜態 IP，能夠看到下面的頁面。

使用域名訪問網頁

到這一步咱們可使用靜態 IP 訪問咱們的網頁了。可是在瀏覽器中輸入 IP 地址來訪問咱們的網頁一點都不酷。下面咱們要讓以前購買的域名派上用場。
進入到 aws Route 53 控制檯。選擇「Hosted zones」選項頁

點擊「Create Hosted Zone」

輸入你的域名，點擊「Create」。

點擊「Create Record Set」。Name 欄不填，Value 填上 IP 地址。點擊「Create」。而後會建立出入上圖左邊第一條，即主域名對應的 IP 地址。仔細看第二條，即 Type 爲 NS 的那一條，裏面 Value 中的4個地址就是咱們主域名的DNS服務器地址。當咱們在瀏覽器中輸入主域名時，DNS服務就會去裏面4個服務器去查詢域名對應的 IP 地址。
另外，我用 Godaddy 購買域名時，域名服務商已經給這個域名指定了DNS服務器地址，須要到 godaddy.com DNS服務器地址改成圖中對應的四個地址。以下圖。

如今在瀏覽器中輸入域名便可看到 Nginx 的歡迎頁面。將Godaddy購買的域名與 aws EC2 主機關聯，主要在於 DNS 服務器地址的關聯。感興趣的朋友能夠看一下這裏。

啓用 HTTPS

若是你在 Chrome 瀏覽器中訪問你的域名，他有可能會提示「此網站沒法提供安全鏈接」，緣由是 Chrome 強制用 HTTPS 訪問全部的域名。如今市面上全部的網站都是 HTTPS 的，沒有進行安全加密的已經不多了。咱們能夠經過下面簡單的幾步操做爲本身的網站啓用 HTTPS。 ssh 鏈接到遠程主機後，執行下面一系列命令。

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

上面這堆命令看起來很複雜，我也不是很明白。我簡單的理解爲安裝 Cerbot 軟件。

下面咱們須要修改一下咱們的 Nginx 配置。

sudo nano /etc/nginx/conf.d/default.conf

將「server_name」中的「localhost」替換成你的域名。像下面這樣。

保存文件，而後執行下面的代碼，域名換成你本身的域名：

sudo certbot --nginx -d zangjiabin.me

成功後，你就能夠用 HTTPS 訪問你的域名了

啓動 Node.js 服務

最後，咱們須要開始創建咱們的 web 服務。
首先修改 Nginx 配置，像下面這樣，將其中的4個域名換成你的域名。
#
server {
listen 80;
listen [::]:80;
server_name zangjiabin.me;
return 301 https://$server_name$request_uri;
}

server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name zangjiabin.me;
location / {
proxy_pass http://localhost:3000;
}

ssl_certificate /etc/letsencrypt/live/zangjiabin.me/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/zangjiabin.me/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
ssl_session_cache shared:SSL:5m;
ssl_session_timeout 1h;
add_header Strict-Transport-Security "max-age=15768000" always;
}
#
如圖：

保存文件，而後從新啓動 Nginx

sudo nginx -s reload

上面的配置文件，主要的意思是將全部的 HTTP 請求轉爲 HTTPS 請求，而後全部的請求最後都會被轉發到本地的 localhost:3000 服務上。也就是說咱們的 Web 服務最終將運行在 localhost:3000 上。
下面咱們將在 loalhost:3000 上創建咱們的 Web 服務。
執行下面兩個操做創建咱們的工做目錄。

mkdir /home/ubuntu/app
cd /home/ubuntu/app

安裝 Node.js 版本管理工具 nvm。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash
. ~/.nvm/nvm.sh

安裝成功後，執行

nvm ls-remote --lts

查看最近的長期支持版本。而後安裝該版本 Node.js

nvm install v8.12.0

執行下面的代碼安裝 express-generator 用來生成 express 應用。

npm install express-generator -g

Express 是基於 Node.js 開發的一款 Web 框架。執行下面的代碼生成 Express 應用。

express myapp
cd myapp
npm install
npm run start

這樣啓動的服務有一個問題就是不能關閉當前的界面，一旦關閉服務就終止了，咱們應該設法讓 Node 服務在後臺運行。