1.前端vue項目
項目根目錄下有Dockerfile文件，.gitlab-ci.yml文件和nginx.conf文件
Dockerfile文件作用：根據基礎nginx鏡像前端vue項目生成的文件打包進去
FROM nginx:stable-alpine
MAINTAINER 1103324414@qq.com
COPY nginx.conf /etc/nginx/nginx.conf
ADD dist.tar.gz /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
.gitlab-ci.yml文件作用：提交代碼后根據分支不同觸發自動編譯打包vue項目，docker鏡像的工作
nginx.conf文件作用：前端vue項目訪問后端應用的nginx路徑映射配置,尤其是需要注意的，這個跟普通部署的不一樣，稍后詳細分析這個
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log error;
pid /var/run/nginx.pid;
events {
use epoll;
worker_connections 65535;
multi_accept off;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format log_json '{"@timestamp": "$time_local", '
'"remote_addr": "$remote_addr", '
'"referer": "$http_referer", '
'"request": "$request", '
'"status": $status, '
'"bytes": $body_bytes_sent, '
'"agent": "$http_user_agent", '
'"upstream_addr": "$upstream_addr",'
'"upstream_status": "$upstream_status",'
'"up_resp_time": "$upstream_response_time",'
'"request_time": "$request_time"'
' }';
access_log /var/log/nginx/access.log log_json;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
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].";
# include /etc/nginx/conf.d/*.conf;
server {
listen 80;
location /jdd-parking-cloud-admin/ {
proxy_pass http://gateway:8094/;
#proxy_set_header X-Forwarded-Proto $scheme;
#proxy_set_header Host $http_host;
#proxy_set_header X-Real-IP $remote_addr;
}
#解決Router(mode: 'history')模式下，刷新路由地址不能找到頁面的問題
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
if (!-e \$request_filename) {
rewrite ^(.*)\$ /index.html?s=\$1 last;
break;
}
}
access_log /var/log/nginx/default_access.log log_json;
}
}
前端項目分析
分析docker項目鏡像
把編譯vue項目后生成的dist文件夾重命名為mgr，把mgr文件夾放到nginx的html目錄下，且nginx的根目錄是到html，並不是到html下的mgr。
這樣放置的結果是訪問的時候，直接訪問/，出現的是nginx的默認index.html文件內容，訪問/mgr的時候則是vue項目的內容。
同理放置其他vue項目到html目錄下，訪問的時候只需要加上文件名就行了，就不用再調整nginx.conf內容了。
部署到k8s上的分析
若想使用域名訪問項目，設置倆ingress就可以了，一個是指向web的，也就是前端vue項目的service，另一個是ingress是指向后端服務的(或者是指向網關)
訪問流程大致如下，這個跟之前的流程不太一樣
域名-> ingress -> service -> pod。
之前的流程如下：
vue項目中配置的是域名，直接請求的后端服務地址，比如：
然后nginx.conf配置文件中寫上后端服務的路徑
這樣一來，比如登錄頁面的驗證碼，就不是瀏覽器直接清理后端服務，而是瀏覽器再次請求nginx服務，然后再轉發給后端服務來使用。
部署到k8s中，留意到vue項目中使用的nginx.conf文件內容，就只有/，沒有到后端服務的路徑了。
現在訪問流程變成如下：
瀏覽器訪問，請求到ingress，ingress在路徑中找到對應的service然后進行轉發給對應的pod，vue中有請求后端的服務，則會再次請求ingress，然后找到配置的后端服務service。這樣就不應再在nginx.conf中配置轉發到后端的路徑了。
