使用docker创建nginx容器部署前端项目

一、docker部署nginx服务

1、创建本地文件

本地创建nginx文件夹,并在其下创建www、config、logs三个文件夹

2、docker拉取nginx镜像

docker pull nginx

3、创建nginx容器

docker run -d --name nginx -p 8088:80 nginx

4、将nginx.conf容器配置拷贝到本地创建的config文件夹中

docker cp 容器id:/etc/nginx/nginx.conf /root/nginx/conf

5、停止并删除nginx容器

//停止容器
docker stop nginx
//删除容器
docker rm nginx

6、创建新的容器,并将www、logs、conf目录映射到本地

docker run --name nginx -p 80:80 -v /data/nginx/www:/usr/share/nginx/html -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/logs:/var/log/nginx -d nginx

二、将前端代码打包上传

1、打包前端代码

npm run build

2、将打包后的文件上传

打包后会在项目的根目录下生成 dist 目录,我们只需要将 dist 目录下的所有文件拷贝到服务器中的 www 文件夹中即可

3、重启nginx服务

docker restart nginx

三、访问前端项目

如果服务器有防火墙配置,则需要开放nginx服务对应的端口,阿里云服务器需要配置安全策略组,开放对应的端口

访问地址:http://服务器ip地址:nginx映射的端口(默认使用80)

相关推荐
木子dn25 分钟前
docker部署简单的Kafka
docker·容器·kafka
叁分之一40 分钟前
“我打包又失败了”
前端·npm
tang游戏王12340 分钟前
AJAX进阶-day4
前端·javascript·ajax
无语听梧桐1 小时前
vue3中使用Antv G6渲染树形结构并支持节点增删改
前端·vue.js·antv g6
go2coding1 小时前
开源 复刻GPT-4o - Moshi;自动定位和解决软件开发中的问题;ComfyUI中使用MimicMotion;自动生成React前端代码
前端·react.js·前端框架
月清晖1 小时前
centos更换yum源、安装Docker和换源
linux·docker·centos
freesharer1 小时前
Zabbix 配置WEB监控
前端·数据库·zabbix
web前端神器1 小时前
forever启动后端服务,自带日志如何查看与设置
前端·javascript·vue.js
是Yu欸1 小时前
【前端实现】在父组件中调用公共子组件:注意事项&逻辑示例 + 将后端数组数据格式转换为前端对象数组形式 + 增加和删除行
前端·vue.js·笔记·ui·vue
今天是 几 号2 小时前
WEB攻防-XSS跨站&反射型&存储型&DOM型&标签闭合&输入输出&JS代码解析
前端·javascript·xss