前端和后端應用都放到k8s中的操作配置說明

看這個文章之前，先看這篇文章：https://www.cnblogs.com/sanduzxcvbnm/p/14953929.html

后端部署方式不變，這里主要說明前端文件的部署方式

訪問流程如下：nginx-ingress == > nginx（前端）== > 后端應用

前端流程

前端項目中有如下三個文件

當前端代碼提交到gitlab后，觸發gitlab-runner根據文件.gitlab-ci.yml文件內容進行操作，先編譯打包成dist文件夾，然后進入到這個文件夾中做成dist.tar.gz壓縮包
然后根據Dockerfile文件內容，基礎鏡像使用nginx，把nginx.conf配置文件，dist.tar.gz壓縮包ADD進去，構造一個含有前端文件的nginx鏡像

前端文件中訪問后端的內容跟上面的保持一樣,注意域名和路徑

// 創建 axios 實例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? 'http://www.xxx.com/jdd-parking-cloud-admin' : '/jdd-parking-cloud-admin',
  // baseURL: 'https://www.jdd966.com/jdd-boot',
  // baseURL: '', // api base_url
  timeout: 30000 // 請求超時時間
})

前端文件使用的Dockerfile文件內容

FROM nginx:stable-alpine
MAINTAINER [e-mail]
COPY nginx.conf /etc/nginx/nginx.conf
ADD dist.tar.gz /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

使用的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://jdd-parking-cloud-admin:8093/; # k8s中后端應用的service:port
        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;
    }

}

.gitlab-ci.yml文件內容

variables:
  DOCKER_DRIVER: overlay2
  MAVEN_CLI_OPTS: "-s .m2/settings.xml --batch-mode"
  MAVEN_OPTS: "-Dmaven.repo.local=.m2/repository"


cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/

stages:
  - package
  - build


yarn_step:
  tags:
    - yarn
  stage: package
  script:
    - npm config set registry https://registry.npm.taobao.org/
    - yarn install
    - yarn run build
    - cd dist && tar -zcvf ../dist.tar.gz * # 打包整個dist文件(包含目錄dist)和打包dist下的文件(不包含目錄dist)跟DOckerfile文件中ADD有關，進而影響到nginx.conf文件
  artifacts:
    paths:
      - dist.tar.gz
  only:
    - prod

develop_docker_step:
  tags:
    - docker
  stage: build
  script:
    - export TAG=`date "+%Y%m%d%H%M%S"`
    - docker build -t jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG .
    - docker login -u admin -p admin123 jdd.io
    - docker push jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG
    - echo $TAG
    - docker rmi jdd.io/jdd-k8s/$CI_PROJECT_NAME:$TAG
  only:
    - prod

k8s中操作

1.容器端口

2.數據卷

3.服務

4.路由

瀏覽器訪問web頁面上傳的圖片處理辦法

后端配置文件中設置的有保存這些圖片的路徑，給這個路徑創建一個數據卷進行掛載，讀寫權限。
前端這兒也配置同一個數據卷掛載，只讀權限，nginx配置文件中增加這個掛載路徑的訪問路徑

nginx配置文件中增加圖片訪問

location /static/images/ {
    alias  /usr/local/nginx/html/pic;
    autoindex on;
}

或者存儲圖片使用FastDFS,阿里雲OSS