1.前端vue專案

專案根目錄下有Dockerfile檔案，.gitlab-ci.yml檔案和nginx.conf檔案

Dockerfile檔案作用：根據基礎nginx映象前端vue專案生成的檔案打包進去

FROM nginx:stable-alpine
MAINTAINER [email protected]
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中配置轉發到後端的路徑了。