網頁

前端真的不太行，還在研究中
目前在研究flexbox，使用flexbox排版蠻方便的
只能說每遇到一個坑，就是給自己的一個學習機會吧。。。

express

今天把之前在VPS上的網站重新用express-generator重寫一次，之前並沒有使用MVC的方法來寫網站，
各種router處理，各種middleware、甚至連data處理的部分都全部塞在同一個app.js(我甚至還沒把不同的router分開處理)，
導致代碼的結構很亂，可能幾個禮拜後就看不懂自己在寫三小了
而且目前已經有幾個代碼我現在已經看不懂了

最近接觸express-generator，發現很好用
使用express-generator可以快速產生一個express的框架，常用的依賴包都有自動寫在package.json裡面
只要下個npm install命令直接全部裝完，
express主要的instance app.js內，各種常用的middleware都幫事先設定好，不用再一個一個慢慢寫
Router的部分則會放在routes的目錄內，直接在裡面新增就好
算是很方便的

不過以express-generator方式產生的專案，並不會分開路由控制、control、model
而是全部都在router裡面，所以要使用MVC的架構來開發的話最好還是自己設定

而這次主要把之前架在VPS上的網站Router再模塊化，不同組件做不同的事，不要全部塞在一起
不過目前沒有把Controller部分與router部分分開，只有把資料處理部分分出去而已，
因為本身網站並沒有要幹什麼複雜的事情。。。

WebSocket

目前寫chat.thuocduame遇到的
如果把websocket寫在使用express-generator產生的框架裡，
必須要改一下./bin/的www檔案，不想另外開一個server給ws
所以ws必須要attach到express的server下，
而我想在某個router下使用ws，問題就來了
建一個ws必須要給定一個http server的實例，
但是問題是在默認的情況下，是在www這個檔案建立http的
app在app.js中處理好一切路由，export出來，在www裡面將app attach到http實例上
所以想要建立ws就必須要跟將ws建在www裡面
不過問題是我TM就是想在router處理中順便處理ws。。。
找了express-ws發現這是一個坑，我按照官方的demo下去操作，前端連線過去還是一直顯示404，是在4三小，草
想了一個折衷的方案，就是把http.createServer跟express.app()寫在app.js中，像這樣

...
var http = require('http');
var ws = require("ws");
...
var server = http.createServer(app);
wss = ws.Server({
	server: server,
	path: "某個route"
});
...
//wss再require某個函式做處理
module.exports = {
	app: app,
	server: server
};

目前能想到的方法就這樣了，依照express-generator的寫法來看，感覺這樣不太好
主要的處理程式app.js跟http.createServer是分開成為不同的模塊的
不過這種寫法把他們放在一起= =
還有express-ws這鬼東西坑了我好幾的小時，草

nginx

上網查了一下nginx的用法，掛個反向代理來處理請求，
nginx的用法目前還需要多研究，主要是
不過光是解決SSL證書配置的步驟就簡便很多，
直接將證書丟給nginx，後端不用動也沒關系
只要給nginx知道後端在哪裡就好，nginx會自動設定
nginx也可以隱藏後端的真實port，用戶端的請求由nginx來代理就行
http的請求也可以寫個簡單的幾行代碼，自動redirect到https
強制所有的連線都經過https，
是一個功能很強大的軟體，
現在剛接觸，也還在研究中
之後寫網站都要使用nginx做反代了
毛子還真牛逼

目前我的配置是這樣的

server {
    listen 80;
    server_name poynt2005.cf;

    return 301 https://$host$request_uri;
}

這邊可以讓nginx監聽80端口，只要有從80進入的請求，
回傳一個301redirect指向https

server {
     listen 443;
     server_name poynt2005.cf;
     ssl on;
     ssl_certificate	crt目錄;
     ssl_certificate_key	private.key目錄;
     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 / {
		root   #server目錄;
		proxy_pass #指向內部的server
    }
	 
	#提供static file
	location ~ .*\.(gif|jpg|jpeg|png|js|css|ico)$ {
		root   #文件目錄;
		expires 5d;
	}	
}

透過proxy_pass可以將https的請求指向內部的server，內部的server端口就不用讓外部知道了
並且可以透過再default_server設定一個無效的域名的方式，代表這個請求沒有match到任何的域名，

1	server_name _;

然後

1	return 403;

返回一個Forbidden，這樣可以禁止非domain name的請求
很好用的功能

poynt2005's blog

520網頁感想

網頁

express

WebSocket

nginx