前端项目部署

安装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的挂载目录即可

相关推荐
CappuccinoRose1 分钟前
JavaScript 学习文档(二)
前端·javascript·学习·数据类型·运算符·箭头函数·变量声明
这儿有一堆花7 分钟前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架
全栈前端老曹22 分钟前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
NCDS程序员1 小时前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
夏幻灵1 小时前
CSS三大特性:层叠、继承与优先级解析
前端·css
小杨同学呀呀呀呀1 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
华玥作者9 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_10 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠10 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang2015092810 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet