為你的nuxt專案掛上https吧

如果你不知道怎麼建立nuxt專案請參考

Laravel+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 :

原則上不難懂,就是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再加一個設定即可

用return 301轉到htpps即可