前端项目部署

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

相关推荐
学博成2 分钟前
centos7.9 安装 Firefox
前端·firefox
wuhen_n2 分钟前
CDN图片服务与动态参数优化
前端·javascript·vue.js
郝学胜-神的一滴5 分钟前
深入理解Python生成器:从基础到斐波那契实战
开发语言·前端·python·程序人生
Mintopia14 分钟前
为什么要有 Neovate Code?
前端
IT_陈寒19 分钟前
SpringBoot 项目启动慢?5 个提速技巧让你的应用快如闪电 ⚡️
前端·人工智能·后端
IT_陈寒22 分钟前
SpringBoot自动配置的坑,我把头发都快薅没了
前端·人工智能·后端
xkxnq26 分钟前
第六阶段:Vue生态高级整合与优化(第96天) Vue i18n优化:语言包按需加载+缓存当前语言+避免页面刷新失效
前端·vue.js·缓存
Dxy123931021629 分钟前
Ajax如何发送列表数据
前端·ajax·okhttp
C澒32 分钟前
微前端容器标准化 —— 公共能力篇:通用跨框架通信能力
前端·架构