如何部署前端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教程