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配置大致如下：

# 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路徑

    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;

完整配置如下

    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端口訪問一致