vue發布Nginx配置Https

vue在國內的前端地位可謂是如日中天，由於目前主流的前後端分離式開發，讓許多前端小夥伴不太了解伺服器操作特別是linux，而許多後台開發人員雖然精通伺服器，卻不懂前端框架如何發布。本篇將詳細介紹vue構建靜態檔案發布至linux並配置nginx服務**https，在發布前我們先需要準備以下環境：

下面以阿里雲服務為例，介紹linux服務搭建過程，購買過程省略

yum install nginxubuntu使用命令：sudo apt updatesudo apt install nginx安裝完成後啟動nginx並配置開機自動啟動sudo systemctl start nginxsudo systemctl enable nginx瀏覽器輸入服務ip檢視nginx是否成功啟動，出現以下介面說明安裝成功（ubuntu有差異），需要先開啟80埠，參考下面埠配置

在vue專案目錄下輸入npm run build:prod，複製dist打包檔案上傳至linux伺服器，上傳成功後複製檔案所在路徑，最後配置nginx服務輸入以下命令進入配置nginxvi /etc/nginx/nginx.confnginx配置大致如下：

}修改完成後退出vi並儲存，然後重新整理瀏覽器ip訪問頁面，可以看到nginx服務已經使用http成功**vue發布檔案

圖中可以看到http**下chrome自動提示連線不安全

網域名稱配置以阿里雲網域名稱服務為例，其他**商均大同小異，購買過程省略。

注：網域名稱服務最好和雲服務使用同一**商，如阿里雲網域名稱**會對其伺服器進行優化，速度更優，網域名稱購買後需要實名認證才能使用。

1. 進入阿里雲網域名稱管理控制台-網域名稱列表，選擇你需要解析的網域名稱#

2. 在解析設定中新增一條ipv4記錄#

儲存成功後網域名稱解析配置完成

ssl證書同樣以阿里雲為例，購買過程省略，開發者可以選擇購買個人免費證書。

1. 進入阿里雲ssl證書管理控制台-證書列表，選擇你購買的證書並按步驟提交申請-審核驗證。#

解壓檔案後複製檔案路徑，可以根據需要修改檔名，如檔名太長。

進入nginx按照目錄並修改nginx.conf預設配置cd /etc/nginxvi nginx.conf

1. 開啟nginx 443埠監聽#

將nginx.conf中http節點第二個server配置注釋解除，也就是開啟nginx 443埠監聽。

2. 將ssl_certificate、ssl_certificate_key配置更換為上傳的ssl證書#

3. 修改https**根目錄檔案#

將root替換發布的vue靜態檔案目錄

4. 配置http請求自動跳轉https#

在nginx 80埠配置中，也就是第乙個server節點配置新增一行自動跳轉rewrite ^(.*)$ https://$host$1 permanent;

完整配置如下#

copy

server 
error_page 404 /404.html;
location = /404.html 
error_page 500 502 503 504 /50x.html;
location = /50x.html 
}# settings for a tls enabled server.
server 
error_page 404 /404.html;
location = /404.html 
error_page 500 502 503 504 /50x.html;
location = /50x.html 
}

1. 以上配置完成後需要開發埠才能正常訪問，阿里雲中埠不能在伺服器防火牆中配置，只能在雲服務管理控制台-例項中新增安全組#

2. 在安全組配置規則中選擇快速新增，並將http和https加入安全組#

在瀏覽器中使用網域名稱進行訪問

可以看到連線自動啟用https，如果將連線改為http同樣會自動跳轉至https

注：使用網域名稱訪問80埠需要進行備案，我的網域名稱暫時沒有備案所有使用埠進行訪問，效果同80埠訪問一致

vue發布Nginx配置Https

vue發布Nginx配置Https

Linux下安裝nginx 並且配置https網域名稱

nginx 發布vue專案

vue發布Nginx配置Https

vue發布Nginx配置Https

Linux下安裝nginx 並且配置https網域名稱

nginx 發布vue專案

相關推薦