【Copy攻城狮日志】Docker部署D2Admin 人人企业版

YancyYe 发布于2019-07-25 14:47 / 3337人阅读

摘要：介于目前项目的前端开发基于人人企业版有了快狗团队的手摸手，很快就能用部署这样一个后台管理平台。构建镜像，部署静态资源这里借助获取镜像，通镜像作为基础来构建人人企业版镜像。本许可协议授权之外的使用权限可以从处获得。

Created by huqi at 2019-5-24 21:01:30  
Updated by huqi at 2019-5-26 00:00:42

前言

最近后端的小伙伴在探索docker部署，给我也提了需求，希望我别掉链子，也能将前端服务通过docker部署。于是乎，我在大掘金找到了一篇不错的实践，@快狗打车前端团队的 [[手把手系列之]Docker 部署 vue 项目](https://juejin.im/post/5cce4b...。出于Copy的职业本能，看完文章立马动手尝试了一下，一顿操作猛如虎，通过Docker部署了一个vue-cli生成的demo，当然，理论上来看，也就是部署了一个静态目录dist。简单的实践效果如图。介于目前项目的前端开发基于D2Admin 人人企业版,有了快狗团队的手摸手，很快就能用Docker部署这样一个后台管理平台。本文默认使用linux且安装了docker@18.09.6、node@8.9.0及git@1.8.3.1。

git clone及项目打包

“巧妇难为无米之炊”，代码都没有，何谈部署？说时迟那时快，先clone一下源代码。D2Admin 人人企业版大概9.25M的样子，我的ECS配置极差，网络环境也比较差，拉取的时间稍微长一点，都吃完一片西瓜了，都还在95%的进度。当然，乳沟您本地已经打包好了请略过一下操作，还有时间可以多吃几片西瓜。一般来说在实际上线中，前端可能只要给到打包之后的文件夹就够了。

git clone https://github.com/d2-projects/d2-admin-renren-security-enterprise.git
cd d2-admin-renren-security-enterprise
npm install
npm run build

这里build主要目的还是为了获取到dist目录。

构建镜像，部署静态资源

这里借助docke获取nginx镜像，通nginx镜像作为基础来构建D2Admin 人人企业版镜像。
拉取nginx镜像：

docker pull nginx

创建nginx配置文件：

mkdir nginx
vi nginx/deafult.conf

deafult.conf

server {
    listen  80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404  /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

新建Dockerfile文件：

vi Dockerfile

Dockerfile

FROM nginx

新建sh脚本文件，如：

vi D2AdminRenren.sh

docker run  -p 4443:80 -d --name d2adminrenren --mount type=bind,source=/home/huqi/d2-admin-renren-security-enterprise/nginx,target=/etc/nginx/conf.d --mount type=bind,source=/home/huqi/d2-admin-renren-security-enterprise/dist,target=/usr/share/nginx/html nginx

部署静态资源：

sh D2AdminRenren.sh

一波操作下来基本上就把D2Admin 人人企业版部署上去了。

简单说下上面几个操作的作用。docker拉取nginx，这里能够在不影响本机之前装的nginx的情况下，在docker容器中装了一个多带带的nginx，一个简单的命令似乎见识到了docker的强大之处。nginx的配置文件我就不细说，因为我不会，这方面的资料还是蛮多的，之前看极客学院就推出过相关的专栏还是蛮火的，也可以参考@快狗打车前端团队写的几篇相关的文章，这里为啥设置目录为 /usr/share/nginx/html，是因为后续会复制dist目录到这个文件夹，从而达到静态部署的目的。至于Dockerfile这个文件为啥只有 FROM nginx这一行仅仅说明镜像来源于官方nginx，是因为具体的配置写到了后边的sh脚本中。这里的sh脚本又长又臭，主要还是因为我不会断行，不过还是很好理解，其实就一条 docker run 的指令，-p指定容器暴露的端口，-d指定容器将会运行在后台模式,--name 指定容器名字，后续可以通过名字进行容器管理，--mount这里是关键，主要用于容器数据持久化，这样一来无论是修改nginx配置文件还是重新打包vue应用，都只要重启容器docker restart 就能生效。

跨域转发

一般来说，前后分离的项目都会存在跨域的问题，D2Admin人人企业版看似不存在跨域，那是因为后台接口做了跨域处理，这样一来，谁都可以调这个接口，如图所示，后台接口展示得比较明显，接下来想处理一来，在nginx上做一下代理转发。

修改前端api配置：

vi scr/.env

.env

# 所有环境默认
# 优先级最低

# 网络请求公用地址
VUE_APP_API=security-enterprise-server

重新build：

npm run build

修改nginx配置，增加接口转发,将 security-enterprise-server路径下的请求全部转发到后台。
修改后的deafult.conf

server {
    listen  80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404  /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location ~  /security-enterprise-server/ {
        proxy_pass https://demo.renren.io;
    }
}

重启：

docker restart d2adminrenren

后记

一次简单的尝试，居然踩了很多莫名其妙的坑，比如我的docker没有快狗前端团队文中提到的docker exect指令，只有 docker exec，比如docker ps 查看到端口已开，netstat -tnpl没看到端口……不管怎样，总算是又迈出了一步，至少在后端都讨论docker的时候，也能插上一句“那个，前端也能用docker部署”。也许是又做了一个梦，梦中copy了不少代码，梦醒时分，继续漫无目的地前行！

本作品 由 Loner 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.om/hu-qi/Loner上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/l... 处获得。

服务器托管混合云攻城狮 docker企业版 docker日志 docker启动日志

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40459.html

【Copy攻城狮日志】Docker部署D2Admin 人人企业版

摘要：介于目前项目的前端开发基于人人企业版有了快狗团队的手摸手，很快就能用部署这样一个后台管理平台。构建镜像，部署静态资源这里借助获取镜像，通镜像作为基础来构建人人企业版镜像。本许可协议授权之外的使用权限可以从处获得。 Created by huqi at 2019-5-24 21:01:30 Updated by huqi at 2019-5-26 00:00:42 前言最近后端的小...

JessYanCoding 2019-06-28 17:20 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
【Copy攻城狮日志】聊聊JavaScript heap out of memory

摘要：当时，如果老生区大小超过设定的值时，就会报错。一般是无限制增长的数组无限制设置属性和值大循环等出处林小新。这部分由于攻城狮并为深入，可以参考如何定位的内存泄漏内存泄漏以及定位 showImg(https://segmentfault.com/img/bVbnysD?w=649&h=658);↑开局一张图，故事全靠编↑ 从一次宕机说起这是一个很狗血的故事，故事的开头是一个项目，这个项...

paulquei 2019-08-23 14:53 评论0 收藏0
【趣味连载】攻城狮上传视频与普通人上传视频：（一）生成结构化数据

摘要：背景当知道要上传的视频资料从条变成条时，我就明白，绝对不能再人工处理了。背景当知道要上传的视频资料从20条变成100条时，我就明白，绝对不能再人工处理了。他们总是想当然的认为，录入一条数据需要1分钟，那录入20条数据就是20分钟，录入100条数据，不就是100分钟吗？我有时候，真的很想问问他们，没有考虑过人是会犯错的吗？数据越多，出错的可能就越大；但是数据本身，又是不允许出现纰漏的...

mindwind 2019-06-21 16:16 评论0 收藏0
【趣味连载】攻城狮上传视频与普通人上传视频：（一）生成结构化数据

摘要：背景当知道要上传的视频资料从条变成条时，我就明白，绝对不能再人工处理了。背景当知道要上传的视频资料从20条变成100条时，我就明白，绝对不能再人工处理了。他们总是想当然的认为，录入一条数据需要1分钟，那录入20条数据就是20分钟，录入100条数据，不就是100分钟吗？我有时候，真的很想问问他们，没有考虑过人是会犯错的吗？数据越多，出错的可能就越大；但是数据本身，又是不允许出现纰漏的...

MadPecker 2019-07-16 16:06 评论0 收藏0