前端项目部署

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

相关推荐
英俊潇洒美少年4 分钟前
前端组件化开发最佳实践 + 高频面试题(Vue & React)
前端·vue.js·react.js
凌览6 分钟前
别再手搓 Skill 了,用这个工具 5 分钟搞定
前端·后端
zero15979 分钟前
TypeScript 快速实战系列:函数进阶|TypeScript 函数 + 异步:大模型 API 调用核心
前端·typescript·大模型编程语言
無名路人11 分钟前
用 codex AI 更新了下之前写的浏览器云书签标签页扩展
前端·openai·ai编程
月弦笙音16 分钟前
【pnpm 】pnpm 执行 xxx 的 底层原理
前端
Devin_chen36 分钟前
单例模式渐进式学习指南
前端·javascript
苏西的网络日志1 小时前
基于 Element Plus 的企业级主题定制方案:SCSS 变量覆盖 + Vite 全局注入实战
前端
吴声子夜歌1 小时前
Vue3——计算属性和监听属性
前端·vue.js
苏西的网络日志1 小时前
小程序 web-view 内嵌 H5 的会话管理:Token 失效跳转登录的完整方案
前端
小满zs1 小时前
Next.js精通SEO第一章(引言)
前端·seo·next.js