前端项目部署

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

相关推荐
xianxin_15 分钟前
HTML5 地理定位
前端
Running_C22 分钟前
Vue组件化开发:从基础到实践的全面解析
前端·vue.js·面试
Clain22 分钟前
如何搭建一台属于自己的服务器并部署网站,超详细小白教程
linux·运维·前端
胡清波24 分钟前
小程序中使用字体图标的最佳实践
前端
xianxin_26 分钟前
HTML5 客户端存储
前端
南玖i26 分钟前
使用vue缓存机制 缓存整个项目的时候 静态的一些操作也变的很卡,解决办法~超快超简单~
前端·javascript·vue.js
计算机毕设定制辅导-无忧学长1 小时前
InfluxDB 集群部署与高可用方案(二)
java·linux·前端
袁煦丞1 小时前
MongoDB数据存储界的瑞士军刀:cpolar内网穿透实验室第513号成功挑战
前端·程序员·远程工作
天才熊猫君2 小时前
npm 和 pnpm 的一些理解
前端
飞飞飞仔2 小时前
从 Cursor AI 到 Claude Code AI:我的辅助编程转型之路
前端