当前位置： 首页 > news >正文

个人性质的网站备案容易查,无忧企业网站管理系统,有哪些平台免费做推广,邯郸wap网站建设报价前端部署采用 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// } });