如何部署前端dist目錄？

時間 2019-11-26

原文原文鏈接

前端部署其實也算前端工程化的一部分，這篇博客是我結合實際工做經驗和業餘探索，總結出的前端部署的一些嘗試。一方面本身有所記錄，另外一方面也能給你們帶來些啓示。javascript

部署到七牛雲
部署到阿里雲OSS，部署到騰訊雲OSS
部署到騰訊雲服務器並使用nginx作反向代理
總結與反思

前提條件：css

經過npm run build / yarn run build打包出的前端dist包，須要部署到公網環境供用戶訪問
已購買一臺騰訊雲服務器，實例配置1核 1GB 1Mbps。可用於存儲前端dist包，nginx反向代理，運行後端服務等等
已購買一個可用域kaigege.cn並備案。可用於CNAME解析，二級域名解析等等

如果對上述一些名詞不理解，不用着急，一點一點來。html

dist包目錄結構以下:前端

|-- arya-spring-vue-fe
      |-- favicon.ico
      |-- index.html
      |-- manifest.json
      |-- precache-manifest.dc33a1b9e99c64c524c43168e7777109.js
      |-- robots.txt
      |-- service-worker.js
      |-- css
      |   |-- app.8be73ceb.css
      |   |-- chunk-vendors.8aa8b174.css
      |   |-- login.8c104af7.css
      |   |-- user.2cc930ce.css
      |-- fonts
      |   |-- ionicons.99ac3308.woff
      |   |-- ionicons.d535a25a.ttf
      |-- img
      |   |-- arya-spring-vue-fe.8d6fbad1.png
      |   |-- ionicons.a2c4a261.svg
      |   |-- logo.82b9c7a5.png
      |   |-- icons
      |       |-- android-chrome-192x192.png
      |       |-- android-chrome-512x512.png
      |       |-- apple-touch-icon-120x120.png
      |       |-- apple-touch-icon-152x152.png
      |       |-- apple-touch-icon-180x180.png
      |       |-- apple-touch-icon-60x60.png
      |       |-- apple-touch-icon-76x76.png
      |       |-- apple-touch-icon.png
      |       |-- favicon-16x16.png
      |       |-- favicon-32x32.png
      |       |-- msapplication-icon-144x144.png
      |       |-- mstile-150x150.png
      |       |-- safari-pinned-tab.svg
      |-- js
          |-- about.b6757b1f.js
          |-- about.b6757b1f.js.map
          |-- app.15053451.js
          |-- app.15053451.js.map
          |-- chunk-vendors.acd76e03.js
          |-- chunk-vendors.acd76e03.js.map
          |-- login.e0db28e9.js
          |-- login.e0db28e9.js.map
          |-- user.4699a3d1.js
          |-- user.4699a3d1.js.map
複製代碼

部署到七牛雲

由於手上負責的項目dist包是存儲在七牛雲的，並且第一個接觸到的雲存儲也是七牛雲，因此天然而然想到了七牛雲OSS。vue

已具有條件：java

七牛雲帳號
七牛雲對象存儲服務
用於存儲文件的bucket

須要作的事：node

融合CDN添加域名並綁定bucket
域名添加CNAME解析
上傳文件到bucket

融合CDN添加域名並綁定bucket

融合CDN->域名管理->建立域名foo.kaigege.cn->源站配置裏選擇七牛雲存儲綁定bucket python

域名添加CNAME解析

七牛雲域名管理並複製CNAME->騰訊雲域名管理->解析->添加記錄->記錄類型選擇CNAME，主機記錄填寫foo->記錄值填寫foo-kaigege-cn.qiniudns.com android

上傳文件到bucket

這一步就頗有趣了。看一下咱們的dist目錄能夠發現，除了index.html這一級外，還有css，fonts，img，js4個目錄。而七牛雲的bucket居然不支持建立目錄。webpack

惟一的辦法就是如何在空間下建立文件夾？

在空間中不能建立文件夾，可是爲了區分不一樣的文件，能夠這麼作: 文件名以 2017/1/12/1.img , 即建立這樣的虛擬目錄 2017/1/12/ 作區分。

雖然我手上的項目就是上傳七牛雲，是以前的老大寫了一個node腳本按照這種方式上傳的，可是當用過阿里雲OSS和騰訊雲OSS之後，我真心以爲七牛雲這個功能有待提升。代碼就不貼出了，七牛雲提供了各類SDK，python，nodejs等等部署腳本都能寫出。

考慮到後期項目部署的方便性，果斷放棄上傳前端文件到七牛雲的方案。

部署到阿里雲OSS，部署到騰訊雲OSS

部署到阿里雲OSS和部署到騰訊雲OSS。兩者都是對象存儲，bucket內都支持建立目錄，和七牛雲同樣都有CDN加速。

阿里雲OSS我實在是找不到收費標準，騰訊雲有一個1塊錢6個月都免費體驗權，所以我就以騰訊云爲例子來說解。

已具有條件：

騰訊雲帳號
騰訊雲對象存儲服務
用於存儲文件的存儲桶

須要作的事：

爲存儲桶添加自定義加速域名
域名添加CNAME解析
建立文件夾並上傳文件

爲存儲桶添加自定義加速域名

域名添加CNAME解析

域名添加CNAME解析可參考七牛雲域名解析，是同樣的。

建立文件夾並上傳文件

此時咱們訪問：foo.kaigege.cn/foo/index.html是不就能夠訪問到文件了呢？No。其它文件的請求路徑爲foo.kaigege.cn/js/app.js。缺失了foo目錄。該怎麼辦呢？

在vue.config.js配置webpack的publicPath爲"/foo"便可。

看一下index.html就知道了。

添加publicPath /foo前	添加publicPath /foo後
`<link href=/js/app.15053451.js>`	`<link href=/foo/js/app.15053451.js>`

Ok，騰訊雲OSS部署前端文件完畢。

部署到騰訊雲服務器並使用nginx作反向代理

爲何會想到這樣部署？

託管再github pages的前端博客，須要一個域名作代理
現公司開發環境就是使用nginx構建的反向代理服務器，手上負責項目的前端文件就存儲在這臺機器上
CDN加速是收費的，雖然騰訊雲0.11元/G，可是免費的顯然更好

因而開始折騰。

已具有條件：

frankkai.github.io
騰訊雲centOS服務器
部署nginx並初步具有nginx知識點

須要作的事：

配置nginx訪問blog.kaigege.cn重定向到frankkai.github.io
配置nginx訪問foo.kaigege.cn加載前端靜態文件
騰訊雲域名管理解析二級域名到服務器
使用fileZIla鏈接騰訊雲服務器上傳前端靜態文件

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/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;
    gzip                on;
    gzip_types          text/plain application/javascript text/css;    

    # 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;
    # 配置nginx訪問blog.kaigege.cn重定向到frankkai.github.io
    server {
        listen       80;
        server_name  blog.kaigege.cn;
        location / {
            proxy_pass https://frankkai.github.io; 
        }
    }
   # 配置nginx訪問foo.kaigege.cn加載前端靜態文件。
    server {
        listen       80;
        server_name  foo.kaigege.cn;
        location / {
            root     /usr/share/nginx/foo;
            index    index.html;
        }
    }

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _; 
        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 = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}
複製代碼

對nginx以及nginx 反向代理不熟的話，能夠看nginx入門或前端必會的 Nginx入門視頻教程(共11集)補充一下。這裏就再也不贅述了。