Docker compose 部署前後端-----採用nginx代理，支援一個埠部署多個前端

xietingweia發表於2024-08-20
Docker後端Nginx前端

Docker compose 部署前後端-----採用nginx代理，支援一個埠部署多個前端

1、Linux伺服器安裝最新版docker，確保有docker compose 命令

2、建立docker工作區目錄

mkdir docker-workspace

3、進入docker 工作區目錄，建立前端nginx目錄，建立後端 xxx 目錄

mkdir nginx xxx

4、建立config目錄和nginx.conf檔案

cd nginx

mkdir config

cd config

vi 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;
    client_max_body_size 100m;
    underscores_in_headers on;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    # include /etc/nginx/conf.d/*.conf;

# 部署aaa前端包，後端介面代理
server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ index.html;
            index  index.html index.htm;
        }

        location /aaa {
            alias /usr/share/nginx/html/aaa;
            try_files $uri $uri/ /aaa/index.html;
            index  index.html index.htm;
        }

    location /xxx-prod-api/ {
        proxy_pass http://x.x.x.x:8801/;  # 後端伺服器的地址和埠
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
  }
}

5、前端部署，docker容器化部署nginx，建立docker-compose.yml檔案,掛載nginx.conf和aaa前端包 （前端包dist改名為aaa）

vi docker-compose.yml

version: '1'
services:
  nginx:
     image: nginx:latest
     container_name: nginx
     hostname: nginx
     # network_mode: "host"
     ports:  
      - 80:80
     volumes:  
      - ./config/nginx.conf:/etc/nginx/nginx.conf
      - ./aaa:/usr/share/nginx/html/aaa
     tty: true
     # restart: always
     command: nginx -g "daemon off;"

執行 docker compose up -d 進行容器化部署

檢視日誌 docker logs -f nginx

6、後端部署，後端包重新命名為xxx.jar,加入xxx目錄，建立docker-compose.yml檔案，掛載資原始檔service

cd xxx

mkdir service

cd service

vi start.sh

java -Duser.timezone=Asia/Shanghai -Dlog4j2.formatMsgNoLookups=true  -Djava.awt.headless=true -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8 -Djava.security.egd=file:/dev/./urandom  -jar -Dspring.config.location=/opt/java_project/service/application.properties xxx.jar

將xxx.jar 和 application.properties 放到service目錄下

cd ../ 到 xxx目錄

vi docker-compose.yml

version: "3"
services:
  xxx:
    container_name: xxx
    image: openjdk:17
    volumes:
      - ./service/:/opt/java_project/service
    ports:
      - "8801:8801"
    environment:
      - TZ="Asia/Shanghai"
      - LANG=en_US,UTF-8
      - LANGUAGE=en_US:en
      - LC_ALL=en_US.UTF-8
    working_dir: /opt/java_project/service  
    command: sh ./start.sh

執行 docker compose up -d 進行容器化部署

檢視日誌 docker logs -f xxx

示例demo自取：https://gitee.com/xietingwei1/demo.git

相關文章