前言
- 本次仅使用nginx搭建单一的前端项目, 前端项目可以是html, react, vue.
- 项目目录中需要携带nginx的配置文件(conf/default.conf).
- 前端文件直接拷贝到项目目录中即可.
- 如果不确定镜像的配置文件目录, 可以通过 docker inspect 镜像名 来查看具体的配置信息.
- 使用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: /appnginx配置文件
文件路径: /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
)
