docker-compose + nginx部署前後端分離的專案

BaldHead發表於2022-03-27
DockerNginx後端

安裝docker

安裝必要的系統工具

# 更新yum工具
yum update -y 
# 安裝必要的工具
yum install -y yum-utils device-mapper-persistent-data lvm2

軟體源資訊切換

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

安裝

yum makecache fast
yum -y install docker-ce

配置映象加速器

tee /etc/docker/daemon.json <<-'EOF'
{
  "debug" : true,
  "registry-mirrors": ["https://dpayzz9i.mirror.aliyuncs.com"],
  "default-address-pools" : [
    {
      "base" : "172.31.0.0/16",
      "size" : 24
    }
  ]
}
EOF

啟動

systemctl daemon-reload
systemctl restart docker
systemctl enable docker

使用docker -v檢視版本號

安裝docker-compose

安裝

curl -L "https://get.daocloud.io/docker/compose/releases/download/1.27.3/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

許可權修改

chmod +x /usr/local/bin/docker-compose

使用docker-compose -v檢視版本

image-20220319155725327

docker-compose.yml檔案編寫

　　version: '2' # docker 的版本

　　services: # 配置的容器列表

　　CONTAINER_NAME: # 容器的名稱

　　image: BASE_IMAGE # 這個一個容器的基礎映象

　　ports: # 你的容器需不需要做埠對映

　　- "host_port:container_port"

　　volumes: # 資料卷配置

　　- host_dir:container_dir

　　environment: # 環境變數(map 的配置方式 key: value)

　　PARAM: VALUE

　　environments: # 環境變數(陣列的配置方式 - key=value)

　　- PARAM=VALUE

　　restart: always # 容器的重啟策略

　　dns: # dns 的配置

　　- 8.8.8.8

配置檔案詳解

詳解連結

配置檔案示例

version: '3.7'

services:
  film-service:
    container_name: film-service
    hostname: film-service
    image: adoptopenjdk/openjdk11
    volumes:
      # jar包的掛載地址
      # - 宿主機內jar包的地址(需要修改)：容器內jar包的地址(無需修改)
      - /usr/software/film/film-0.0.1-SNAPSHOT.jar:/app/app.jar
      # 同步宿主機的時間到容器內
      - /etc/localtime:/etc/localtime
    privileged: true
    restart: always
    ports:
      - "9090:9090"
    # 啟動命令
    command: java -Xmx512m -jar /app/app.jar
    # 環境變數相關配置
    environment:
     #- spring.profiles.active=test
      # 啟動執行
      - server.port=9090
      - TZ=Asia/Shanghai
    networks:
      - film_network
 
  nginx:
    container_name: nginx-film
    hostname: nginx-film
    image: nginx
    volumes:
      # hostm目錄: container目錄
      - /usr/software/film/conf/:/etc/nginx/conf.d/
      - /usr/software/film-web/dist/:/etc/nginx/web/
      - /usr/software/film-admin/dist/:/etc/nginx/admin/
      - /etc/localtime:/etc/localtime
    environment:
      - TZ=Asia/Shanghai
    privileged: true
    restart: always
    ports:
      # "host_port: container_port"
      - "80:80"
      - "443:443"
    networks:
      - film_network
    deploy:
      # limit用於限制最大的資源使用數量，reservation為最低的資源佔用量。
     resources:
       limits:
         cpus: '0.50'
         memory: 10M

networks:
  film_network:
    external: true

解決js、css檔案404的情況

Vue專案配置

**直接修改vue專案中的 **vue.config.js檔案，將基本路徑設定為相對路徑
module.export {
// 基本路徑
publicPath:"./", // 可以設定成[相對路徑，這樣所有的資源都會被連結為相對路徑，打出來的包可以被部署在任意路徑
outputDir:“dist”, //打包時生成的生產環境構建檔案的目錄
assetsDir: ‘web’, // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
}

image-20220319162817765

這樣打包出來的js、css檔案路徑會是
image

dist/web/*.js

相關文章