如何將本身的網站部署到阿里雲的服務器

時間 2019-11-17

原文原文鏈接

購買阿里雲服務器（安裝ubuntu16.04系統）

登錄阿里雲官網阿里雲官網購買服務器，普通的預裝ubuntu16.04系統便可，通常1核1GB帶寬1Mbps的QPS可達1~3萬,足夠平常使用。在購買前須要填服務器的開機密碼，用戶名默認爲root.固然也能夠選擇不填密碼，買好以後修改。 javascript

購買域名並填寫域名模板解析域名

首先至萬維網選購域名
購買域名解析
阿里雲控制檯填寫域名模板並解析購買的域名，具體操做見雲解析幫助文檔
好比說咱們購買的域名是eljin.xyz,解析到你購買的服務器的ip地址，若是你的網站訪問地址爲www.eljin.xyz, 則須要在域名解析頁面添加一條A記錄，具體如圖

接下來進入備案流程，詳情見備案系統（阿里雲備案比較繁瑣，可是速度比較快，通常10天左右就能夠收到審覈經過的結果）
最後備案經過審覈後便可經過域名訪問咱們的網站了，固然，你得先把本身的項目跑在本身的服務器上的某個端口而且監聽該端口

配置購買服務器的環境(ubuntu16.04)

經過服務器的默認帳號root和購買服務器填寫的密碼登錄服務器，這裏我推薦windows系統下使用xshell或者git bash，mac或者linux使用自帶的終端登錄工具便可,ssh初始默認登錄端口爲22html

ssh root@ip 輸入密碼便可登錄前端

添加我的經常使用帳戶fizz

adduser fizzjava

接下來會提示輸入你的一些信息，這時候已經添加了我的普通帳戶，由於咱們在部署項目時候常常會遇到一些權限問題，因此咱們須要一個擁有sudo權限的帳戶，須要給該用戶升級權限node

sudo gpasswd -a fizz sudo // 將用戶添加到sudo權限組linux

接下來打開/etc/sudoers文件，gedit或者vim都行，這裏直接用vim打開，在# Use privilege specification添加fizz ALL=(ALL:ALL) ALL，意思是fizz的全部權限爲超級管理員全部的命令對於fizz用戶都適用；webpack

sudo visudo 或者 sudo vim /etc/sudoersnginx

注：vim打開的按esc，wq!強制保存， sudo visudo的crtl+X、shift+Y、Enter 依次按下便可保存生效；退出服務器，使用你建立的帳號登錄就能夠啦，試試 sudo mkdir fizz

本地配置無密碼登錄服務器

配置無密碼登錄，無非就是在服務器與本地創建一個相互信任的機制，即本地的公鑰須要被服務器承認，所以須要把本地的ssh公鑰放到服務器的.ssh文件夾的authorized_keys文件中便可；本身電腦本地通常建立了公鑰（若是你使用過github的話），所以須要在新買的服務器上而且是你本身剛建立的帳戶上建立.ssh文件並生成公鑰和私鑰；git

ssh fizz@ipgithub

ls -a看看有沒有.ssh文件夾，沒有的話sudo mkdir .ssh建立.ssh文件夾；而後生成公鑰和私鑰；

sudo ssh-keygen -t rsa

注意，通常此時會出現Enter file in which to save the key (/root/.ssh/id_rsa):問你公鑰和私鑰保存在哪裏，你須要填的路徑爲你剛建立的用戶下面，默認是在root帳戶下，此時你須要在後面打你帳戶的路徑：Enter file in which to save the key (/root/.ssh/id_rsa):/home/fizz/.ssh/id_rsa，即建立好了密鑰對。繼續建立本地公鑰保存在服務器上.ssh文件夾中的文件authorized_keys;

sudo vim authorized_keys

複製本地的公鑰至服務器的authorized_keys文件中便可，而且給authorized_keys添加可讀可寫權限(至少是600)sudo chmod +rw authorized_keys退出服務器從新輸入ssh fizz@ip不須要輸入密碼便可登錄。

本地修改ssh登錄服務器端口

ssh默認的登錄端口爲22，爲了稍微增長那麼點安全性，能夠修改下ssh登錄端口成本身定義的端口，範圍在0~65535(2^16-1)以內，最好在1000以上的，所以1000之內的不少端口都是某些服務的運行端口，這裏定義爲10086:

sudo vim /etc/ssh/sshd_config

改爲 Port 10086便可
注意：修改端口保存以後，重啓ssh服務 sudo service restart ssh;切記不要直接退出本窗口，再新開一個終端窗口試試能不能登錄：

ssh -p 10086 fizz@ip

若是能夠，說明端口修改爲功，不然若是修改錯誤直接退出了，那麼服務器就登不上了！！！

本地添加快捷登錄服務器腳本

這裏針的是對使用Mac系統或者Linux系統的操做:

Mac系統(沒裝zsh)

sudo vim .bash_profile

Mac系統(安裝了zsh)

sudo vim .zshrc

Linux系統

sudo vim .bashrc

在下面添加: alias fizz="ssh -p 10086 fizz@ip"，在終端只需輸入別名： fizz 便可登陸服務器。

服務器主動開啓防火牆ufw和主動防護fail2ban

這一章節主要爲了增長服務器的安全性，涉及到運維方面的東西，通常能夠作到攔截屢次頻繁的惡意請求攻擊，形成服務器堵塞；只開放某些端口；過濾某些信息等，主要是配置防火牆的規則文件iptables.up.rules，這一節對於初學者部署本身的項目不是必須的，所以能夠跳過。固然，我本身也是菜鳥哈哈哈哈😁

防火牆具體配置見；防火牆配置規則
fail2ban安裝與使用配置見如何在Ubuntu 14.04上使用Fail2Ban保護Nginx服務器

服務器安裝代理服務器nginx

Nginx官方介紹

Nginx是一款輕量級的HTTP服務器，採用事件驅動的異步非阻塞處理方式框架，這讓其具備極好的IO性能，時經常使用於服務端的反向代理和負載均衡

安裝過程

sudo apt-get update && sudo apt-get upgrade // 更升級新ubuntu軟件安裝源
sudo apt-get install nginx // 安裝nginx
sudo service nginx start // 啓動nginx服務

此時，nginx已經在你的服務器上跑起來了,關於nginx具體的使用操做和配置參數的意義，這裏推薦一個教程寫得很好，想了解的猛戳一個前端必會的 Nginx免費教程， nginx安裝瞭解完以後，能夠開始把你的項目部署到服務器上了！！！

在Nginx上部署靜態網站項目

部署一個靜態項目很簡單，只須要配置相關配置文件載入重啓nginx服務器便可

首先登錄服務器ssh -p 10086 fizz@ip
進入nginx的代理配置文件中，cd /etc/nginx/conf.d；
建立本身的配置文件，命名本身定義，本人習慣是 網站域名_運行端口.conf，好比個人網站域名爲 fizz.com，而且運行在80端口 => fizz_80.conf；配置詳情以下：

這樣配置不管是輸入域名仍是ip地址，均可以直接訪問到 ~/www/static下面的 index.html文件了,注意配置完成了須要檢查配置是否正確並從新載入啓動nginx服務

sudo nginx -t // 檢查配置文件是否符合規則
sudo nginx -s reload // 從新載入配置文件
sudo service nginx restart // 重啓nginx服務

固然，你得在你本身的目錄下有/www/static/index.html這個文件

cd ~
mkdir www
mkdir static
touch index.html

echo "<!doctype html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /></head><body><p>恭喜你，部署靜態項目成功啦~~~</p></body></html>" > index.html => 將內容寫入至index.html文件中

在你的瀏覽器輸入你的服務器ip或域名試試，大功告成！！！

在Nginx上佈置webpack打包後的前端項目

這個部署流程跟部署靜態項目同樣，webpack打包編譯好線上環境的項目www以後，壓縮成tar包，經過scp命令上傳至服務器，解壓，在conf.d文件夾中配置相應的webfront_fizz_80.conf文件便可，例如：

tar -czvf www.tar.gz www/ // 打包壓縮前端項目www
scp -P 10086 www.tar.gz fizz@ip:~/webfront/static // 上傳至服務器
ssh -p 10086 fizz@ip // 登陸服務器
cd ~/webfront/static // 進入存放的文件夾
tar -xzvf www.tar.gz // 解壓縮
sudo chmod +r www // 給項目目錄增長訪問權限

{
    listen 80;
    server_name webfront.fizz.com;
    location / {
        root /home/fizz/webfront/static/www;
        index index.html index.htm
    }
}
複製代碼

大功告成！！！

在Nginx上佈置nodejs後臺項目

首先得配置nodejs環境

安裝必要的軟件

sudo apt-get install wget curl git

因爲nodejs版本不一樣，其功能支持方面也不同，不一樣項目可能使用的是不一樣的nodejs版本，這時候須要使用nvm去管理nodejs的版本，方便在不一樣版本之間切換，須要安裝nvm,安裝見 Github地址
安裝nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安裝完成以後記得重開一個terminal窗口，登陸服務器,能夠查看nvm版本了

nvm --version

安裝node

nvm install v7.8.0 // 安裝7.8.0版本的nodejs
nvm alias default 7.8.0 // 將7.8.0版本nodejs做爲默認nodejs版本
nvm use 7.8.0 // 使用7.8.0版本nodejs做爲當前nodejs版本

到這裏，nodejs環境安裝好了

配置nginx的conf文件

這裏爲了方便，咱們將如下的nodejs後臺程序部署至服務器

// app.js
const http = require('http');
http.createServer(function(req, res){
    res.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
    res.end("歡迎訪問個人第一個nodejs項目😀")
}).listen(8100, () => console.log("服務已經在8100端口啓動")
複製代碼

接下來有兩種方式來維護nodejs項目
- 上傳nodesj項目至github/碼雲託管，保持服務器上的項目與github該項目同步，實現一鍵更新部署
- 本身利用scp命令把項目上傳至服務器覆蓋更新原項目
二者都須要守護nodejs項目跑在8100端口的進程,這裏咱們藉助PM2來守護nodejs進程。
一鍵部署更新
在須要部署的項目中配置ecosystem.json文件，具體配置教程見PM2項目配置教程，具體同步上傳教程見PM2項目發佈教程；發佈成功以後，每次須要與github項目同步更新的話，能夠到服務器項目的文件夾中運行：
```
git pull
pm2 restart app.js || pm2 restart AppID /*node項目的啓動ID*/
複製代碼
```
scp命令上傳項目覆蓋掉原項目，pm2 start app.js便可

Nginx配置文件

Nginx須要監聽客戶端的網絡請求（通常爲80端口），而後將請求轉發到服務器（本地）的項目所佔用的端口，最後項目接收到請求從而進行響應。基本配置文件以下：

server {
      listen 80;
      server_name 你的域名;  #客戶端訪問的域名，若是有多個，用逗號分開
  
      location / {
          proxy_pass http://127.0.0.1：8100;  #映射到代理服務器（本地)ip和端口
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          Proxy_redirect off;
     }
  }
複製代碼

從新載入nginx配置文件生效，重啓nginx服務便可。最後，整個部署過程結束，這時候訪問已經備案好的域名，便可訪問到本身部署的nodejs項目了！！！