如何部署前端dist目錄？

本文轉載自查看原文 2020-10-13 17:18 3419 html/css

前端部署其實也算前端工程化的一部分，這篇博客是我結合實際工作經驗和業余探索，總結出的前端部署的一些嘗試。一方面自己有所記錄，另一方面也能給大家帶來些啟示。

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

前提條件：

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

若是對上述一些名詞不理解，不用着急，一點一點來。

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。

已具備條件：

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

需要做的事：

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

融合CDN添加域名並綁定bucket

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

域名添加CNAME解析

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

上傳文件到bucket

這一步就很有趣了。
看一下我們的dist目錄可以發現，除了index.html這一級外，還有css，fonts，img，js4個目錄。
而七牛雲的bucket竟然不支持創建目錄。

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

在空間中不能創建文件夾，但是為了區分不同的文件，可以這么做:文件名以 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 { } } }