為你的nuxt專案掛上https吧

為你的nuxt專案掛上https吧
#

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

http://www.alvinchen.club/2020/07/17/laravel-nuxt%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b/

環境說明:
#

本次執行的環境全部在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檔案，可以參考這邊怎麼做

https://www.liquidweb.com/kb/generating-certificate-signing-request-csr-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 :

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再加一個設定即可

server {

    listen 80 default_server;

    server_name MY_DOMAIN_NAME;

    return 301 https://MY_DOMAIN_NAME$request_uri;

}

用return 301轉到htpps即可

為你的nuxt專案掛上https吧