封装前端项目为镜像，运行容器后在上层使用nginx代理的有关配置说明
vue项目编译后的前端项目
比如前端项目访问地址是Lhttp://www.xxx.com/aaa,那么要做的工作就是把前端文件目录aaa放在nginx的默认html目录下
Dockerfile文件内容：
FROM nginx:stable-alpine
MAINTAINER 1103324414@qq.com
COPY nginx.conf /etc/nginx/nginx.conf
ADD dist.tar.gz /usr/share/nginx/html/ # dist.tar.gz压缩包解压缩后是前端访问路径命名的文件夹(在这里解压缩后时aaa文件夹)，里面是具体的静态文件
EXPOSE 81 # 端口号跟具体使用的nginx.conf中写的保持一致
CMD ["nginx", "-g", "daemon off;"]
ngnx.conf文件内容：
user nginx;
worker_processes auto;
#error_log /var/log/nginx/error.log error;
pid /var/run/nginx.pid;
worker_rlimit_nofile 65536;
events {
use epoll;
worker_connections 65535;
accept_mutex on;
multi_accept on;
}
http {
include mime.types;
default_type application/octet-stream;
log_format json '{"@timestamp":"$time_iso8601",'
'"server_addr":"$server_addr",'
'"server_name":"$server_name",'
'"server_port":"$server_port",'
'"server_protocol":"$server_protocol",'
'"client_ip":"$remote_addr",'
'"client_user":"$remote_user",'
'"status":"$status",'
'"request_method": "$request_method",'
'"request_length":"$request_length",'
'"request_time":"$request_time",'
'"request_url":"$request_uri",'
'"request_line":"$request",'
'"send_client_size":"$bytes_sent",'
'"send_client_body_size":"$body_bytes_sent",'
'"proxy_protocol_addr":"$proxy_protocol_addr",'
'"proxy_add_x_forward":"$proxy_add_x_forwarded_for",'
'"proxy_port":"$proxy_port",'
'"proxy_host":"$proxy_host",'
'"upstream_host":"$upstream_addr",'
'"upstream_status":"$upstream_status",'
'"upstream_cache_status":"$upstream_cache_status",'
'"upstream_connect_time":"$upstream_connect_time",'
'"upstream_response_time":"$upstream_response_time",'
'"upstream_header_time":"$upstream_header_time",'
'"upstream_cookie_name":"$upstream_cookie_name",'
'"upstream_response_length":"$upstream_response_length",'
'"upstream_bytes_received":"$upstream_bytes_received",'
'"upstream_bytes_sent":"$upstream_bytes_sent",'
'"http_host":"$host",'
'"http_cookie":"$http_cooke",'
'"http_user_agent":"$http_user_agent",'
'"http_origin":"$http_origin",'
'"http_upgrade":"$http_upgrade",'
'"http_referer":"$http_referer",'
'"http_x_forward":"$http_x_forwarded_for",'
'"http_x_forwarded_proto":"$http_x_forwarded_proto",'
'"https":"$https",'
'"http_scheme":"$scheme",'
'"invalid_referer":"$invalid_referer",'
'"gzip_ratio":"$gzip_ratio",'
'"realpath_root":"$realpath_root",'
'"document_root":"$document_root",'
'"is_args":"$is_args",'
'"args":"$args",'
'"connection_requests":"$connection_requests",'
'"connection_number":"$connection",'
'"ssl_protocol":"$ssl_protocol",'
'"ssl_cipher":"$ssl_cipher"}';
#access_log /var/log/nginx/access.log log_json;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
proxy_connect_timeout 90;
proxy_read_timeout 300;
proxy_send_timeout 300;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_proxied any;
gzip_disable "MSIE [1-6].";
server {
listen 81; # 监听端口号跟Dockerfile文件中写的保持一致
server_name localhost;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
}
#access_log /var/log/nginx/default_access.log json;
}
}
上一层nginx.conf配置
upstream aaa {
server 127.0.0.1:81 weight=1 max_fails=2 fail_timeout=10s;
}
server {
listen 80;
server_name www.xxx.com;
location / {
root html;
index index.html index.htm;
}
location ^~ /aaa {
proxy_redirect http://$host:81 http://$host;
proxy_pass http://aaa;
proxy_set_header Host $http_host;
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;
}
}
普通前端项目
比如文件夹bbb,里面是index.html文件以及js和css文件夹这种形式的，有别去vue编译后的这种
比如前端项目访问地址是Lhttp://www.xxx.com/bbb,那么要做的工作就是把前端文件目录bbb放在nginx的默认html目录下
Dockerfile文件内容：
注意：端口号不一样
FROM nginx:stable-alpine
MAINTAINER 1103324414@qq.com
COPY nginx.conf /etc/nginx/nginx.conf
ADD dist.tar.gz /usr/share/nginx/html/
EXPOSE 83
CMD ["nginx", "-g", "daemon off;"]
nginx.conf文件内容：
注意：端口号不一样
user nginx;
worker_processes auto;
#error_log /var/log/nginx/error.log error;
pid /var/run/nginx.pid;
worker_rlimit_nofile 65536;
events {
use epoll;
worker_connections 65535;
accept_mutex on;
multi_accept on;
}
http {
include mime.types;
default_type application/octet-stream;
log_format json '{"@timestamp":"$time_iso8601",'
'"server_addr":"$server_addr",'
'"server_name":"$server_name",'
'"server_port":"$server_port",'
'"server_protocol":"$server_protocol",'
'"client_ip":"$remote_addr",'
'"client_user":"$remote_user",'
'"status":"$status",'
'"request_method": "$request_method",'
'"request_length":"$request_length",'
'"request_time":"$request_time",'
'"request_url":"$request_uri",'
'"request_line":"$request",'
'"send_client_size":"$bytes_sent",'
'"send_client_body_size":"$body_bytes_sent",'
'"proxy_protocol_addr":"$proxy_protocol_addr",'
'"proxy_add_x_forward":"$proxy_add_x_forwarded_for",'
'"proxy_port":"$proxy_port",'
'"proxy_host":"$proxy_host",'
'"upstream_host":"$upstream_addr",'
'"upstream_status":"$upstream_status",'
'"upstream_cache_status":"$upstream_cache_status",'
'"upstream_connect_time":"$upstream_connect_time",'
'"upstream_response_time":"$upstream_response_time",'
'"upstream_header_time":"$upstream_header_time",'
'"upstream_cookie_name":"$upstream_cookie_name",'
'"upstream_response_length":"$upstream_response_length",'
'"upstream_bytes_received":"$upstream_bytes_received",'
'"upstream_bytes_sent":"$upstream_bytes_sent",'
'"http_host":"$host",'
'"http_cookie":"$http_cooke",'
'"http_user_agent":"$http_user_agent",'
'"http_origin":"$http_origin",'
'"http_upgrade":"$http_upgrade",'
'"http_referer":"$http_referer",'
'"http_x_forward":"$http_x_forwarded_for",'
'"http_x_forwarded_proto":"$http_x_forwarded_proto",'
'"https":"$https",'
'"http_scheme":"$scheme",'
'"invalid_referer":"$invalid_referer",'
'"gzip_ratio":"$gzip_ratio",'
'"realpath_root":"$realpath_root",'
'"document_root":"$document_root",'
'"is_args":"$is_args",'
'"args":"$args",'
'"connection_requests":"$connection_requests",'
'"connection_number":"$connection",'
'"ssl_protocol":"$ssl_protocol",'
'"ssl_cipher":"$ssl_cipher"}';
#access_log /var/log/nginx/access.log log_json;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
proxy_connect_timeout 90;
proxy_read_timeout 300;
proxy_send_timeout 300;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_proxied any;
gzip_disable "MSIE [1-6].";
server {
listen 83; # 监听端口号跟Dockerfile文件中写的保持一致
server_name localhost;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
}
#access_log /var/log/nginx/default_access.log json;
}
}
上一层nginx.conf配置
#upstream bbb {
# server 127.0.0.1:83 weight=1 max_fails=2 fail_timeout=10s;
#}
server {
listen 80;
server_name www.xxx.com;
location / {
root html;
index index.html index.htm;
}
# 注意：部分内容写法跟上面vue的前端项目不一样
location ^~ /bbb {
proxy_pass http://127.0.0.1:83;
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 X-Forwarded-Proto $scheme;
}
}