Docker 部署前端项目(非自动化)

1. nginx配置文件

1.1 nginxConf

首先你需要有nginx配置文件，你可以执行以下命令获取配置文件

# 安装镜像-生成一个nginx管理文件
docker pull nginx
mkdir -p /home/www/nginxConf
# 先启动，生成配置文件之后再删除。
mkdir -p /home/www/nginxConf/demo
mkdir -p /home/www/demo
# 创建容器
docker run --name demo -d -p 81:80 nginx
# 映射数据
docker cp demo:/etc/nginx/nginx.conf /home/www/nginxConf/demo/
docker cp demo:/etc/nginx/conf.d/ /home/www/nginxConf/demo/
docker cp demo:/usr/share/nginx/html/ /home/www/demo/dist
# 文件映射结束，删除容器
docker rm -f demo

2. 创建容器

2.1 添加项目

2.2 下载项目依赖

2.3 打包前端项目

2.4 创建容器

docker run --name dockerDemo -p 81:80 -v 
/home/www/demo/doctor-demo/dist:/usr/share/nginx/html -v 
/home/www/nginxConf/nginx.conf:/etc/nginx/nginx.conf -v 
/home/www/nginxConf/conf.d:/etc/nginx/conf.d --restart=always -d nginx:latest

2.5 查看容器

docker ps -a

3. 视频演示

docker部署vue3项目（非自动化）

4. 注意

前端上线的项目在路由上可能出现刷新后出现404的情况，这时，我们需要在nginxConf文件中的conf.d文件下的default.conf文件配置一行代码。