镇江做网站,稿定设计app免费版官方,wordpress邮件验证码确认,个人主页介绍前端部署采用 docker 的方式#xff0c; 实现在容器启动时传递环境变量#xff0c; 请求不同服务地址
实现思路#xff1a; 定义.env.xxx 文件#xff08;环境变量赋值#xff09;#xff0c;在compose.yml中引入.env.xxx 文件#xff0c;环境变量通过nginx的sub_filte…前端部署采用 docker 的方式 实现在容器启动时传递环境变量 请求不同服务地址
实现思路 定义.env.xxx 文件环境变量赋值在compose.yml中引入.env.xxx 文件环境变量通过nginx的sub_filter放到html的meta标签里 ----------------------------------------------------------【etl-ui.env】--------------------------------------------------------------------
API_REQUEST_ADDRESShttp://xxx.xxx.x.xx:8601----------------------------------------------------------【compose.yml】--------------------------------------------------------------------
compose.yml中前端容器中添加env_file, 引入环境变量配置文件
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:8700env_file:- etl-ui.envdeploy:resources:limits:memory: 8Genvironment:TZ: Asia/Shanghaidepends_on:- myy-myy-ignite-1----------------------------------------------------------【entrypoint.sh】-------------------------------------------------------------------- 在Dockerfile同级目录下添加entrypoint.sh文件, 获取容器启动时传入的环境变量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 复制entrypoint.sh设置执行权限和容器启动入口
COPY entrypoint.sh /# 设置执行权限
RUN chmod x /entrypoint.sh# 设置容器启动时的入口
ENTRYPOINT [/entrypoint.sh]Dockerfile完整代码
# Stage 1: 构建Node.js应用
FROM node:16.14.0 AS builder
WORKDIR /app
RUN npm cache clean —force
COPY package*.json ./
RUN npm install --force --registryhttp://119.3.241.212:8088/repository/npm-group
COPY . .
RUN npm run build:sit# Stage 2: 构建Nginx镜像
FROM nginx:latest
WORKDIR /usr/share/nginx/html# 将Node.js应用构建结果复制到Nginx镜像中
COPY --frombuilder /app/dist/ .# 可选复制Nginx配置文件
COPY nginx.conf /etc/nginx/nginx.conf# 暴露端口
EXPOSE 8700COPY entrypoint.sh /# 设置执行权限
RUN chmod x /entrypoint.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;}# 静态资源地址 (其中 /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 contentAPI_REQUEST_ADDRESS_VAL nameAPI_REQUEST_ADDRESS /, 存储容器启动时传入的环境变量API_REQUEST_ADDRESS_VAL
!DOCTYPE html
html langzh-cmn-Hansheadmeta charsetutf-8 /meta contentIEedge http-equivX-UA-Compatible /meta contentwebkit namerenderer /metacontentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenonameviewport/link href% BASE_URL %favicon.ico relicon /linkhref% BASE_URL %static/css/loading.css?random% VUE_APP_RANDOM %relstylesheet/title% VUE_APP_TITLE %/titlemetacontentmyy管理系统namekeywords/meta content% VUE_APP_AUTHOR % nameauthor /meta contentAPI_REQUEST_ADDRESS_VAL nameAPI_REQUEST_ADDRESS /% if (process.env.NODE_ENV ! development) { %script src% BASE_URL %static/js/web-report-vue.min.js/script!-- script typetext/javascriptwindow.Performance({domain: % VUE_APP_PERFORMANCE %/api/v1/report/web,add: {appId: % VUE_APP_PERFORMANCE_APP_ID %}});/script --% }%/headbodynoscript/noscriptdiv idappdiv classfirst-loading-wrpdiv classloading-wrpspan classdot dot-spini/ii/ii/ii/i/span/divh1% VUE_APP_TITLE %/h1/div/div/bodyscript typetext/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请在Chrome浏览器上使用系统/p pa hrefhttps://www.google.cn/intl/zh-CN/chrome/ target_blank点击下载/a/p;}}})();/script
/html
----------------------------------------------------------【服务请求】-------------------------------------------------------------------- axios请求服务时拿到meta标签content 属性里面存储的API_REQUEST_ADDRESS_VAL的值,即为需要请求的后台服务地址
const CUSTOM_API_REQUEST_ADDRESS document.querySelector(meta[nameAPI_REQUEST_ADDRESS])?.getAttribute(content)
const API_CONTEXT /myy/myy-server
const requestUrl process.env.NODE_ENV development ? : (CUSTOM_API_REQUEST_ADDRESSAPI_CONTEXT)
const instance axios.create({baseURL: requestUrl,timeout: requestTimeout// headers: {// Content-Type: contentType// }
});
