(2024)docker-compose实战 (6)部署前端项目(react, vue)

时间：2024-07-08 07:05:50

前言

  1. 本次仅使用nginx搭建单一的前端项目, 前端项目可以是html, react, vue.
  2. 项目目录中需要携带nginx的配置文件(conf/default.conf).
  3. 前端文件直接拷贝到项目目录中即可.
  4. 如果不确定镜像的配置文件目录, 可以通过 docker inspect 镜像名 来查看具体的配置信息.
  5. 使用docker-compose.yaml时, 请自行去除注释.

目录结构

web/											/web/目录
|
|
├─ laoliu_pro/									项目目录
|  ├─ conf/ 									nginx配置文件目录
|  |  └─  default.conf							本项目的nginx配置文件, 有且只有一个文件
|  ├─ html/ 									前端项目目录
|  |  └─  index.html							前端项目文件, 这里是一个文件, 正常情况下可能会有多个文件
└─ docker-compose.yaml							docker-composer的配置文件

docker-compose.yaml配置文件说明

:ro 表示指定该 volume 为只读

# 指定 docker-compose 文件的版本
version: "3"
# 定义应用程序的服务
services:
      
  # 服务名
  laoliu_pro:
    restart: always
    # 指定服务使用的镜像
    image: nginx:latest
    # 端口映射
    ports:
      - 80:80
      - 443:443
    # 挂载卷 <宿主机路径>:<容器路径>
    volumes:
      # docker时间同步
      - /etc/localtime:/etc/localtime:ro
      # 映射项目文件
      - ./laoliu_pro/html:/app
      # 映射nginx的配置文件
      - ./laoliu_pro/conf:/etc/nginx/conf.d:ro
    # 工作目录
    working_dir: /app

nginx配置文件

文件路径: /web/laoliu_pro/conf/default.conf

server {
    listen 80 default;
    server_name laoliu.pro;
    root /app;
    try_files $uri $uri/index.html /index.html;
    index index.html;

    location /assets/ {
        etag on;
    }
}

前端项目

前端项目直接部署到/web/laoliu_pro/html中即可.

启动容器

# 启动容器
docker-compose up -d

启动日志

如果容器启动失败, 可以通过启动日志查看具体的报错信息, 比如容器启动时没有找到配置文件等.

# 查看启动日志
docker-compose logs laoliu_pro

相关文章