vue發布Nginx配置Https

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

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

yum install nginx

ubuntu使用命令：

sudo apt update

sudo apt install nginx

安裝完成後啟動nginx並配置開機自動啟動

sudo systemctl start nginx

sudo systemctl enable nginx

瀏覽器輸入服務ip檢視nginx是否成功啟動，出現以下介面說明安裝成功（ubuntu有差異），需要先開啟80埠，參考下面埠配置

在vue專案目錄下輸入npm run build:prod，複製dist打包檔案上傳至linux伺服器，上傳成功後複製檔案所在路徑，最後配置nginx服務

輸入以下命令進入配置nginx

vi /etc/nginx/nginx.conf

nginx配置大致如下：

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

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

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

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

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

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

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

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

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

cd /etc/nginx

vi 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節點配置新增一行自動跳轉

完整配置如下

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 
}

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

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

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

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

vue發布Nginx配置Https

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

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

2.2nginx安裝 安裝前確認linux下這些庫已經安裝 yum install perl yum install gcc yum install gcc c yum y install net tools 將安裝包放到 home zwr nginx install目錄下，然後再該目錄下執行此指令...

nginx 發布vue專案

打包成功後，複製到伺服器。我的專案目錄是 usr local soft nginx web micro mall h5 2 進入nginx安裝目錄下的 conf nginx.conf檔案修改相關配置 listen配置埠這裡預設是80 修改location內容 當訪問http localhost 80...