广州网站开发哪家好,制作网站图片不显示,上海公司网站seo,学装修设计介绍#xff1a;
构建镜像#xff1a;通过docker构建以nginx为基础的镜像#xff0c;将vue项目生成的dist包拷贝至nginx目录下#xff0c;.conf文件做反向代理配置#xff1b;部署服务#xff1a;docker stack启动部署服务#xff1b;
通过执行两个脚本既可以实现构建…介绍
构建镜像通过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内容如下
#注意以下两行命令不需要每次都执行如果本地已经安装了项目依赖包则可以注释掉这两行命令
#设置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 --usernameadmin --passwordadminserver1#推送镜像将镜像推送到192.168.100.90:5000仓库这样其他人就可以直接从镜像仓库拉取构建好了的镜像。
docker push 192.168.100.90:5000/myapp/front_dev:1.1
成功执行完脚本命令就完成构建、推送镜像的操作了。 脚本中指定的Dockerfile文件内容接下来会做详细解释。
2.2 其他配置文件详解
2.2.1 Dockerfile文件
#指定所创建镜像的基础镜像为nginx如果本地不存在则默认会去Docker Hub下载
FROM docker.io/library/nginx:latest
#维护作者信息
LABEL MAINTAINERlgr214242111qq.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文件
#压缩设置
#开启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刷新报404location / {try_files $uri $uri/ /index.html; #检测文件存在性重定向到首页目录防止404index 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自动跳转httpshttps://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脚本内容如下
#!/bin/bash
cmd$1
service$2
config$3
basepath$(cd dirname $0; pwd)login(){docker login 192.168.100.99:5000 --usernameadmin --passwordadminserver1
}start(){#如果192.168.100.90:5000设有密码则需要登录如果没有则注释掉此行命令;#docker login 192.168.100.90:5000 --usernameadmin --passwordadminserver1echo 启动/更新服务#部署镜像# -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 ]]; thenstart
elif [[ $cmd down ]]; thendown
elif [[ $cmd ps ]]; thenps
elif [[ $cmd login ]]; thenlogin
elseusage
fi
3.2 compose文件
my-compose.yaml文件内容如下
#指定compose文件版本
version: 3
#定义所有的service
services:#定义第一个service起名为frontfront:#镜像名称必须要与build.sh中起的名称一模一样image: 192.168.100.90:5000/myapp/front_dev:1.1deploy:replicas: 1update_config:parallelism: 1delay: 10srestart_policy:condition: anydelay: 10smax_attempts: 3window: 120sresources:limits:memory: 512Mreservations:memory: 128Mports:#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 服务名 删除服务
