文章目录

  • 前言
  • 一、安装
  • 一、安装docker
  • 二、安装Docker-compose
  • 三、安装Harbor
  • 二、前端Docker部署实践
  • 2.1 在前端项目中配置相关文件
  • 2.1.1 dockerfile
  • 2.1.2 default.conf
  • 2.1.2 打包及推送前端项目镜像
  • 2.1.3 Harbor中管理镜像并运行
  • 2.1.4 配置宿主机nginx代理
  • 2.1.5 浏览器访问


前言

过往项目中，前端项目最原始粗暴的部署方式就是把前端打包的项目丢到服务器上，配置下nginx，就跑起来了。应用harbor的目的是，通过私有镜像库的方式，拉取开发者推送的镜像并在harbor的操作面板中一点即运行。这样的目的是对于有些需要VPN或者堡垒机才能访问的服务器，我们可以把harbor搭建在服务器上，这样开发者只需要推送代码，部署时只需要打开服务器开放的harbor管理界面，拉取并选择要运行的镜像，即可实现服务更新。免去了传统的层层登录再部署的麻烦，同时通过镜像版本的方式来有效管理服务版本，方便回退。

以下是基于自己的阿里云服务器（centOS 7+)来做的一次harbor搭建实验，为后续投入真实场景使用打个基础

整体流程大致如下：

  • 安装docker
  • 安装docker-compose
  • 安装harbor（依赖于前面2个的安装，所以不能变顺序）
  • 开发者打包前端应用镜像
  • harbor拉取镜像并运行
  • 访问服务

参考文章：

一、安装

一、安装docker

docker，是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。
关于docker的解释，参考：如何通俗解释Docker是什么？

# 安装工具和驱动包
 yum install -y yum-utils device-mapper-persistent-data lvm2

# 配置国内yum源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum makecache fast

# 安装docker 
yum -y install docker-ce

# 启动docker
service docker start
docker version

# 运行hello world
docker pull hello-world:latset
docker run hello-world

# 查看拉取的hello world镜像
docker images

二、安装Docker-compose

Docker-Compose项目是Docker官方的开源项目，负责实现对Docker容器集群的快速编排。它将所管理的窗口分为三层，分别 是工程(project)、服务(service)、**窗口（container）**因为官方安装github老是卡慢，所以这里采用了镜像安装。

# 1、国内镜像安装（操作方便）
curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.5/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

# 2、添加可执行权限
sudo chmod +x /usr/local/bin/docker-compose

# 3、验证安装结果(看到版本号出来就说明安装成功）
docker-compose -v

三、安装Harbor

安装的前提是得有安装包，因为官网也是在github上，所以可以去github上找到harbor安装包，也可以就近百度找一个能用的就行。

# 官网镜像（当然也可以自己本地下载一个harbor的tgz包，然后ftp方式丢到服务器上）
wget https://github.com/goharbor/harbor/releases/download/v2.3.4/harbor-offline-installer-v2.3.4.tgz
# 进入到下载存放安装包的目录
tar -zxvf harbor-offline-installer-v2.3.4.tgz
# 进入解压目录，执行安装
cd harbor
sh ./install.sh

# 启动harbor平台
sudo docker-compose up -d

# 网页访问服务器地址（默认80端口）
# 默认账号密码 admin / Harbor12345

看到这个界面就表示一切安装成功啦~~

docker 部署前端代码 docker前端独立部署_docker 部署前端代码

二、前端Docker部署实践

部署第一步，先会docker基本的几个重要命令

2.1 在前端项目中配置相关文件

  • dockerfile : docker的配置文件
  • default.conf : 本次前端镜像是基于Nginx的，所以这里的default.conf会最终打包替换到镜像中Nginx的default.conf
  • vue.config.js ： 非必须，用于配置与dockerfile中路径一致的publicPath , outputDir

2.1.1 dockerfile

# 基于nginx最新版构建
FROM nginx:latest

# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/regulatory-platform/ 目录下
COPY dist/ /usr/share/nginx/html/dist/

# 将nginx目录下的default.conf复制到 etc/nginx/conf.d/default.conf. 从而用本地的default.conf配置来替换Nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

2.1.2 default.conf

  • 通过以下配置表示，当镜像接收到/dist/xxx的请求时，会自动在html/dist/目录下去寻找资源
server {
# 默认配置镜像80端口
    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;

# 这里前端项目打包时，配置了publicPath: /dist/（通常用于区分二级目录）
    location ^~ /dist/ {
        root   /usr/share/nginx/html/;  
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    # 这里是配置接口服务（通常情况，后端接口也是以镜像形式运行在另外的端口下的）
    location ^~ /regulatory/ {
        proxy_pass http://192.168.32.56/regulatory/;
        proxy_set_header Host $host:$server_port;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

一些小技巧：

  • root与alias的区别：root是将匹配的location路径追加到root后，而alias是将location替换为alias

2.1.2 打包及推送前端项目镜像

通过上述步骤完成在前端项目中的配置文件创建后，接下来就该打项目进行打包以及推送到私有镜像库了

# 1、打包镜像-将dist打包到镜像中
docker build -t dist . 
# 2、查看已打包镜像的ID
docker images
# 3、通过镜像ID，打上远程仓库tag。
docker imageId  192.168.32.56:10080/[命名空间]/[仓库名]:[镜像版本号]
# 4、登录harbor
docker login -u <username> -p <password> 192.168.32.56:10080
# 5、推送镜像到仓库(注意这里推送用的Tag需要与2中设置的远程镜像仓库Tag相一致)
docker push 192.168.32.56:10080/[命名空间]/[仓库名]:[镜像版本号]
  • 192.168.32.56:10080：这个是服务器harbor访问的地址，也就是harbor镜像仓库的访问地址。

2.1.3 Harbor中管理镜像并运行

在完成镜像推送后，通过访问192.168.32.56:10080来登录harbor，可以看到对应命名空间下，相关仓库已经生成，通过harbor操作界面可以很方便的复制镜像pull命令，然后在服务器中运行，来拉取最新镜像

# 拉取镜像
docker pull 192.168.32.56:10080/regulatory-fe/dist@sha256:79333a37587b0e719b9c676762b98c87dc23e534127f588cf99367f15235f80f

# 运行镜像生成容器 --name(容器别名）,-d（后台运行），-p(将宿主机8889端口与镜像80端口映射)
docker run --name dist -d -p 8889:80 192.168.32.56:10080/regulatory-fe/dist[:版本号]

# 查看运行容器
docker ps -a

# 先在服务器上尝试访问看镜像是否运行成功合理(只要不是404基本就是通了）
curl localhost:8889/dist/index.html

2.1.4 配置宿主机nginx代理

这一步也可以省略，主要场景是通常服务器的端口不是随便开的，所以在宿主机内部8889可访问，但在外网通过浏览器可能无法成功。所以这里通过nginx，将外网访问的特定路径转发到8889端口的前端服务中来。

# 找到nginx配置目录（通常是/etc/nginx/nginx.conf）
cd /etc/nginx
# 修改配置(这里只是示例并不规范，所以修改的是nginx.conf）
vim nginx.conf
# 添加一行配置
...假装是nginx.conf的上下文...
location ^~ /dist/ {
	proxy_pass 127.0.0.1:8889;
}
...假装是nginx.conf的上下文...

# 检测nginx配置文件是否正确(提示有success就表示没语法错误)
nginx -t
# 重启nginx
nginx -s reload
  • 注意：这里proxy_pass后面带不带/，以及其他路径会对访问有不同影响，详细参考下方道友链接
  • proxy_path详解：

2.1.5 浏览器访问

以上，通过访问 192.168.32.56/dist/ 即可访问到前端项目
总结：

  • 前端打包时配置了二级资源访问路径dist，即请求css等资源时，默认会是192.168.xxx.xxx/dist/aaa.css这种
  • 宿主机nginx： 作为一层反向代理的作用，把/dist/路径的请求，转发到8889端口中（这里的dist可以换成其他名字）
  • 镜像中nginx(default.conf)： 也配置了/dist/，这里跟打包里的dist作用是一致的