vue發布Nginx配置Https

介紹#

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

• Linux服務器：CentOS、Ubuntu
• 域名：雲服務商處購買域名
• SSL證書：雲服務商購買或Open SSL

配置服務器#

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

安裝Nginx#

使用SSH工具進入服務器（推薦XShell），安裝Nginx： CentOS使用以下命令： yum update 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靜態文件#

在vue項目目錄下輸入npm run build:prod，復制dist打包文件上傳至Linux服務器，上傳成功后復制文件所在路徑，最后配置nginx服務 輸入以下命令進入配置nginx vi /etc/nginx/nginx.conf nginx配置大致如下：

Copy

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; 

配置文件較長，主要配置server節點的內容，其他給中配置都是默認不需要修改，將第一個server節點中的root路徑改為復制的dist路徑

Copy

    server {
        listen       80 default_server;
        listen       [::]:80 default_server; server_name _; root /home/dist; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /404.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } 

修改完成后退出vi並保存，然后刷新瀏覽器IP訪問頁面，可以看到nginx服務已經使用http成功代理vue發布文件

圖中可以看到http代理下chrome自動提示連接不安全

域名配置#

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

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

域名解析#

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

2. 在解析設置中添加一條IPV4記錄#

保存成功后域名解析配置完成

SSL證書配置#

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

SSL證書下載#

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

2. 審核通過后在證書列表下載項中選擇Nginx服務器下載#

3. 下載完成后上傳至Linux服務器並解壓#

解壓文件后復制文件路徑，可以根據需要修改文件名，如文件名太長。

Nginx配置#

修改Nginx默認配置#

進入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節點配置添加一行自動跳轉 rewrite ^(.*)$ https://$host$1 permanent;

完整配置如下#

Copy

    server {
        listen       80 default_server;
        listen       [::]:80 default_server; server_name xucz.vip; rewrite ^(.*)$ https://$host$1 permanent; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } 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 { listen 443 ssl http2; listen [::]:443 ssl http2; server_name xucz.vip; root /home/doc; ssl_certificate "/var/lib/nginx/xucz.vip.pem"; ssl_certificate_key "/var/lib/nginx/xucz.vip.key"; ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; error_page 497 301 =307 # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } 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端口訪問一致