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

前言

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