1. web項目請求后端必須在前端代碼內部寫死后端的IP地址與端口(比如.env文件)
2. 通過docker啟動傳入參數:
更改前端封裝http請求:
/** * docker 運行命令傳入請求后端的IP地址 * 打包命令:sudo docker build --no-cache --memory-swap -1 . -t 鏡像名稱 * 啟動命令:sudo docker run -p 4000:80 -e VUE_APP_API_BASE_URL=http://192.168.0.1:8001/ -d -t 鏡像名稱 */ const baseUrl = () => { const { promiseBaseUrl } = document.querySelector('html').dataset if (promiseBaseUrl.indexOf('http') === 0) { return `${promiseBaseUrl}` } return process.env.VUE_APP_API_BASE_URL } // 創建axios實例,在這里可以設置請求的默認配置 const service = axios.create({ timeout: 6000, // 設置超時時間6s baseURL: baseUrl() })
環境變量文件:
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL= http://192.168.160.248:10700/api
docker 打包命令:
docker run -p 2021:80 -e VUE_APP_API_BASE_URL=http://后端IP:后端端口/api -d -t web
dockerfile:
#該鏡像是基於nginx:latest鏡像構建的 FROM nginx #作者名 MAINTAINER lingdu #刪除目錄下的default.conf文件 #RUN rm /etc/nginx/conf.d/default.conf #將default.conf復制到/etc/nginx/conf.d/下,用本地的default.conf配置來替換nginx鏡像里的默認配置 #ADD default.conf /etc/nginx/conf.d/ #將項目根目錄下dist文件夾復制到鏡像/usr/share/nginx/html/目錄下 COPY ./dist/ /usr/share/nginx/html/ #指定容器的工作目錄 WORKDIR /etc/nginx #指定於外界交互的端口,即容器在運行時監聽的端口 EXPOSE 80 #設置程序的入口程序,運行容器時執行的shell命令,區別在於ENTRYPOINT后面攜帶的參數不會被docker run 提供的參數覆蓋,而CMD會被覆蓋 #ENTRYPOINT [ "/usr/sbin/nginx", "-g", "daemon off;" ] # sed [-nefr] [動作] # 選項與參數: # -n :使用安靜(silent)模式。在一般 sed 的用法中,所有來自 STDIN 的數據一般都會被列出到終端上。但如果加上 -n 參數后,則只有經過sed 特殊處理的那一行(或者動作)才會被列出來。 # -e :直接在命令列模式上進行 sed 的動作編輯; # -f :直接將 sed 的動作寫在一個文件內, -f filename 則可以運行 filename 內的 sed 動作; # -r :sed 的動作支持的是延伸型正規表示法的語法。(默認是基礎正規表示法語法) # -i :直接修改讀取的文件內容,而不是輸出到終端。 # sed -i 's/原字符串/新字符串/' /home/1.txt # sed -i 's/原字符串/新字符串/g' /home/1.txt CMD ["/bin/bash", "-c", "sed -i \"s@<html@<html data-promise-base-url=\"$VUE_APP_API_BASE_URL\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]