如何部署前端dist目錄？

時間  2020-03-14
標籤 如何 部署 前端 dist 目錄 简体版
原文   原文鏈接

前端部署.png

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

域名添加CNAME解析

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

上傳文件到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解析
  • 建立文件夾並上傳文件

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

image

域名添加CNAME解析

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

建立文件夾並上傳文件

image

此時咱們訪問：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集)補充一下。這裏就再也不贅述了。

騰訊雲域名管理解析二級域名到服務器

image

使用fileZIla鏈接騰訊雲服務器上傳前端靜態文件

這個坑是比較多的，須要作如下幾件事。

  • 放開騰訊雲安全組的22端口
  • 騰訊雲SSH祕鑰下載祕鑰
  • 配置fileZila新站點
  • 上傳前端dist目錄
放開騰訊雲安全組的22端口

image

騰訊雲SSH祕鑰下載祕鑰

image

配置fileZila新站點
添加祕鑰

image

新增站點配置

須要選擇SFTP協議，經過22端口登陸
image

上傳前端dist目錄

上傳到哪裏呢？回看一下nginx的配置。
會發現dist目錄下的文件，右鍵上傳到/usr/share/nginx/foo便可。
image

上面的事情作完了，咱們獲得的結果是怎樣呢？

  1. 訪問blog.kaigege.cn重定向到frankkai.github.io
  2. 訪問foo.kagege.cn/index.html獲取到前端靜態資源

ok，部署到騰訊雲服務器並使用nginx作反向代理完畢。

備註：nginx的反向代理配置中，統一監聽了80端口，一樣也須要在服務器實例安全組配置中放開。

總結與反思

  • 七牛雲對象存儲，阿里雲OSS，騰訊雲OSS：存儲文件並CDN加速。七牛雲bucket不支持建立目錄，OSS支持。
  • 騰訊雲域名管理： CNAME，解析二級域名。須要公網備案過的域名才能玩起來。
  • 騰訊雲服務器：存儲文件並部署nginx。解析二級域名全靠這個。
  • nginx：反向代理重定向博客，訪問前端資源。nginx是神器。
  • 未涉及docker，k8s新型前端部署，有機會實踐時再作補充。

期待和你們交流，共同進步，歡迎你們加入我建立的與前端開發密切相關的技術討論小組：

努力成爲優秀前端工程師！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程