介绍:
- 构建镜像:通过docker构建以nginx为基础的镜像,将vue项目生成的dist包拷贝至nginx目录下,.conf文件做反向代理配置;
- 部署服务:docker stack启动部署服务;
通过执行两个脚本既可以实现构建镜像、部署服务的过程。本文将对两个脚本及其他核心配置文件做详细解释。
1.前提条件
(1)由于是使用docker来构建镜像,所以本地需要有docker环境。
(2)如果要将镜像推送到私服镜像仓库,则需要修改docker的配置文件daemon.json,如下:
在insecure-registries中添加仓库地址
{
"experimental": false,
"debug": true,
"registry-mirrors": [
"https://japmlaqu.mirror. aliyuncs.com"
],
"insecure-reaistries" [
"192.168.100.90:5000",
"192.168.100.91:5000"
]
}
注意:修改之后需要重启docker才会生效。
2.构建、推送镜像
2.1 执行脚本: sh build.sh
脚本位置就在项目根目录下,脚本build.sh内容如下:
bash
#注意:以下两行命令不需要每次都执行,如果本地已经安装了项目依赖包,则可以注释掉这两行命令
#设置registry为淘宝镜像
npm set registry https://registry.npm.taobao.org
#从registry下载安装项目所需依赖包
npm install
#生成dist包
npm run build
#构建镜像:
# docker build:根据dockerfile文件内容构建镜像;
# -f:指定Dockerfile位置,省略则默认为此脚本同目录下名为"Dockerfile"的文件;
# -t:指定构建镜像的名称及版本号;192.168.100.90:5000表示私服镜像仓库地址;
# .:制定镜像构建过程中的上下文环境目录,不能省略;
#docker build -f ./my-DockerFile -t 192.168.100.90:5000/myapp/front_dev:1.1 .
docker build -t 192.168.100.90:5000/myapp/front_dev:1.1 .
#登录镜像仓库:如果192.168.100.90:5000设有密码则需要登录,如果没有则注释掉此行命令;
#docker login 192.168.100.90:5000 --username=admin --password=admin@server1
#推送镜像:将镜像推送到192.168.100.90:5000仓库;这样其他人就可以直接从镜像仓库拉取构建好了的镜像。
docker push 192.168.100.90:5000/myapp/front_dev:1.1
成功执行完脚本命令就完成构建、推送镜像的操作了。
脚本中指定的Dockerfile文件内容接下来会做详细解释。
2.2 其他配置文件详解
2.2.1 Dockerfile文件
bash
#指定所创建镜像的基础镜像为nginx,如果本地不存在,则默认会去Docker Hub下载;
FROM docker.io/library/nginx:latest
#维护作者信息
LABEL MAINTAINER="lgr<214242111@qq.com>"
#删除源文件及软链接
RUN unlink /var/log/nginx/access.log
RUN unlink /var/log/nginx/error.log
# 覆盖default配置:将nginx目录下defaulut.conf文件替换为my-nginx.conf配置文件
COPY my-nginx.conf /etc/nginx/conf.d/default.conf
# 将nginx下的html目录替换为dist包
COPY dist/ /usr/share/nginx/html
# 拷贝证书(ssl证书:http://blog.itpub.net/69996004/viewspace-2763244)
# 上线后互联网可访问的项目都要做ssl认证,如果没有则不需要做ssl认证相关的配置;
RUN mkdir -p /etc/nginx/cert
COPY certificate/ /etc/nginx/cert
#暴露端口
EXPOSE 80
该文件指定构建一个以nginx为基础的镜像,并将dockerfile同目录下的my-nginx.conf文件和dist包复制到nginx指定位置下。
2.2.2 my-nginx.conf文件
bash
#压缩设置
#开启gzip压缩
gzip on;
#http的协议版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip压缩,关闭
gzip_disable 'MSIE[1-6].';
#需要压缩的文件格式 text/html默认会压缩,不用添加
gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
#设置压缩缓冲区大小,此处设置为4个8K内存作为压缩结果流缓存
gzip_buffers 4 8k;
#压缩文件最小大小
gzip_min_length 1k;
#压缩级别1-9
gzip_comp_level 4;
#给响应头加个vary,告知客户端能否缓存
gzip_vary on;
#反向代理时使用
gzip_proxied off;
#上传文件大小限制
client_max_body_size 20M;
#解决代理中丢失下划线信息配置
underscores_in_headers on;
#监听https(端口443),并包括ssl证书和其他ssl配置
server {
listen 443 ssl;
server_name myapp.custom.com.cn;
# ssl认证,dockerfile文件中命令已经将ssl证书文件拷贝到nginx/目录下
ssl_certificate /etc/nginx/cert/9125385_myapp.custom.com.cn.pem;
ssl_certificate_key /etc/nginx/cert/9125385_myapp.custom.com.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log error;
root /usr/share/nginx/html;
# 配置vue刷新报404
location / {
try_files $uri $uri/ /index.html; #检测文件存在性重定向到首页目录,防止404
index index.html;
}
location @router {
rewrite ^.*$ /index.html break;
}
#项目后端接口
location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header HTTP_X_FORWARDED_FOR $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
#反向代理地址
proxy_pass http://192.168.200.92:8080/;
proxy_connect_timeout 60000;
proxy_read_timeout 60000;
proxy_send_timeout 60000;
}
#后端文件存储服务器ip代理
location /minio/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header HTTP_X_FORWARDED_FOR $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://192.168.200.92:10001/;
proxy_connect_timeout 60000;
proxy_read_timeout 60000;
proxy_send_timeout 60000;
}
#后端从某数据中心1拉取数据的接口代理
location /dcapi/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header HTTP_X_FORWARDED_FOR $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
#反向代理地址, 对应的是上面设置的upstream的名字。
proxy_pass http://192.199.201.12:9010/;
proxy_connect_timeout 60000;
proxy_read_timeout 60000;
proxy_send_timeout 60000;
}
#后端从某数据中心2拉取数据的接口代理
location /infoapi/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header HTTP_X_FORWARDED_FOR $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://192.134.200.21:9999/;
proxy_connect_timeout 60000;
proxy_read_timeout 60000;
proxy_send_timeout 60000;
}
}
# 监听http(端口80),并将所有的http请求重定向到https
# nginx实现http自动跳转https:https://cloud.tencent.com/developer/article/2253799
server {
listen 80; #监听80端口
server_name myapp.custom.com.cn; #请求域名
return 301 https://$host$request_uri; #重定向至https访问。
}
本文件配置了后端服务反向代理、http请求重定向到https。
3.部署镜像服务
3.1 执行脚本
bash deploy.sh start myAppService my-compose.yaml
在镜像所在服务器的(deploy.sh、my-compose.yaml文件)目录下执行此脚本命令即可。
说明:myAppService为自定义的服务名,my-compose.yaml是与deploy.sh脚本在同目录下的compose文件。deploy.sh脚本内容如下:
bash
#!/bin/bash
cmd="$1"
service="$2"
config="$3"
basepath=$(cd `dirname $0`; pwd)
login(){
docker login 192.168.100.99:5000 --username=admin --password=admin@server1
}
start(){
#如果192.168.100.90:5000设有密码则需要登录,如果没有则注释掉此行命令;
#docker login 192.168.100.90:5000 --username=admin --password=admin@server1
echo "启动/更新服务"
#部署镜像,
# -c , --compose-file:指定stack file的路径位置
#--with-registry-auth,向swarm代理发送registry认证详细信息
docker stack deploy -c $basepath/$config $service --with-registry-auth
}
down(){
docker stack rm $service
}
# 查询stack服务中的容器运行状态
ps(){
docker stack ps $service
}
usage(){
echo "start version - 启动/更新服务"
echo "down - 删除服务"
echo "ps - 查看服务中容器的运行状态"
echo "login - 登录镜像仓库"
}
if [[ $cmd = "start" ]]; then
start
elif [[ $cmd = "down" ]]; then
down
elif [[ $cmd = "ps" ]]; then
ps
elif [[ $cmd = "login" ]]; then
login
else
usage
fi
3.2 compose文件
my-compose.yaml文件内容如下:
bash
#指定compose文件版本
version: '3'
#定义所有的service
services:
#定义第一个service,起名为front
front:
#镜像名称必须要与build.sh中起的名称一模一样
image: 192.168.100.90:5000/myapp/front_dev:1.1
deploy:
replicas: 1
update_config:
parallelism: 1
delay: 10s
restart_policy:
condition: any
delay: 10s
max_attempts: 3
window: 120s
resources:
limits:
memory: 512M
reservations:
memory: 128M
ports:
#80端口映射到8888
- "8888:80"
- "443:443"
本文件创建了一个名为"front"的service,也可以在下面继续添加其他服务。(一般情况下将前端服务和后端服务都配置到同一个compose文件中,这样就可以通过deploy.sh同时部署前后端。)
4.docker stack常用命令
启动服务后可通过docker命令查看服务状态:
docker stack ls
查看服务列表
docker stack ps 服务名
查看服务状态
docker stack ps 服务名 --no-trunc
查看服务状态,不要截断输出
docke stack rm 服务名
删除服务