部署前端项目
- 1. nginx配置文件
- 1.1 nginxConf
- 2. 创建容器
- 2.1 添加项目
- 2.2 下载项目依赖
- 2.3 打包前端项目
- 2.4 创建容器
- 2.5 查看容器
- 3. 视频演示
- 4. 注意
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文件配置一行代码。