前端项目部署

安装nginx

创建html的挂载目录

复制代码
docker volume create nginx8020

【用docker挂载会自动创建】

创建conf的挂载目录

复制代码
mkdir -p /opt/nginx/conf

拉取镜像

复制代码
docker pull nginx

初始化挂载目录的配置文件

复制代码
docker run --rm --name nginx-short -p 8020:80 -d nginx


docker cp nginx-short:/etc/nginx/nginx.conf /opt/nginx/conf

docker stop nginx-short

创建容器

复制代码
docker run --rm -d -p 8020:80 --name nginx8020 -v nginx8020:/usr/share/nginx/html  -v /opt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  nginx

配置文件

查看配置文件

复制代码
cat /opt/nginx/conf/nginx.conf

修改配置文件

复制代码
vim /opt/nginx/conf/nginx.conf

修改server的配置文件

复制代码
docker exec -it nginx8020 /bin/bash

vim  /etc/nginx/conf.d/default.conf

html文件

复制代码
cd /var/lib/docker/volumes/nginx8020/_data

部署项目【如vue3项目】

打包vue3项目

复制代码
npm run build

部署到nginx上

把打包后的dist文件里面的内容直接放在html的挂载目录即可

相关推荐
m0_639817151 小时前
基于springboot纺织品企业财务管理系统【带源码和文档】
java·服务器·前端
石小石Orz1 小时前
qinkun的缓存机制也有弊端,建议官方个参数控制
前端
用户4099322502121 小时前
Vue浅响应式如何解决深层响应式的性能问题?适用场景有哪些?
前端·ai编程·trae
CC码码1 小时前
重生之我在浏览器里“蹦迪”
前端·javascript·three.js
阡陌昏晨1 小时前
H5性能优化-打开效率提升了62%
前端·javascript·vue.js
鹏北海1 小时前
TypeScript 类型工具与 NestJS Mapped Types
前端·后端·typescript
烟袅1 小时前
一文搞懂 CSS 定位:relative、absolute、fixed、sticky
前端·css
孟祥_成都1 小时前
你离前端动画高手只差这个秘籍!GSAP ScrollTrigger 动画完全指南!(第一章)
前端·动效
小小前端_我自坚强1 小时前
React 18 新特性深度解析
前端·javascript·react.js
BBB努力学习程序设计1 小时前
Canvas绘图基础:坐标、线条与圆形的艺术
前端·html