為你的nuxt專案掛上https吧
如果你不知道怎麼建立nuxt專案請參考
環境說明:
本次執行的環境全部在docker底下,專案包含laravel開發的API、mysql server,以及nginx server、前端nuxt專案
全部都在docker環境底下執行
邏輯概念 :
因為nuxt專案要掛上https依照官網的做法有點麻煩,一直沒有成功
詳細資料可以參考:
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-server
https://ithelp.ithome.com.tw/articles/10230052
後來找到比較退而求其次的做法,就是透過nginx做reverse proxy
讓nginx來處理SSL,然後再把資料轉傳至nuxt build好的3000 port上
資料準備 :
先進入docker nginx 來產出csr檔案,可以參考這邊怎麼做
Generating a Certificate Signing Request (CSR) in Ubuntu 16.04
關於SSL憑證如何產生就不再多說明,這邊舉例透過SSL for Free取得的憑證是ca_bundle.crt以及certificate.crt
如何把這兩個放在ngix上也可以參考官方文件,基本上照做即可
https://help.zerossl.com/hc/en-us/articles/360015620100-Installing-SSL-Certificate-on-NGINX
nginx config :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
server { listen 443 ssl default_server; server_name MY_DOMAIN_NAME; # 憑證與金鑰的路徑 ssl on; ssl_certificate /etc/ssl/certificate-ssl.crt; #這個是教學中cat合併起來的檔案 ssl_certificate_key /etc/ssl/private.key; location / { proxy_pass http://MY_DOMAIN_NAME:3000; # 伺服器程式位址與連接埠 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; } } |
原則上不難懂,就是443 port由nginx來處理SSL,接著proxy_pass到nuxt已經build好的3000 port上
就完成了,才怪~
特別要注意的是,nuxt掛上了https之後,如果你的資料來源API URL不是https,那麼nuxt在切換頁面的時候
就會被瀏覽器擋下來,因此最後記得把資料API的URL也一起掛上https吧
如果你跟我一樣,都是在docker環境下開發,那麼剛剛產生的憑證就直接拿來放在資料api的nginx伺服器吧
當然,前提是nuxt reverse proxy跟資料api伺服器是同一台nginx
同場加映 :
https架設起來後,其實原本的http還是可以連線的,那要怎麼把連到http的用戶全部轉到https呢?
nginx再加一個設定即可
1 2 3 4 5 6 7 8 9 10 11 |
server { listen 80 default_server; server_name MY_DOMAIN_NAME; return 301 https://MY_DOMAIN_NAME$request_uri; } |
用return 301轉到htpps即可