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

jiezi

5 年前

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。

“巧妇难为无米之炊”，代码都没有，何谈部署？说时迟那时快，先 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… 处获得。

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

前言

git clone 及项目打包

构建镜像，部署静态资源

跨域转发

后记