天涯头条

Docker compose 部署前后端-----采用nginx代理，支持一个端口部署多个前端

2024-08-20 11:17 由 xietingweia 发表于 #其他

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:8080/;  # 后端服务器的地址和端口
        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