做論壇網(wǎng)站前段用什么框架好點(diǎn)網(wǎng)絡(luò)廣告的概念
前端部署采用 docker 的方式， 實(shí)現(xiàn)在容器啟動(dòng)時(shí)傳遞環(huán)境變量， 請(qǐng)求不同服務(wù)地址
實(shí)現(xiàn)思路： 定義.env.xxx 文件（環(huán)境變量賦值），在compose.yml中引入.env.xxx 文件，環(huán)境變量通過nginx的sub_filter放到html的meta標(biāo)簽里
----------------------------------------------------------【etl-ui.env】--------------------------------------------------------------------
API_REQUEST_ADDRESS=http://xxx.xxx.x.xx:8601
----------------------------------------------------------【compose.yml】--------------------------------------------------------------------
compose.yml中前端容器中添加env_file, 引入環(huán)境變量配置文件
version: "6.6"
name: myy-system
services:myy-myy-ui-1:container_name: myy-myy-ui-1image: xxx.xxx.x.xx:8084/myy-app-ui:latestrestart: unless-stoppedports:- "8001:8700"env_file:- etl-ui.envdeploy:resources:limits:memory: 8Genvironment:TZ: Asia/Shanghaidepends_on:- myy-myy-ignite-1
----------------------------------------------------------【entrypoint.sh】--------------------------------------------------------------------
在Dockerfile同級(jí)目錄下添加entrypoint.sh文件, 獲取容器啟動(dòng)時(shí)傳入的環(huán)境變量API_REQUEST_ADDRESS的值保存到變量API_REQUEST_ADDRESS_VAL中
#!/bin/bashsed -i "s|API_REQUEST_ADDRESS_VAL|${API_REQUEST_ADDRESS}|g" /usr/share/nginx/html/index.html
exec nginx -g 'daemon off;'----------------------------------------------------------【Dockerfile】--------------------------------------------------------------------
通過nginx的sub_filter放到html的meta： 復(fù)制entrypoint.sh，設(shè)置執(zhí)行權(quán)限和容器啟動(dòng)入口
COPY entrypoint.sh /# 設(shè)置執(zhí)行權(quán)限
RUN chmod +x /entrypoint.sh# 設(shè)置容器啟動(dòng)時(shí)的入口
ENTRYPOINT ["/entrypoint.sh"]
Dockerfile完整代碼：
# Stage 1: 構(gòu)建Node.js應(yīng)用
FROM node:16.14.0 AS builder
WORKDIR /app
RUN npm cache clean —force
COPY package*.json ./
RUN npm install --force --registry=http://119.3.241.212:8088/repository/npm-group
COPY . .
RUN npm run build:sit# Stage 2: 構(gòu)建Nginx鏡像
FROM nginx:latest
WORKDIR /usr/share/nginx/html# 將Node.js應(yīng)用構(gòu)建結(jié)果復(fù)制到Nginx鏡像中
COPY --from=builder /app/dist/ .# 可選：復(fù)制Nginx配置文件
COPY nginx.conf /etc/nginx/nginx.conf# 暴露端口
EXPOSE 8700COPY entrypoint.sh /# 設(shè)置執(zhí)行權(quán)限
RUN chmod +x /entrypoint.sh# 設(shè)置容器啟動(dòng)時(shí)的入口
ENTRYPOINT ["/entrypoint.sh"]----------------------------------------------------------【nginx.conf】--------------------------------------------------------------------
user nginx;
worker_processes 1;error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;events {worker_connections 1024;
}http {include /etc/nginx/mime.types;default_type application/octet-stream;log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;#tcp_nopush on;keepalive_timeout 65;gzip_static on;gzip_proxied expired no-cache no-store private auth;gzip_disable "MSIE [1-6]\.";gzip_vary on;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 9;gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;client_max_body_size 20m;server {listen 8700;listen [::]:8700;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;}# 靜態(tài)資源地址 (其中 /myy/myy-server/ 為上下文)location ~* ^/myy/myy-server/(.*)$ {rewrite ^/myy/myy-server/(.*)$ /$1 last;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}
}
----------------------------------------------------------【index.html】--------------------------------------------------------------------
public目錄下的index.html
添加 <meta content="API_REQUEST_ADDRESS_VAL" name="API_REQUEST_ADDRESS" />, 存儲(chǔ)容器啟動(dòng)時(shí)傳入的環(huán)境變量API_REQUEST_ADDRESS_VAL
<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><meta content="IE=edge" http-equiv="X-UA-Compatible" /><meta content="webkit" name="renderer" /><metacontent="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"/><link href="<%= BASE_URL %>favicon.ico" rel="icon" /><linkhref="<%= BASE_URL %>static/css/loading.css?random=<%= VUE_APP_RANDOM %>"rel="stylesheet"/><title><%= VUE_APP_TITLE %></title><metacontent="myy管理系統(tǒng)"name="keywords"/><meta content="<%= VUE_APP_AUTHOR %>" name="author" /><meta content="API_REQUEST_ADDRESS_VAL" name="API_REQUEST_ADDRESS" /><% if (process.env.NODE_ENV !== 'development') { %><script src="<%= BASE_URL %>static/js/web-report-vue.min.js"></script><!-- <script type="text/javascript">window.Performance({domain: `<%= VUE_APP_PERFORMANCE %>/api/v1/report/web`,add: {appId: `<%= VUE_APP_PERFORMANCE_APP_ID %>`}});</script> --><% }%></head><body><noscript></noscript><div id="app"><div class="first-loading-wrp"><div class="loading-wrp"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div><h1><%= VUE_APP_TITLE %></h1></div></div></body><script type="text/javascript">(function () {var ua = navigator.userAgent.toLocaleLowerCase();var browserType = "",browserVersion = "";if (ua.match(/msie/) != null || ua.match(/trident/) != null) {browserType = "IE";browserVersion =ua.match(/msie ([\d.]+)/) != null? ua.match(/msie ([\d.]+)/)[1]: ua.match(/rv:([\d.]+)/)[1];if (1 * browserVersion < 12) {document.body.innerHTML = "<p>請(qǐng)?jiān)贑hrome瀏覽器上使用系統(tǒng)</p>" +"<p><a href='https://www.google.cn/intl/zh-CN/chrome/' target='_blank'>點(diǎn)擊下載</a></p>";}}})();</script>
</html>----------------------------------------------------------【服務(wù)請(qǐng)求】--------------------------------------------------------------------
axios請(qǐng)求服務(wù)時(shí)拿到meta標(biāo)簽content 屬性里面存儲(chǔ)的API_REQUEST_ADDRESS_VAL的值,即為需要請(qǐng)求的后臺(tái)服務(wù)地址
const CUSTOM_API_REQUEST_ADDRESS = document.querySelector('meta[name="API_REQUEST_ADDRESS"]')?.getAttribute('content')
const API_CONTEXT = '/myy/myy-server'
const requestUrl = process.env.NODE_ENV === "development" ? "" : (CUSTOM_API_REQUEST_ADDRESS+API_CONTEXT)
const instance = axios.create({baseURL: requestUrl,timeout: requestTimeout// headers: {// "Content-Type": contentType// }
});