服務器從安裝到部署全過程（二）

OK! 上一篇文章中大概嘗試安裝mysql、nginx、nodeJs、pm2 的一些過程以及在配置中出現的問題還有一些解決方式，那麼在本次過程嘗試中，將進一步進行服務器的基礎配置，以及前端應用 node、pm2 部署

nginx

通過上次 nginx 已經安裝至服務器中了，在這裏面主要介紹一下部署相關所須要的配置，例如：監聽端口、服務轉發、靜態資源、ssl 證書（https） 的配置

靜態資源

在咱們沒有後端服務的時候，只是想要寫一些demo或者靜態頁面時，就可使用nginx做爲靜態資源服務器，能夠被外網訪問到，如下就是 具體的配置了，能夠在nginx.conf 中創建二級域名，來搭建。

http {
	server {
		listen			80; # 監聽的端口號
		server_name		static.scrscript.com # 轉發的名稱 也就是二級域名 不過二級域名雖然不須要從新備案可是 域名解析要有 static 關鍵字
		location /  {
			root		/cloud/static
		}
	}
}
複製代碼

說明： 監聽的 80 端口 而後 轉發名稱爲 server_name 所對應的靜態路徑爲 /cloud/static/ 其實就是 location root + localtioon name 這樣就nginx就能夠讀取到 /cloud/static/ 目錄下的文件了，server_name 設置二級域名時前綴後面最好跟的是本身的域名 自定義前綴+本身的域名，而域名解析最好要加上*得以匹配其餘二級域名來訪問

服務器靜態的資源的轉發 其實有兩種寫法:

location / {
	root /cloud/static # 這種寫法 主要是 location root + location name
	# alias /cloud/static # 這種寫法就睡 就是直接location alias 的路徑信息了
}
複製代碼

檢驗一下

服務轉發

當咱們有後端服務時， 咱們那麼咱們能夠經過nginx的轉發配置，來讓咱們的網站能夠被訪問到

http {
	# 使用upstream（上游）模塊
	# server 監聽的端口
	# weight 權重
	# max_fails 最大容許失敗數
	# fail_timeout max_fails次失敗後，暫停時間
	upstream blog {
		#ip_hash;
		server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
	}
	
	server {
		listen			80 default;
		server_name		_;
		location / {
			proxy_pass: http://blog;
		}
	}
}
複製代碼

說明：在請求的過程當中 若是請求的地址 與 server_name 匹配上那麼就會採用這個配置 若是都不匹配 那麼就會先行查看 listen 監聽的域名 後有default 配置項的，注意 default 只能寫一個。

轉發說明：

1. upstream 中的 server 監聽的是服務器中啓動的端口
2. 當請求匹配上 server server_name 時 就會 進行匹配 location
3. 在匹配成功 location 中的反向代理proxy_pass 爲 http:// + upstream 時
4. 就會代理到 upstream 中的 server 監聽的端口

檢驗一下

nginx 配置SSL（https）

日常咱們部署的時候，會發現瀏覽器的地址欄會有(http://) 而後會有不安全的字樣, 哼～！做爲強迫症但是不想有這種字樣，那麼咱們就來配置https 安全吧

首先要先去購買 ssl 證書

固然仍是要買免費的啦，我的需求，嘿嘿～

1. 當購買完成之後，須要必定時間來等待證書籤發，若是簽發完成了之後，就來下載證書信息
2. 由於咱們轉發是使用 nginx 來寫的 因此應該使用 nginx 版本證書類型，下載完成後，須要把這些證書放在服務器中，固然證書的位置仍是要放在 nginx.conf 所在的文件夾中
3. 而後咱們就開始 修改 nginx.conf 文件吧

http {
	# 使用upstream（上游）模塊
	# server 監聽的端口
	# weight 權重
	# max_fails 最大容許失敗數
	# fail_timeout max_fails次失敗後，暫停時間
	upstream blog {
		#ip_hash;
		server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
	}
	
	server {
	    listen 443 ssl; # 必定要開啓 443 服務器端口
	    server_name xxx.com;  # 須要ssl的域名
	    ssl on;
	    # root /cloud/node/;
	    # index index.html index.htm;
	    ssl_certificate  cert/a.pem; # ssl 證書在服務器中相對於 nginx.conf 的路徑
	    ssl_certificate_key cert/a.key; # ssl 證書在服務器中相對於 nginx.conf 的路徑
	    ssl_session_timeout 5m;
	    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	    ssl_prefer_server_ciphers on;
	    location / {
			proxy_pass http://blog;
	    }
	}
	
	server {
		listen			80 default;
		server_name		_;
		rewrite ^(.*)$  https://$host$1 permanent; # 重定向到 https
		location / {
			proxy_pass: http://blog;
		}
	}
}
複製代碼

注意必定要 重啓 nginx nginx -s reload

哈哈哈哈 小鎖 還有 https

前端部署

在這裏 着重來講一下 vue 項目的部署過程，還有 html 文件怎麼在瀏覽器中訪問到

html 靜態資源訪問

其實在上面 nginx 中，咱們配置了 nginx 靜態資源服務器，其實靜態資源的部署 很是簡單 就是直接把 html 文件 放在靜態資源所配置的目錄就能夠了， 這樣咱們平時寫的項目 或者 demo 均可放在這個目錄下，來實現瀏覽

vue 單頁應用部署

blog 的 後端是使用的是 node-express 腳手架，在 express 腳手架中 express.static 定義的是 靜態資源所在的位置，咱們能夠直接放在 項目的根目錄下 而後啓動項目 就能夠直接訪問到了。
靜態資源訪問路徑： app.use('' ,express.static(path.join(__dirname, 'dist')));
請看個人項目結構

上傳至 服務器 後 咱們能夠用 pm2 來啓動 達到負載均衡, 守護進程的效果 pm2 start xxx

檢驗一下

vue nuxt 部署

nuxt 是 vue 的 服務端渲染，有利於 seo 的服務端渲染應用框架，做爲前臺應用 固然是想要本身寫的文章 能讓更多人搜索到，nuxt 固然是個人不二之選，哈哈哈哈，OK 咱們來講下 nuxt 如何來部署吧

首先 咱們應該先給 nuxt 應用執行打包命令 npm run build 打包完成後，咱們能夠把有用的文件事先剔除出來

下面請看個人文件目錄

先上傳至服務器而後 npm install or cnpm i

而後進入到相應的 應用文件目錄 執行 pm2 start npm --name "進程名稱" -- run start

部署完畢 blog nuxt

連接

配置nginx靜態服務器

nginx server 匹配順序

nuxt 部署參考

結語

基礎的配置 基本上已經走完一遍了，其實若是是 部署頻率低的狀況下 那麼這樣一遍遍部署 實際上是費不了多大事，可是呢，在初期的時候總有很多東西要改，那這樣一遍遍部署 不只繁瑣 並且還浪費咱們 寶貴的時間那麼，下次我將配置 docker and jenkins 自動化部署，省時又省力～，哈哈哈