Dockerfile的多级构建Vue+Nginx(openresty)
在Docker 17.05多阶段构建推出之后，我们只需要维护一个Dockerfile文件即可：
在项目的根目录下，创建如下的Dockerfile文件:
# First stage: complete build environment
FROM node:14.15.1-alpine as builder
WORKDIR /root
COPY . /root
# RUN npm
RUN npm config set registry https://registry.npmmirror.com
RUN npm install --verbose
RUN npm run build
# Second stage: minimal runtime environment
FROM openresty/openresty:alpine
## Change TimeZone
##-----------------------------------alpine------------------------------------------------------
## 安装 tzdata，复制里面的时区文件后删除 tzdata，保持精简
#RUN apk add --no-cache tzdata && \
# cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
# apk del tzdata && \
# echo "Asia/Shanghai" > /etc/timezone
##-----------------------------------ubuntu------------------------------------------------------
## 安装 tzdata，复制里面的时区文件后删除 tzdata，保持精简
#RUN apt update -y && \
# DEBIAN_FRONTEND="noninteractive" apt -y install tzdata
#RUN ln -fs /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
# dpkg-reconfigure -f noninteractive tzdata
##-----------------------------------centos------------------------------------------------------
## 安装 tzdata，复制里面的时区文件后删除 tzdata，保持精简
#RUN rm -f /etc/localtime \
# && ln -sv /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
# && echo "Asia/Shanghai" > /etc/timezone
# health check, 每 15秒检查一次，健康检查命令超过 3 秒没响应，并且重试 3 次都没响应就视为失败
HEALTHCHECK --interval=15s --timeout=3s --retries=3 \
CMD curl -fs http://localhost:80/ || exit 1
# 设置 LABEL
LABEL maintainer="bydongxing@gmail.com"
ENV GATEWAY_URL http://127.0.0.1:8080
# copy dist from the first stage
COPY --from=builder /root/dist /usr/share/nginx/html
# copy nginx.conf
COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
# expose port
EXPOSE 80备注：
1、nginx.conf 配置文件
#user nobody;
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
# 设置共享的环境变量
lua_shared_dict my_shared_dict 1m;
# 给共享的环境变量赋值
init_by_lua_block {
local gateway_url = os.getenv("GATEWAY_URL")
ngx.log(ngx.INFO, "GATEWAY_URL is set to: ", gateway_url)
local shared_dict = ngx.shared.my_shared_dict
if gateway_url then
shared_dict:set("gateway_url", gateway_url)
else
ngx.log(ngx.WARN, "GATEWAY_URL is not set")
end
}
# dns解析器的地址
# docker 的地址为 127.0.0.11
# k8s 的地址为 kubectl get svc -A |grep kube-dns 出来的IP地址，例如：10.96.0.10
resolver 127.0.0.11 ipv6=off;
include mime.types;
default_type application/octet-stream;
# 自定义日志格式，打印出 请求和 响应的时间，单位：秒。
# upstream_response_time - request_time = nginx自身消耗的时间
# log_format 和 access_log 必须全部开启，不然 不生效
# 日志路径：/usr/local/openresty/nginx/logs
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" "$request_time" "$upstream_addr $upstream_status $upstream_response_time"';
access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启Gzip
gzip on;
# 如果用了nginx作反向代理，如果值是 any, 表示无论后端服务器的headers头返回什么信息，都无条件启用压缩
#gzip_proxied any;
#gzip_proxied expired no-cache no-store private auth;
#expired - 启用压缩，如果header头中包含 "Expires" 头信息
#no-cache - 启用压缩，如果header头中包含 "Cache-Control:no-cache" 头信息
#no-store - 启用压缩，如果header头中包含 "Cache-Control:no-store" 头信息
#private - 启用压缩，如果header头中包含 "Cache-Control:private" 头信息
#no_last_modified - 启用压缩,如果header头中不包含 "Last-Modified" 头信息
#no_etag - 启用压缩 ,如果header头中不包含 "ETag" 头信息
#auth - 启用压缩 , 如果header头中包含 "Authorization" 头信息
#any - 无条件启用压缩
# 是否在http header中添加"Vary: Accept-Encoding"，跟Squid等缓存服务有关,建议开启
gzip_vary on;
# nginx 的静态压缩技术，nginx得安装下面得模块：ngx_http_gzip_module模块，ngx_http_gzip_static_module模块，ngx_http_gunzip_module模块
# 查看响应头 参数 ETag: W/"63b68bd6-373c" ，如果有 w/ 开头 走的是 动态压缩，如果没有 w/ 走的是静态压缩
# 将js、css等文件，生成对应的.gz文件：npm install compression-webpack-plugin -D
# vue.config.js
# const CompressionWebpackPlugin = require('compression-webpack-plugin')
# const productionGzipExtensions = ['js', 'css']
# vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
# test:/.js$|.html$|.\css/, // 匹配文件名
# threshold: 1024, // 对超过1k的数据压缩
# deleteOriginalAssets: false // 不删除源文件
# }))
#gzip_static on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1024;
# 设置压缩所需要的缓冲区大小 buffer，一般不用改
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本, 用了反向代理的话，末端通信是HTTP/1.0，默认是HTTP/1.1
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，推荐6
gzip_comp_level 6;
# 进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/atom+xml application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml font/opentype image/svg+xml image/x-icon text/x-component;
# 根据客户端的浏览器标志(user-agent)来设置，支持使用正则表达式。指定的浏览器标志不使用Gzip.该指令一般是用来排除一些明显不支持Gzip的浏览器。
gzip_disable "MSIE [1-6]\.";
#用于tomcat反向代理,解决nginx 504错误（全局配置）
#单位秒
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Real-PORT $remote_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
server {
listen 80;
listen [::]:80;
server_name localhost;
client_max_body_size 100M;
charset utf-8;
# 开启 Nginx 的统一错误页面显示
proxy_intercept_errors on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#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 html;
}
# # websocket 的配置信息
# location /api/websocket/ {
# proxy_pass http://mangodwsstest.mangod.top;
#
# proxy_read_timeout 300s;
# proxy_send_timeout 300s;
# proxy_set_header Host mangodwsstest.mangod.top;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection "Upgrade";
# proxy_set_header X-Real-IP $remote_addr;
# }
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
# resolver 10.96.0.10;
location /api {
# 从共享的环境中读取变量, $gateway_url 不能 / 结尾
set_by_lua_block $gateway_url {
local shared_dict = ngx.shared.my_shared_dict
return shared_dict:get("gateway_url")
}
proxy_redirect off;
proxy_http_version 1.1;
rewrite ^/api/(.*) /api/$1 break;
proxy_pass $gateway_url;
# proxy_pass http://gateway-service-headless:8080/;
}
# 反向代理阿里云的 OSS 地址,将 xxxxxx 更换成真实的信息
location /static/default {
proxy_pass https://xxxxxx.aliyuncs.com;
proxy_set_header Host "xxxxxx.aliyuncs.com";
proxy_hide_header Content-disposition; #注意，这一句可以防止浏览器下载文件
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
#HTTPS server
}2、比较全一点的nginx.conf配置文件：
#user nobody;
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
# 设置共享的环境变量
lua_shared_dict my_shared_dict 1m;
# 给共享的环境变量赋值
init_by_lua_block {
local gateway_url = os.getenv("GATEWAY_URL")
ngx.log(ngx.INFO, "GATEWAY_URL is set to: ", gateway_url)
local shared_dict = ngx.shared.my_shared_dict
if gateway_url then
shared_dict:set("gateway_url", gateway_url)
else
ngx.log(ngx.WARN, "GATEWAY_URL is not set")
end
}
# dns解析器的地址
# docker 的地址为 127.0.0.11
# k8s 的地址为 kubectl get svc -A |grep kube-dns 出来的IP地址，例如：10.96.0.10
resolver 127.0.0.11 ipv6=off;
include mime.types;
default_type application/octet-stream;
# 自定义日志格式，打印出 请求和 响应的时间，单位：秒。
# upstream_response_time - request_time = nginx自身消耗的时间
# log_format 和 access_log 必须全部开启，不然 不生效
# 日志路径：/usr/local/openresty/nginx/logs
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" "$request_time" "$upstream_addr $upstream_status $upstream_response_time"';
access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启Gzip
gzip on;
# 如果用了nginx作反向代理，如果值是 any, 表示无论后端服务器的headers头返回什么信息，都无条件启用压缩
#gzip_proxied any;
#gzip_proxied expired no-cache no-store private auth;
#expired - 启用压缩，如果header头中包含 "Expires" 头信息
#no-cache - 启用压缩，如果header头中包含 "Cache-Control:no-cache" 头信息
#no-store - 启用压缩，如果header头中包含 "Cache-Control:no-store" 头信息
#private - 启用压缩，如果header头中包含 "Cache-Control:private" 头信息
#no_last_modified - 启用压缩,如果header头中不包含 "Last-Modified" 头信息
#no_etag - 启用压缩 ,如果header头中不包含 "ETag" 头信息
#auth - 启用压缩 , 如果header头中包含 "Authorization" 头信息
#any - 无条件启用压缩
# 是否在http header中添加"Vary: Accept-Encoding"，跟Squid等缓存服务有关,建议开启
gzip_vary on;
# nginx 的静态压缩技术，nginx得安装下面得模块：ngx_http_gzip_module模块，ngx_http_gzip_static_module模块，ngx_http_gunzip_module模块
# 查看响应头 参数 ETag: W/"63b68bd6-373c" ，如果有 w/ 开头 走的是 动态压缩，如果没有 w/ 走的是静态压缩
# 将js、css等文件，生成对应的.gz文件：npm install compression-webpack-plugin -D
# vue.config.js
# const CompressionWebpackPlugin = require('compression-webpack-plugin')
# const productionGzipExtensions = ['js', 'css']
# vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
# test:/.js$|.html$|.\css/, // 匹配文件名
# threshold: 1024, // 对超过1k的数据压缩
# deleteOriginalAssets: false // 不删除源文件
# }))
#gzip_static on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1024;
# 设置压缩所需要的缓冲区大小 buffer，一般不用改
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本, 用了反向代理的话，末端通信是HTTP/1.0，默认是HTTP/1.1
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，推荐6
gzip_comp_level 6;
# 进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/atom+xml application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml font/opentype image/svg+xml image/x-icon text/x-component;
# 根据客户端的浏览器标志(user-agent)来设置，支持使用正则表达式。指定的浏览器标志不使用Gzip.该指令一般是用来排除一些明显不支持Gzip的浏览器。
gzip_disable "MSIE [1-6]\.";
#upstream uis {
# ip_hash; # ip hash 的算法
# hash $request_url; # URL 的 hash 算法
# least_conn; # 最小连接负载均衡
# server 10.10.221.155:80;
# server 10.10.221.155:80;
# 30s内检查心跳发送两次包，未回复就代表该机器宕机，请求分发权重比为1:2
# server 192.168.0.000:8080 weight=100 max_fails=2 fail_timeout=30s;
# server 192.168.0.000:8090 weight=200 max_fails=2 fail_timeout=30s;
# }
#用于tomcat反向代理,解决nginx 504错误（全局配置）
#单位秒
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Real-PORT $remote_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
server {
listen 80;
listen [::]:80;
# 更换为 域名 例如 server_name www.kalasearch.cn;
# server_name localhost;
# server_name 10.11.121.132;
server_name localhost;
# rewrite ^(.*) https://$server_name$1 permanent;
return 301 https://$server_name:443$request_uri;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
http2 on;
# 更换为 域名, 例如 server_name www.kalasearch.cn;
# server_name localhost;
# server_name 10.11.121.132;
server_name localhost;
charset utf-8;
client_max_body_size 100M;
#charset koi8-r;
#access_log logs/host.access.log main;
# 开启 Nginx 的统一错误页面显示
proxy_intercept_errors on;
# ssl配置
#表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
#表示使用的加密套件的类型
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_ecdh_curve secp384r1;
# 启用 SSL Session 缓存可以大大减少 TLS 的反复验证，减少 TLS 握手的 roundtrip。虽然 session 缓存会占用一定内存，但是用 1M 的内存就可以缓存 4000 个连接，可以说是非常非常划算的。同时，对于绝大多数网站和服务，要达到 4000 个同时连接本身就需要非常非常大的用户基数，因此可以放心开启
# 这里 ssl_session_cache 设置为使用 50M 内存，以及 4 小时的连接超时关闭时间 ssl_session_timeout
# Enable SSL cache to speed up for return visitors
# speed up first time. 1m ~= 4000 connections
ssl_session_cache shared:SSL:50m;
ssl_session_timeout 4h;
ssl_session_tickets off;
ssl_certificate /opt/ssl/www.xxxxx.com.pem;
ssl_certificate_key /opt/ssl/www.xxxxx.com.key;
# OCSP
# 如果不启用 OCSP Stapling 的话，在用户连接你的服务器的时候，有时候需要去验证证书。而因为一些不可知的原因（这个就不说穿了）Let's Encrypt 的验证服务器并不是非常通畅 ，因此可以造成有时候数秒甚至十几秒延迟的问题 ，这个问题在 iOS 设备上特别严重
# 解决这个问题的方法有两个：1、不使用 Let's Encrypt，可以尝试替换为阿里云提供的免费 DV 证书 2、开启 OCSP Stapling
# 开启了 OCSP Stapling 的话，跑到证书验证这一步可以省略掉。省掉一个 roundtrip，特别是网络状况不可控的 roundtrip，可能可以将你的延迟大大减少
# 通过 openssl s_client -connect test.kalasearch.cn:443 -servername kalasearch.cn -status -tlsextdebug < /dev/null 2>&1 | grep -i "OCSP response" 验证是否开启了
#ssl_stapling on;
#ssl_stapling_verify on;
#ssl_trusted_certificate /opt/ssl/www.xxxxx.com.pem;
# ssl_buffer_size 控制在发送数据时的 buffer 大小，默认设置是 16k。这个值越小，则延迟越小，而添加的报头之类会使 overhead 会变大，反之则延迟越大，overhead 越小
# 服务是 REST API 或者网站的话，将这个值调小可以减小延迟和 TTFB，但如果你的服务器是用来传输大文件的，那么可以维持 16k
# 网站或者 REST API，建议值为 4k，但是这个值的最佳取值显然会因为数据的不同而不一样，因此请尝试 2 - 16k 间不同的值
ssl_buffer_size 16k;
# index index.html index.htm;
# root /usr/share/nginx/html;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 404 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# # websocket 的配置信息
# location /api/websocket/ {
# proxy_pass http://mangodwsstest.mangod.top;
#
# proxy_read_timeout 300s;
# proxy_send_timeout 300s;
# proxy_set_header Host mangodwsstest.mangod.top;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection "Upgrade";
# proxy_set_header X-Real-IP $remote_addr;
# }
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
# resolver 10.96.0.10;
location /api {
# 从共享的环境中读取变量, $gateway_url 不能 / 结尾
set_by_lua_block $gateway_url {
local shared_dict = ngx.shared.my_shared_dict
return shared_dict:get("gateway_url")
}
proxy_redirect off;
proxy_http_version 1.1;
rewrite ^/api/(.*) /api/$1 break;
proxy_pass $gateway_url;
# proxy_pass http://gateway-service-headless:8080/;
}
# 反向代理阿里云的 OSS 地址,将 xxxxxx 更换成真实的信息
location /static/default {
proxy_pass https://xxxxxx.aliyuncs.com;
proxy_set_header Host "xxxxxx.aliyuncs.com";
proxy_hide_header Content-disposition; #注意，这一句可以防止浏览器下载文件
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
#HTTPS server
}2、启动命令docker run -p 80:80 -e GATEWAY_URL=http://host.docker.internal:8099 + 镜像名称 其中host.docker.internal是容器访问宿主机的地址，也可以通过docker0的ip地址访问
docker run -d --name=myweb --health-cmd="curl -fs http://localhost/ || exit 1" --health-interval=5s --health-retries=12 --health-timeout=2s nginx:1.23
-
--health-cmd string：运行检查健康状况的命令 -
--health-interval duration：运行间隔时间(ms|s|m|h)(缺省为 0s) -
--health-retries int：需要报告不健康的连续失败次数 -
--health-start-period duration：容器在开始健康重试倒计时之前初始化的起始周期(ms|s|m|h)(默认 0) -
--health-timeout duration：允许一次检查运行的最大时间(ms|s|m|h)(默认为 0s) -
--no-healthcheck：禁用任何容器指定的HEALTHCHECK，会使得 Dockerfile 构建出来的HEALTHCHECK功能失效
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
